import { Box, Button, Center, Group, Image, useComputedColorScheme, useMantineTheme } from '@tidbcloud/uikit'
import { IconLinkExternal01 } from '@tidbcloud/uikit/icons'
import { rgba } from '@tidbcloud/uikit/utils'
import { Link } from 'react-router-dom'

import { VendorLogo } from 'dbaas/components'
import {
  getPrometheusDocUrl,
  PrometheusClusterTarget,
  PrometheusPreviewBadge,
  PrometheusInstallAction
} from 'dbaas/screens/ClusterV2/features/ClusterIntegration/features/MonitoringIntegration/Prometheus'
import IconAirbyte from 'media/logo/airbyte.svg?react'
import IconAmazonAppFlow from 'media/logo/amazon-app-flow.svg?react'
import IconAwsLambda from 'media/logo/aws-lambda.svg?react'
import IconCloudflareWorkers from 'media/logo/cloudflare-worker.svg?react'
import IconDataGrip from 'media/logo/datagrip.svg?react'
import IconDBeaver from 'media/logo/dbeaver.svg?react'
import IconDbtLabs from 'media/logo/dbt-labs.svg?react'
import IconDjango from 'media/logo/django.svg?react'
import IconGitpod from 'media/logo/gitpod.svg?react'
import IconGoMySQLDriver from 'media/logo/go.svg?react'
import IconGORM from 'media/logo/gorm.svg?react'
import IconHibernate from 'media/logo/hibernate.svg?react'
import IconJavaScript from 'media/logo/javascript-v2.svg?react'
import IconJdbc from 'media/logo/jdbc.svg?react'
import IconLookerStudio from 'media/logo/looker-studio.svg?react'
import IconMyBatis from 'media/logo/mybatis.svg?react'
import IconMySQLWorkbench from 'media/logo/mysql-02.svg?react'
import IconN8n from 'media/logo/n8n.svg?react'
import IconNavicat from 'media/logo/navicat.svg?react'
import IconNetlify from 'media/logo/netlify.svg?react'
import IconPeewee from 'media/logo/peewee.svg?react'
import IconPrisma from 'media/logo/prisma.svg?react'
import IconPython from 'media/logo/python-logo.svg?react'
import IconRails from 'media/logo/rails.svg?react'
import IconRuby from 'media/logo/ruby.svg?react'
import IconSequelize from 'media/logo/sequelize.svg?react'
import IconSpringBoot from 'media/logo/spring-boot.svg?react'
import IconSQLAlchemy from 'media/logo/sql-alchemy.svg?react'
import IconTerraform from 'media/logo/terraform.svg?react'
import IconTypeORM from 'media/logo/typeorm.svg?react'
import IconVSCode from 'media/logo/visual-studio-code.svg?react'
import IconWordPress from 'media/logo/wordpress.svg?react'
import IconZapier from 'media/logo/zapier-v2.svg?react'

import { RequestIntegration } from '../features/RequestIntegration'
import Vercel from '../features/Vercel'
import NestDark from '../images/nest-dark.svg'
import Nest from '../images/nest.svg'
import IconProxySQL from '../images/proxySQL.png'
import IconSendDark from '../images/send-dark.svg?react'
import IconSend from '../images/send.svg?react'
import { IntegrationLink } from '../IntegrationCard'

import { IntegrationItemType } from './type'

export const useBedrockData = (clusterId: string, isVarient?: boolean): IntegrationItemType => {
  const theme = useMantineTheme()

  return {
    name: 'AWS Bedrock',
    logo: isVarient ? (
      <Box
        w={64}
        h={64}
        p={12}
        sx={(t) => ({ border: `1px solid ${t.colors.carbon[4]}`, borderRadius: '8px', backgroundColor: t.white })}
      >
        <VendorLogo name="amazon-bedrock" />
      </Box>
    ) : (
      <Box w={48} h={48}>
        <VendorLogo name="amazon-bedrock" />
      </Box>
    ),
    description: isVarient
      ? 'Create and manage integrated embeddings with hosted embedding models'
      : 'Manage embeddings with hosted models.',
    sx: isVarient
      ? {
          background: `linear-gradient(104.52deg, ${rgba(theme.colors.carbon[5], 0.12)} 38.5%, ${rgba(theme.colors.blue[5], 0.06)} 53.53%, ${rgba(theme.colors.violet[7], 0.12)} 78.67%, ${rgba(theme.colors.violet[6], 0.12)} 105.18%)`
        }
      : undefined,
    actionLeftSection: (
      <Group gap={0}>
        <IntegrationLink
          label="Learn"
          icon={<IconLinkExternal01 size={16} mr={-4} />}
          href="https://docs.pingcap.com/ai/vector-search-integrate-with-amazon-bedrock/#integrate-tidb-vector-search-with-amazon-bedrock"
        />
        <IntegrationLink
          label="Examples"
          icon={<IconLinkExternal01 size={16} mr={-4} />}
          href="https://labs.tidb.io/labs/demo_421"
        />
      </Group>
    ),
    actionButton: (
      <Button
        h={32}
        size="md"
        c="carbon.8"
        variant="default"
        component={Link}
        to={`/clusters/${clusterId}/aws-bedrock`}
        data-mp-event="AWS Bedrock Integration Button Clicked"
      >
        Use
      </Button>
    )
  }
}

