import ActionLink from "@/components/ActionLink";
import Container from "@/components/NAWebsite/Container";
import Image, { StaticImageData } from "next/image";
import Link, { LinkProps } from "next/link";
import { BsPlay } from "react-icons/bs";
import { IoIosMore } from "react-icons/io";
import { MdArrowForward } from "react-icons/md";
import iconAws from "./icon-aws.webp";
import iconDify from "./icon-dify.webp";
import iconDspy from "./icon-dspy.webp";
import iconGemini from "./icon-gemini.webp";
import iconJina from "./icon-jina.webp";
import iconLangchain from "./icon-langchain.webp";
import iconLlamaIndex from "./icon-llamaindex.webp";
import iconOpenAI from "./icon-openai.webp";
import { SectionDescription, SectionTitle } from "./Section";

function Card({
  icon,
  width,
  height,
  name,
  hint,
  ...props
}: {
  icon: StaticImageData;
  width: number;
  height: number;
  name: string;
  hint: React.ReactNode;
} & LinkProps &
  React.ComponentPropsWithoutRef<"a">) {
  return (
    <Link
      className="border-carbon-900 group relative select-none border bg-black py-8 xl:py-10"
      data-gtag={`event:integration_click,title:${name}`}
      {...props}
    >
      <div className="bg-red absolute inset-0 z-10 flex items-center justify-center opacity-0 transition-all group-hover:opacity-100 group-hover:backdrop-blur-xl">
        <div className="inline-flex items-center gap-1 text-white">
          {hint}
          <MdArrowForward className="duration-400 -translate-x-1 transition-transform group-hover:translate-x-0" />
        </div>
      </div>
      <Image
        src={icon}
        alt={name}
        width={width}
        height={height}
        quality={100}
        className="object-contain mx-auto"
      />
      <div className="pt-6 text-center text-[15px] font-light text-white">
        {name}
      </div>
    </Link>
  );
}

function CardMore(props: LinkProps & React.ComponentPropsWithoutRef<"a">) {
  return (
    <Link
      className="border-carbon-900 group relative flex select-none items-center justify-center border bg-black py-8 xl:py-10"
      data-gtag={`event:integration_click,title:More`}
      {...props}
    >
      <div className="bg-red absolute inset-0 z-10 flex items-center justify-center opacity-0 transition-all group-hover:opacity-100 group-hover:backdrop-blur-xl">
        <div className="inline-flex items-center gap-1 text-white">
          Explore more
          <MdArrowForward className="duration-400 -translate-x-1 transition-transform group-hover:translate-x-0" />
        </div>
      </div>
      <IoIosMore className="text-3xl text-white" />
    </Link>
  );
}

export default function IntegrationsSection() {
  return (
    <div className="bg-black py-10 md:py-20">
      <Container>
        <div className="flex flex-col gap-8 md:flex-row">
          <div className="pb-8 md:flex-1 lg:pb-0">
            <SectionTitle>Integrations</SectionTitle>
            <SectionDescription className="m-0 text-[22px]">
              Production-ready integrations for every stage of your AI pipeline.
            </SectionDescription>
            <div className="mt-9 flex gap-1">
              <BsPlay className="text-carbon mt-[2px] h-4 w-4" />
              <div className="text-carbon flex-1 font-mono text-sm leading-5">
                Quick start: copy paste your Connection String into listed
                integrations.
              </div>
            </div>
            <p className="mt-9">
              <ActionLink
                target="_blank"
                rel="noopener noreferrer"
                href="https://github.com/pingcap/tidb-vector-python/tree/main/examples"
              >
                Explore All Integrations
              </ActionLink>
            </p>
          </div>
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:shrink-[2] md:grow-[2] lg:col-span-8 xl:grid-cols-4">
            <Card
              href="https://github.com/pingcap/tidb-vector-python/tree/main/examples/openai_embedding"
              target="_blank"
              rel="noopener noreferrer"
              icon={iconOpenAI}
              width={36}
              height={37}
              name="OpenAI Embedding"
              hint="View Example"
            />
            <Card
              href="https://github.com/pingcap/tidb-vector-python/tree/main/examples/gemini-ai-embeddings-demo"
              target="_blank"
              rel="noopener noreferrer"
              icon={iconGemini}
              width={79}
              height={29}
              name="Gemini AI Embedding"
              hint="View Example"
            />
            <Card
              href="https://docs.pingcap.com/tidbcloud/vector-search-integrate-with-jinaai-embedding"
              target="_blank"
              rel="noopener noreferrer"
              icon={iconJina}
              width={61}
              height={26}
              name="Jina AI Embedding"
              hint="Read Docs"
            />
            {/* <Card icon={iconCohere} name="Cohere" /> */}
            <Card
              href="https://docs.pingcap.com/tidbcloud/vector-search-integrate-with-llamaindex"
              target="_blank"
              rel="noopener noreferrer"
              icon={iconLlamaIndex}
              width={42}
              height={42}
              name="LlamaIndex"
              hint="Read Docs"
            />
            <Card
              href="https://docs.pingcap.com/tidbcloud/vector-search-integrate-with-langchain"
              target="_blank"
              rel="noopener noreferrer"
              icon={iconLangchain}
              width={62}
              height={31}
              name="Langchain"
              hint="Read Docs"
            />
            <Card
              href="https://www.pingcap.com/blog/dify-tidb-build-scalable-ai-agent-with-knowledge-base/"
              target="_blank"
              rel="noopener noreferrer"
              icon={iconDify}
              width={77}
              height={32}
              name="Dify"
              hint="Read Tutorial"
            />
            <Card
              href="https://github.com/pingcap/tidb-vector-python/tree/main/examples/dspy-demo"
              target="_blank"
              rel="noopener noreferrer"
              icon={iconDspy}
              width={39}
              height={39}
              name="DSPy"
              hint="View Example"
            />
            <Card
              href="https://github.com/aws-samples/aws-generativeai-partner-samples/tree/main/tidb"
              target="_blank"
              rel="noopener noreferrer"
              icon={iconAws}
              width={59}
              height={35}
              name="Amazon Bedrock"
              hint="View Example"
            />
          </div>
        </div>
      </Container>
    </div>
  );
}