"use client";

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { useLocaleFunction } from "@/hooks/use-localed";
import { renderRemarkInline } from "@/lib/remark-inline";
import { cn } from "@/lib/utils";
import { SquareArrowOutUpRightIcon } from "lucide-react";

/** TiDB product mark (red hex + white facets), aligned with `site-logo.tsx`. */
function TiDbProductMark({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 101.11 116.75"
      className={className}
      aria-hidden
    >
      <polygon
        fill="#dc150b"
        points="50.55 0 0 29.19 0 87.56 50.55 116.75 101.11 87.56 101.11 29.19 50.55 0"
      />
      <polygon
        fill="#fff"
        points="33.7 87.56 33.7 48.65 16.85 58.38 16.85 38.92 50.55 19.46 67.41 29.19 50.55 38.92 50.55 97.29 33.7 87.56"
      />
      <polygon
        fill="#fff"
        points="67.41 87.56 67.41 48.65 84.26 38.92 84.26 77.83 67.41 87.56"
      />
    </svg>
  );
}

const DEMOS = [
  {
    href: "https://www.chainscopeapp.xyz/",
    image: "live-demos-chainscope-bg.svg",
    titleKey: "live-demos.carousel.chainscope.title" as const,
    descKey: "live-demos.carousel.chainscope.description" as const,
  },
  {
    href: "https://ossinsight.io/",
    image: "live-demos-ossinsight-bg.svg",
    titleKey: "live-demos.carousel.ossinsight.title" as const,
    descKey: "live-demos.carousel.ossinsight.description" as const,
  },
] as const;

function demoBackgroundUrl(filename: string) {
  const base = process.env.NEXT_PUBLIC_ASSET_PREFIX?.replace(/\/$/, "") ?? "";
  return base ? `${base}/${filename}` : `/${filename}`;
}

export function LiveDemosDemoCarousel() {
  const t = useLocaleFunction();

  return (
    <section className="w-full max-w-(--breakpoint-xl) mx-auto px-0 pt-2 md:pt-4 pb-2 space-y-6">
      <h1 className="text-3xl md:text-4xl lg:text-5xl font-semibold tracking-tight w-full text-center">
        <span className="inline-flex flex-wrap items-center justify-center gap-x-1.5">
          {renderRemarkInline(t("live-demos.carousel.heading"), true)}
        </span>
      </h1>
      <Carousel
        opts={{ align: "start", loop: true }}
        className="w-full relative"
      >
        <CarouselContent className="-ml-3 md:-ml-4">
          {DEMOS.map((demo) => {
            const bgUrl = demoBackgroundUrl(demo.image);
            return (
              <CarouselItem
                key={demo.href}
                className="pl-3 md:pl-4 basis-full md:basis-1/2"
              >
                <a
                  href={demo.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className={cn(
                    "group relative flex flex-col justify-end min-h-[220px] md:min-h-[260px] rounded-none border border-border/80 bg-card overflow-hidden",
                    "transition-[transform,border-color] duration-300 ease-out will-change-transform",
                    "hover:-translate-y-1.5 hover:border-white/25",
                    "active:translate-y-0",
                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                  )}
                  aria-label={`${t(demo.titleKey)} — ${t("live-demos.carousel.open-external")}`}
                >
                  <div
                    className="absolute inset-0 z-0 bg-cover bg-center transition-transform duration-500 ease-out motion-reduce:transition-none group-hover:scale-[1.06] motion-reduce:group-hover:scale-100"
                    style={{ backgroundImage: `url('${bgUrl}')` }}
                    aria-hidden
                  />
                  <div
                    className="absolute inset-0 z-[1] bg-linear-to-t from-black/85 via-black/40 to-transparent pointer-events-none"
                    aria-hidden
                  />
                  <div
                    className="absolute top-3 right-3 md:top-4 md:right-4 z-[3] flex items-center gap-1.5 rounded-md border border-white/20 bg-black/55 px-2 py-1 shadow-sm backdrop-blur-md pointer-events-none"
                    aria-hidden
                  >
                    <TiDbProductMark className="h-4 w-[14px] shrink-0" />
                    <span className="text-[10px] sm:text-[11px] font-semibold tracking-tight text-white leading-tight">
                      {t("live-demos.carousel.powered-by-tidb-htap")}
                    </span>
                  </div>
                  <div className="relative z-[2] p-5 md:p-6 flex flex-col gap-2 transition-transform duration-300 ease-out group-hover:-translate-y-0.5 motion-reduce:group-hover:translate-y-0">
                    <div className="flex items-start justify-between gap-3">
                      <h2 className="text-xl md:text-2xl font-bold text-white tracking-tight transition-colors duration-300 group-hover:text-white">
                        {t(demo.titleKey)}
                      </h2>
                      <SquareArrowOutUpRightIcon
                        className="size-5 shrink-0 text-white/80 group-hover:text-white transition-all duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 motion-reduce:group-hover:translate-x-0 motion-reduce:group-hover:translate-y-0"
                        aria-hidden
                      />
                    </div>
                    <p className="text-sm md:text-base text-white/85 group-hover:text-white/95 leading-relaxed max-w-prose transition-colors duration-300">
                      {t(demo.descKey)}
                    </p>
                  </div>
                </a>
              </CarouselItem>
            );
          })}
        </CarouselContent>
        <CarouselPrevious
          className={cn(
            "left-1 md:left-0 top-[calc(50%-1.25rem)] -translate-y-1/2 border-border bg-background/95 shadow-md",
            "disabled:opacity-0 disabled:pointer-events-none"
          )}
        />
        <CarouselNext
          className={cn(
            "right-1 md:right-0 top-[calc(50%-1.25rem)] -translate-y-1/2 border-border bg-background/95 shadow-md",
            "disabled:opacity-0 disabled:pointer-events-none"
          )}
        />
      </Carousel>
    </section>
  );
}