export const useVercelData = (isVarient?: boolean): IntegrationItemType => {
  const theme = useMantineTheme()
  return {
    name: 'Vercel',
    logo: isVarient ? (
      <Box
        w={64}
        h={64}
        p={12}
        sx={(t) => ({ border: `1px solid ${t.colors.carbon[4]}`, borderRadius: '8px', backgroundColor: t.white })}
      >
        <VendorLogo name="vercel" />
      </Box>
    ) : (
      <Box w={48} h={48}>
        <VendorLogo name="vercel" />
      </Box>
    ),
    description: 'Deploy frontend apps with fast CDN',
    sx: isVarient
      ? {
          background: `linear-gradient(104.52deg, ${rgba(theme.colors.carbon[5], 0.12)} 38.5%, ${rgba(theme.colors.blue[5], 0.06)} 53.53%, ${rgba(theme.colors.violet[7], 0.12)} 78.67%, ${rgba(theme.colors.violet[6], 0.12)} 105.18%)`
        }
      : undefined,
    actionLeftSection: <Vercel />,
    actionButton: (
      <Button
        h={32}
        size="md"
        variant="default"
        component="a"
        target="_blank"
        leftSection={<IconLinkExternal01 size={12} />}
        href={`https://docs.pingcap.com/tidbcloud/integrate-tidbcloud-with-vercel`}
      >
        Use
      </Button>
    )
  }
}

export const useRequestIntegrationData = (): IntegrationItemType => {
  const theme = useMantineTheme()
  const ctxColorScheme = useComputedColorScheme()
  const isDark = ctxColorScheme === 'dark'
  return {
    name: 'Request an integration',
    logo: (
      <Center
        w={64}
        h={64}
        sx={(t) => ({ border: `1px solid ${t.colors.carbon[4]}`, borderRadius: '8px', backgroundColor: t.white })}
      >
        {isDark ? <IconSendDark /> : <IconSend />}
      </Center>
    ),
    sx: {
      backgroundColor: theme.colors.carbon[2],
      backgroundImage: `linear-gradient(180deg, ${rgba(theme.colors.carbon[2], 0)} 0%, ${theme.colors.carbon[2]} 100%), url(${isDark ? NestDark : Nest})`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: 'contain'
    },
    description: "Not seeing what you need? Request an integration you'd like to use",
    actionButton: <RequestIntegration />
  }
}

export const useTerraformData = (isVarient?: boolean): IntegrationItemType => {
  const theme = useMantineTheme()
  return {
    name: 'Terraform',
    logo: isVarient ? (
      <Center
        w={64}
        h={64}
        sx={(t) => ({ border: `1px solid ${t.colors.carbon[4]}`, borderRadius: '8px', backgroundColor: t.white })}
      >
        <IconTerraform />
      </Center>
    ) : (
      <IconTerraform />
    ),
    sx: isVarient
      ? {
          background: `linear-gradient(104.52deg, ${rgba(theme.colors.carbon[5], 0.12)} 38.5%, ${rgba(theme.colors.blue[5], 0.06)} 53.53%, ${rgba(theme.colors.violet[7], 0.12)} 78.67%, ${rgba(theme.colors.violet[6], 0.12)} 105.18%)`
        }
      : undefined,
    description: 'Provision infrastructure with code',
    documentUrl: 'https://docs.pingcap.com/tidbcloud/terraform-tidbcloud-provider-overview/'
  }
}

export const useNextJsData = (isVarient?: boolean): IntegrationItemType => {
  const theme = useMantineTheme()
  return {
    name: 'Next.js',
    logo: isVarient ? (
      <Center
        w={64}
        h={64}
        sx={(t) => ({ border: `1px solid ${t.colors.carbon[4]}`, borderRadius: '8px', backgroundColor: t.white })}
      >
        <VendorLogo name="next-js" size={48} />
      </Center>
    ) : (
      <VendorLogo name="next-js" size={48} />
    ),
    sx: isVarient
      ? {
          background: `linear-gradient(104.52deg, ${rgba(theme.colors.carbon[5], 0.12)} 38.5%, ${rgba(theme.colors.blue[5], 0.06)} 53.53%, ${rgba(theme.colors.violet[7], 0.12)} 78.67%, ${rgba(theme.colors.violet[6], 0.12)} 105.18%)`
        }
      : undefined,
    description: 'React framework with server rendering',
    documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-nextjs/'
  }
}

