"use client";

import ActionArrow from "@/components/ActionArrow";
import ActionLink from "@/components/ActionLink";
import {
  IconAnchorArrow,
  IconGraphRAG,
  IconImageSearch,
  IconSemantic,
} from "@/components/Icons";
import Container from "@/components/NAWebsite/Container";
import RippleActionLink from "@/components/RippleActionLink";
import VideoModal from "@/components/VideoModal";
import Link from "next/link";
import { useEffect, useState } from "react";
import { twMerge } from "tailwind-merge";
import { SectionDescription, SectionSubTitle, SectionTitle } from "./Section";
import videoImage from "./video-image.png";

function ExampleCard({
  className,
  icon,
  title,
  children,
  href,
}: {
  className?: string;
  icon: React.ReactNode;
  title: string;
  children?: React.ReactNode;
  href: string;
}) {
  return (
    <Link
      className={twMerge(
        "group flex flex-auto flex-col px-8 py-10 transition-all duration-200 hover:-translate-y-3",
        className,
      )}
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      data-gtag={`event:example_click,title:${title}`}
    >
      {icon}
      <h3 className="mt-6 text-2xl font-bold tracking-tight text-white">
        {title}
      </h3>
      <div className="font-light text-white">{children}</div>
      <div className="mt-6 text-right">
        <div className="group inline-flex select-none items-center gap-x-2.5 text-[17px] font-medium leading-[23px] text-white transition-colors">
          View Code
          <IconAnchorArrow className="h-5 w-5 rounded-full bg-transparent transition-all duration-200 group-hover:rotate-45 group-hover:bg-white group-hover:text-black" />
        </div>
      </div>
    </Link>
  );
}

function MoreExampleCard({ href }: { href: string }) {
  return (
    <Link
      className="group relative flex flex-col items-center justify-center bg-gray-100 p-8 transition-colors"
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      data-gtag={`event:example_click,title:More`}
    >
      <div className="absolute inset-0 bg-gradient-to-bl from-rose-200/50 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
      <h3 className="font-base relative flex items-center gap-2 text-xl tracking-tight text-gray-300 transition-colors group-hover:text-gray-900">
        <span className="text-gray-500">More examples</span>
        <span className="text-4xl">
          <ActionArrow />
        </span>
      </h3>
    </Link>
  );
}

export default function PrimaryExampleSection() {
  const [isScriptLoaded, setIsScriptLoaded] = useState(false);

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://tidb.ai/widget.js";
    script.async = true;
    script.setAttribute("data-controlled", "true");

    script.onload = () => {
      window.addEventListener("tidbaiinitialized", () => {
        setIsScriptLoaded(true);
      });
    };

    document.body.appendChild(script);

    return () => {
      script.remove();
      window.removeEventListener("tidbaiinitialized", () => {
        setIsScriptLoaded(true);
      });
    };
  }, []);

  return (
    <section className="bg-black pt-10 md:pt-20">
      <Container>
        <SectionSubTitle>Examples &amp; Use Cases</SectionSubTitle>
        <SectionTitle className="max-w-[800px]">
          Production-Ready AI Applications in Minutes
        </SectionTitle>
        <div className="mt-10">
          <div className="mt-10 grid gap-4 md:mt-20 md:grid-cols-2 xl:grid-cols-3">
            <ExampleCard
              className="bg-red-dark"
              icon={<IconGraphRAG className="w-[60px]" />}
              title="GraphRAG"
              href="https://github.com/pingcap/tidb-vector-python/tree/main/examples/graphrag-step-by-step-tutorial"
            >
              <p className="mb-8 mt-6 text-white">
                Enhance RAG applications with knowledge graph context for more
                accurate answers.
              </p>
            </ExampleCard>
            <ExampleCard
              className="bg-violet-dark"
              icon={<IconSemantic className="w-[44px]" />}
              title="Semantic Search"
              href="https://github.com/pingcap/tidb-vector-python/tree/main/examples/openai_embedding"
            >
              <p className="mb-8 mt-6 text-white">
                Build powerful semantic search with vector similarity and SQL
                filtering combined.
              </p>
            </ExampleCard>
            <ExampleCard
              className="bg-blue-dark"
              icon={<IconImageSearch className="w-[44px]" />}
              title="Image Search"
              href="https://github.com/pingcap/tidb-vector-python/tree/main/examples/image_search"
            >
              <p className="mb-8 mt-6 text-white">
                Deploy visual similarity search with efficient storage and
                real-time matching.
              </p>
            </ExampleCard>
          </div>
        </div>
        <div className="mt-12 text-center">
          <ActionLink href="https://github.com/pingcap/tidb-vector-python/tree/main/examples">
            More Examples
          </ActionLink>
        </div>
      </Container>
      <div className="bg-gradient-to-b from-black to-[#06111A] py-10 md:py-20">
        <Container>
          <h3 className="text-4xl font-bold leading-[30px] text-white md:text-[40px]">
            TiDB Vector Search in Action
          </h3>
          <SectionDescription className="mt-8 max-w-[700px]">
            TiDB.AI: an intelligent documentation assistant built with GraphRAG
            technology, powered by TiDB Vector Search.
          </SectionDescription>
          <div className="grid-col-1 mt-6 grid cursor-pointer grid-cols-1 gap-8 md:grid-cols-12 lg:gap-14">
            <div className="group relative col-span-6 flex items-center justify-center">
              <VideoModal
                videoUrl="https://www.youtube.com/embed/PsXcKA1UckU?si=crtlj2rkigDctTzE&autoplay=1"
                videoImage={videoImage}
              />
            </div>
            <div className="col-span-6 flex flex-col justify-between">
              <div>
                <div className="text-2xl font-bold text-white">
                  Key Features
                </div>
                <ul className="list-style text-carbon-500 ml-4 mt-3 list-outside list-disc text-base font-medium leading-[26px]">
                  <li>Contextual answers from TiDB documentation</li>
                  <li>Knowledge graph enhanced reasoning</li>
                  <li>Open-source implementation</li>
                </ul>
              </div>
              <div className="mt-4">
                {isScriptLoaded && (
                  <RippleActionLink
                    className="bg-white text-[17px] hover:text-white"
                    href="#"
                    scroll={false}
                    rippleClassName="bg-red-medium"
                    onClick={() => {
                      window.tidbai.open = true;
                    }}
                  >
                    Experience TiDB.AI
                  </RippleActionLink>
                )}

                <ActionLink
                  href="https://github.com/pingcap/autoflow"
                  className="mt-4"
                >
                  Build your own version using the open-source AutoFlow project
                </ActionLink>
              </div>
            </div>
          </div>
        </Container>
      </div>
    </section>
  );
}