'use client';

import * as React from 'react';
import NextImage from 'next/image';
import clsx from 'clsx';
import NextLink from 'next/link';

import { ThreeDotsIcon } from '@/components/Icon';
import { DOC_CLOUD_INTEGRATION } from '@/constant/url';

export default function Integration() {
  return (
    <>
      <section
        className="flex w-full flex-col items-center px-6 py-8 lg:px-8"
        style={{
          background:
            'radial-gradient(75.27% 75.27% at 48.39% 92.48%, rgba(14, 91, 70, 0.62) 0%, rgba(0, 142, 187, 0.28) 0.01%, rgba(5, 140, 116, 0.21) 31.25%, rgba(29, 50, 113, 0.00) 100%)',
        }}
      >
        <h2 className="pb-4 pt-4 md:pt-8 lg:pt-16 text-center font-bold leading-normal">
          Seamless Integration With What You Already Use
        </h2>
        <div className="flex justify-center  pb-8 text-center text-sm leading-8 text-darkgrey-100">
          <div className="max-w-5xl">
            Our growing integration and ecosystem curate the most popular ways
            to work TiDB Serverless. You can connect to what you already use.
          </div>
        </div>
        <NextLink
          href={DOC_CLOUD_INTEGRATION}
          className="text-lg text-action hover:text-[rgb(var(--color-action-theme-rgb)/0.8)]"
          target="_blank"
        >
          Deep dive into integrations →
        </NextLink>
        <DesktopLogoBlock />
        <MobileLogoBlock />
      </section>
    </>
  );
}

function DesktopLogoBlock(props: any) {
  return (
    <div className="hidden w-full overflow-auto md:block">
      <div
        className="mx-auto mt-16 grid h-auto w-full min-w-[1000px] max-w-6xl grid-cols-12 items-center justify-items-stretch gap-x-16 gap-y-16 bg-cover bg-top bg-no-repeat px-6 py-8 md:px-8"
        style={{
          backgroundImage: 'url(https://static.pingcap.com/files/2024/06/26071700/bg.svg)',
          backgroundSize: '90% 80%',
          backgroundPosition: 'center',
        }}
      >
        <div className="col-span-12 flex w-full items-center justify-center">
          <Logo
            logo={logoList[0]}
            className=" flex h-24 w-24 items-center justify-center"
          />
        </div>
        {logoList.slice(1, 5).map((logo) => (
          <div
            key={logo.id}
            className="col-span-3 flex w-full items-center justify-center"
          >
            <Logo
              logo={logo}
              className="flex h-24 w-auto min-w-[200px] items-center justify-center"
            />
          </div>
        ))}
        {logoList.slice(5, 9).map((logo) => (
          <div
            key={logo.id}
            className="col-span-3 flex w-full items-center justify-center"
          >
            <Logo
              key={logo.id}
              logo={logo}
              className="flex h-24 w-auto min-w-[200px] items-center justify-center"
              imageClassName={clsx('h-full max-h-8 w-auto', logo.className)}
            />
          </div>
        ))}
        {logoList.slice(9, 14).map((logo) => (
          <div
            key={logo.id}
            className="col-span-2 flex w-full items-center justify-center"
          >
            <Logo
              key={logo.id}
              logo={logo}
              className="flex h-24 w-24 items-center justify-center"
              imageClassName="w-12 h-12"
            />
          </div>
        ))}
        <div className="col-span-2 flex w-full items-center justify-center">
          <LogoWrapper
            className={clsx('flex h-24 w-24 items-center justify-center')}
          >
            <ThreeDotsIcon className="h-12 w-12" />
          </LogoWrapper>
        </div>
      </div>
    </div>
  );
}

function MobileLogoBlock(props: any) {
  return (
    <div className="block w-full md:hidden">
      <div className="mt-16 grid h-auto w-full grid-cols-12 items-center justify-items-stretch gap-4">
        {logoList.slice(1, 9).map((logo) => (
          <div
            key={logo.id}
            className="col-span-6 flex w-full items-center justify-center"
          >
            <Logo
              logo={logo}
              className="flex h-24 w-full items-center justify-center"
            />
          </div>
        ))}
        {logoList.slice(9, 14).map((logo) => (
          <div key={logo.id} className="col-span-4 flex w-full sm:col-span-3">
            <Logo
              key={logo.id}
              logo={logo}
              className="flex h-24 w-full items-center justify-center"
              imageClassName="w-12 h-12"
            />
          </div>
        ))}
        <div className="col-span-4 flex w-full sm:col-span-3">
          <LogoWrapper
            className={clsx('flex h-24 w-full items-center justify-center')}
          >
            <ThreeDotsIcon className="h-12 w-12" />
          </LogoWrapper>
        </div>
      </div>
    </div>
  );
}

const logoList = [
  {
    id: 'tidb',
    src: '/integration/logo/tidb.svg',
    width: 57,
    height: 65,
  },
  {
    id: 'vercel',
    src: '/integration/logo/vercel.svg',
    width: 125,
    height: 28,
  },
  {
    id: 'cloudflare',
    src: '/integration/logo/cloudflare.svg',
    width: 120,
    height: 40,
  },
  {
    id: 'n8n',
    src: '/integration/logo/n8n.svg',
    width: 124,
    height: 34,
  },
  {
    id: 'gitpod',
    src: '/integration/logo/gitpod.svg',
    width: 115,
    height: 36,
  },
  {
    id: 'dbt',
    src: '/integration/logo/dbt.svg',
    width: 116,
    height: 43,
  },
  {
    id: 'airbyte',
    src: '/integration/logo/airbyte.svg',
    width: 158,
    height: 64,
  },
  {
    id: 'zapier',
    src: '/integration/logo/zapier.svg',
    width: 113,
    height: 32,
  },
  {
    id: 'dbeaver',
    src: '/integration/logo/dbeaver.svg',
    width: 78,
    height: 78,
    className: 'max-h-10 h-10 w-auto',
  },
  {
    id: 'dg',
    src: '/integration/logo/dg.svg',
    width: 52,
    height: 52,
  },
  {
    id: 'datadog',
    src: '/integration/logo/datadog.svg',
    width: 56,
    height: 64,
  },
  {
    id: 'vs',
    src: '/integration/logo/vs.svg',
    width: 51,
    height: 51,
  },
  {
    id: 'openai',
    src: '/integration/logo/openai.svg',
    width: 65,
    height: 65,
  },
  {
    id: 'terraform',
    src: '/integration/logo/terraform.svg',
    width: 119,
    height: 32,
  },
];

const LogoWrapper = (props: {
  children: React.ReactNode;
  className?: string;
}) => {
  const { className, children } = props;

  return (
    <div
      className={clsx(
        'rounded-2xl border border-darkgrey-600 bg-black px-4 py-2',
        className,
      )}
      style={{
        boxShadow: `0px 8px 32px 0px rgba(0, 0, 0, 0.40)`,
      }}
    >
      {children}
    </div>
  );
};

const Logo = (props: {
  logo: {
    id: string;
    src: string;
    width: number;
    height: number;
    className?: string;
  };
  className?: string;
  imageClassName?: string;
}) => {
  const { logo, className, imageClassName } = props;

  return (
    <LogoWrapper className={clsx(className)}>
      <NextImage
        src={logo.src}
        width={logo.width}
        height={logo.height}
        alt={`Logo - ${logo.id}`}
        className={clsx(logo?.className, imageClassName)}
      />
    </LogoWrapper>
  );
};