export const useJdbcData = (isVarient?: boolean): IntegrationItemType => {
  const theme = useMantineTheme()
  return {
    name: 'JDBC',
    logo: isVarient ? (
      <Center
        w={64}
        h={64}
        sx={(t) => ({ border: `1px solid ${t.colors.carbon[4]}`, borderRadius: '8px', backgroundColor: t.white })}
      >
        <IconJdbc />
      </Center>
    ) : (
      <IconJdbc />
    ),
    sx: isVarient
      ? {
          background: `linear-gradient(104.52deg, ${rgba(theme.colors.carbon[5], 0.12)} 38.5%, ${rgba(theme.colors.blue[5], 0.06)} 53.53%, ${rgba(theme.colors.violet[7], 0.12)} 78.67%, ${rgba(theme.colors.violet[6], 0.12)} 105.18%)`
        }
      : undefined,
    description: 'Standard Java SQL connector',
    documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-java-jdbc/'
  }
}

export const usePrometheusData = (cluster: PrometheusClusterTarget): IntegrationItemType => {
  return {
    name: 'Prometheus',
    nameBadge: <PrometheusPreviewBadge />,
    logo: <VendorLogo name="prometheus" size={48} />,
    description: 'Metrics Integration',
    actionLeftSection: (
      <IntegrationLink
        label="Learn"
        icon={<IconLinkExternal01 size={16} mr={-4} />}
        href={getPrometheusDocUrl(cluster.servicePlan)}
      />
    ),
    actionButton: <PrometheusInstallAction cluster={cluster} actionAccessId="ProjectIntegrationAction" />
  }
}

export const awsLambda: IntegrationItemType = {
  name: 'AWS Lambda',
  logo: <IconAwsLambda />,
  description: 'Run backend code without servers',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-aws-lambda/'
}

export const cloudflareWorkers: IntegrationItemType = {
  name: 'Cloudflare Workers',
  logo: <IconCloudflareWorkers />,
  description: 'Run lightweight edge apps globally',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/integrate-tidbcloud-with-cloudflare/'
}

export const gitpod: IntegrationItemType = {
  name: 'Gitpod',
  logo: <IconGitpod />,
  description: 'Cloud dev environments for fast coding',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/dev-guide-playground-gitpod/'
}

export const netlify: IntegrationItemType = {
  name: 'Netlify',
  logo: <IconNetlify />,
  description: 'Host static sites and serverless functions',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/integrate-tidbcloud-with-netlify/'
}

export const wordpress: IntegrationItemType = {
  name: 'WordPress',
  logo: <IconWordPress />,
  description: 'Build websites with MySQL-powered CMS',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-wordpress/'
}

export const airbyte: IntegrationItemType = {
  name: 'Airbyte',
  logo: <IconAirbyte />,
  description: 'Connect and sync data sources',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/integrate-tidbcloud-with-airbyte/'
}

export const amazonAppFlow: IntegrationItemType = {
  name: 'Amazon AppFlow',
  logo: <IconAmazonAppFlow />,
  description: 'Sync SaaS data into TiDB Cloud',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/dev-guide-aws-appflow-integration/'
}

export const dbtLabs: IntegrationItemType = {
  name: 'dbt Labs',
  logo: <IconDbtLabs />,
  description: 'Transform data with models',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/integrate-tidbcloud-with-dbt/'
}

export const lookerStudio: IntegrationItemType = {
  name: 'Looker Studio',
  logo: <IconLookerStudio />,
  description: 'Visualize data in interactive dashboards',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/dev-guide-bi-looker-studio/'
}

export const n8n: IntegrationItemType = {
  name: 'n8n',
  logo: <IconN8n />,
  description: 'Automate workflows with low-code builder',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/integrate-tidbcloud-with-n8n/'
}

export const zapier: IntegrationItemType = {
  name: 'Zapier',
  logo: <IconZapier />,
  description: 'Link web services and automate flows',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/integrate-tidbcloud-with-zapier/'
}

export const dbeaver: IntegrationItemType = {
  name: 'DBeaver',
  logo: <IconDBeaver />,
  description: 'Cross-platform database GUI',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-gui-dbeaver/'
}

export const jetBrainsDataGrip: IntegrationItemType = {
  name: 'JetBrains DataGrip',
  logo: <IconDataGrip />,
  description: 'Smart SQL IDE for developers',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-gui-datagrip/'
}

export const mySQLWorkbench: IntegrationItemType = {
  name: 'MySQL Workbench',
  logo: <IconMySQLWorkbench />,
  description: 'Design and manage MySQL databases',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-gui-mysql-workbench/'
}

export const navicat: IntegrationItemType = {
  name: 'Navicat',
  logo: <IconNavicat />,
  description: 'Manage multiple DBs with visual interface',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-gui-navicat/'
}

export const proxySQL: IntegrationItemType = {
  name: 'ProxySQL',
  logo: <Image src={IconProxySQL} w={48} />,
  description: 'High-performance SQL proxy for scaling',
  documentUrl: 'https://docs.pingcap.com/tidbcloud/dev-guide-proxysql-integration/'
}

export const visualStudioCode: IntegrationItemType = {
  name: 'Visual Studio Code',
  logo: <IconVSCode />,
  description: 'Popular code editor with SQL support',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-gui-vscode-sqltools/'
}

export const hibernate: IntegrationItemType = {
  name: 'Hibernate',
  logo: <IconHibernate />,
  description: 'ORM tool for Java applications',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-java-hibernate/'
}

export const myBatis: IntegrationItemType = {
  name: 'MyBatis',
  logo: <IconMyBatis />,
  description: 'Java SQL mapper framework',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-java-mybatis/'
}

export const springBoot: IntegrationItemType = {
  name: 'Spring Boot',
  logo: <IconSpringBoot />,
  description: 'Build production-ready Java apps',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-java-spring-boot/'
}

export const goMySQLDriver: IntegrationItemType = {
  name: 'Go-MySQL-Driver',
  logo: <IconGoMySQLDriver />,
  description: 'Go MySQL client library',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-golang-sql-driver/'
}

export const gorm: IntegrationItemType = {
  name: 'GORM',
  logo: <IconGORM />,
  description: 'Go ORM with struct-based queries',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-golang-gorm/'
}

export const django: IntegrationItemType = {
  name: 'Django',
  logo: <IconDjango />,
  description: 'Python web framework with ORM',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-python-django/'
}

export const mySqlclient: IntegrationItemType = {
  name: 'MySQLClient',
  logo: <IconPython />,
  description: 'MySQL driver for Python',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-python-mysqlclient/'
}

export const mySQLConnectorPython: IntegrationItemType = {
  name: 'MySQL Connector/Python',
  logo: <IconPython />,
  description: 'Official MySQL Python driver',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-python-mysql-connector/'
}

export const peewee: IntegrationItemType = {
  name: 'Peewee',
  logo: <IconPeewee />,
  description: 'Lightweight Python ORM',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-python-peewee/'
}

export const pyMySQL: IntegrationItemType = {
  name: 'PyMySQL',
  logo: <IconPython />,
  description: 'Python implementation of MySQL client',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-python-pymysql/'
}

export const sqlAlchemy: IntegrationItemType = {
  name: 'SQLAlchemy',
  logo: <IconSQLAlchemy />,
  description: 'Powerful SQL toolkit for Python',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-python-sqlalchemy/'
}

export const mySqlJs: IntegrationItemType = {
  name: 'MySQL.js',
  logo: <IconJavaScript />,
  description: 'Basic MySQL client for Node.js',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-nodejs-mysqljs/'
}

export const nodeMysql2: IntegrationItemType = {
  name: 'node-mysql2',
  logo: <IconJavaScript />,
  description: 'Fast MySQL driver for Node.js',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-nodejs-mysql2/'
}

export const prisma: IntegrationItemType = {
  name: 'Prisma',
  logo: <IconPrisma />,
  description: 'Type-safe ORM for Node.js and TS',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-nodejs-prisma/'
}

export const sequelize: IntegrationItemType = {
  name: 'Sequelize',
  logo: <IconSequelize />,
  description: 'Promise-based Node.js ORM',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-nodejs-sequelize/'
}

export const typeORM: IntegrationItemType = {
  name: 'TypeORM',
  logo: <IconTypeORM />,
  description: 'ORM for TypeScript and JavaScript',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-nodejs-typeorm/'
}

export const mysql2: IntegrationItemType = {
  name: 'mysql2',
  logo: <IconRuby />,
  description: 'Ruby client for MySQL',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-ruby-mysql2/'
}

export const rails: IntegrationItemType = {
  name: 'Rails',
  logo: <IconRails />,
  description: 'Ruby web framework with ORM',
  documentUrl: 'https://docs.pingcap.com/developer/dev-guide-sample-application-ruby-rails/'
}