import Image from "next/image";
import { FileText, Lock, MapPin, Shield } from "@/components/ui/icons";
import { TYPE_ICONS, TYPE_LABELS, type Realisation } from "@/lib/realisations";

type Size = "card" | "hero";

export function RealisationMockup({ r, size = "card" }: { r: Realisation; size?: Size }) {
  if (r.desktopScreenshot) {
    return <LaptopMockup r={r} size={size} />;
  }
  return (
    <BrowserFrame domain={r.domain} size={size}>
      <MockupBody r={r} size={size} />
    </BrowserFrame>
  );
}

function LaptopMockup({ r, size }: { r: Realisation; size: Size }) {
  const isHero = size === "hero";
  return (
    <div
      className={`relative w-full ${isHero ? "py-6 md:py-10" : "py-4 md:py-5"}`}
      style={{ perspective: "2200px" }}
    >
      {/* Laptop, very lightly tilted */}
      <div
        className="relative mx-auto w-[94%]"
        style={{
          transform: "rotateY(-9deg) rotateX(2deg)",
          transformStyle: "preserve-3d",
          transformOrigin: "center center",
        }}
      >
        {/* Screen frame */}
        <div className="relative rounded-t-[12px] md:rounded-t-[16px] bg-stone-900 border border-stone-700/70 border-b-0 p-1.5 md:p-2 shadow-[0_60px_120px_-30px_rgba(0,0,0,0.7),0_0_0_1px_rgba(255,255,255,0.04)_inset]">
          {/* webcam */}
          <div className="absolute top-1.5 left-1/2 -translate-x-1/2 size-[3px] md:size-1 rounded-full bg-stone-700" />
          {/* Screen content */}
          <div className="relative aspect-[16/10] w-full rounded-md md:rounded-lg overflow-hidden bg-surface">
            <Image
              src={r.desktopScreenshot!}
              alt={`${r.name} · capture desktop`}
              fill
              sizes={isHero ? "(min-width: 1280px) 1100px, 100vw" : "(min-width: 1024px) 50vw, 100vw"}
              className="object-cover object-top"
              priority={isHero}
            />
            <div className="absolute inset-0 bg-gradient-to-tr from-white/[0.04] via-transparent to-white/[0.06] pointer-events-none" />
          </div>
        </div>

        {/* Hinge */}
        <div
          className="relative mx-auto h-[3px] md:h-[4px] bg-gradient-to-b from-stone-700 to-stone-900"
          style={{ width: "100%", clipPath: "polygon(0.8% 0, 99.2% 0, 100% 100%, 0 100%)" }}
        />

        {/* Base */}
        <div
          className="relative h-[10px] md:h-[14px] bg-gradient-to-b from-stone-800 via-stone-900 to-stone-950 rounded-b-[12px] md:rounded-b-[16px]"
          style={{ clipPath: "polygon(0 0, 100% 0, 97% 100%, 3% 100%)" }}
        >
          {/* Trackpad notch */}
          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[18%] h-[2px] bg-stone-950 rounded-b-md" />
        </div>

        {/* Floor shadow */}
        <div
          className="absolute left-[8%] right-[8%] -bottom-4 md:-bottom-5 h-5 md:h-7 bg-stone-900/25 blur-2xl rounded-full pointer-events-none"
          style={{ transform: "translateZ(-100px)" }}
        />
      </div>

      {/* Mobile phone overlay, tilted opposite for visual balance */}
      {r.mobileScreenshot && (
        <div
          className={`absolute ${
            isHero
              ? "right-2 md:right-6 bottom-2 md:bottom-6 w-[110px] md:w-[170px]"
              : "right-1.5 bottom-1.5 w-[68px] md:w-[96px]"
          }`}
          style={{ perspective: "1500px" }}
        >
          <div style={{ transform: "rotate(5deg)" }}>
            <PhoneShell>
              <Image
                src={r.mobileScreenshot!}
                alt={`${r.name} · capture mobile`}
                fill
                sizes="170px"
                className="object-cover object-top"
              />
            </PhoneShell>
          </div>
        </div>
      )}
    </div>
  );
}

function PhoneShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative aspect-[9/19.5] rounded-[1.4rem] border border-stone-700/80 bg-stone-950 p-[3px] shadow-[0_20px_40px_-12px_rgba(0,0,0,0.6),0_0_0_1px_rgba(255,255,255,0.04)_inset]">
      <div className="absolute top-1.5 left-1/2 -translate-x-1/2 w-10 h-2.5 bg-stone-950 rounded-b-xl z-10 border-x border-b border-stone-800/80" />
      <div className="relative size-full rounded-[1.15rem] overflow-hidden bg-surface">
        {children}
      </div>
    </div>
  );
}

function BrowserFrame({
  domain,
  children,
  size,
}: {
  domain: string;
  children: React.ReactNode;
  size: Size;
}) {
  const isHero = size === "hero";
  return (
    <div
      className={`relative w-full overflow-hidden rounded-xl border border-border bg-surface ${
        isHero
          ? "shadow-[0_40px_80px_-20px_rgba(28,25,23,0.18),0_0_0_1px_rgba(28,25,23,0.03)_inset]"
          : "shadow-[0_24px_48px_-16px_rgba(28,25,23,0.14)]"
      }`}
    >
      <div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-surface-2">
        <div className="flex items-center gap-1.5">
          <span className="size-2.5 rounded-full bg-stone-300" />
          <span className="size-2.5 rounded-full bg-stone-300" />
          <span className="size-2.5 rounded-full bg-stone-300" />
        </div>
        <div className="ml-2 flex-1 max-w-[420px] flex items-center gap-1.5 px-2 py-1 rounded-md bg-surface border border-border">
          <Lock className="size-2.5 text-success/70" />
          <span className="text-micro md:text-xxs text-text-dim font-mono truncate">{domain}</span>
        </div>
      </div>

      <div
        className={`relative ${
          isHero ? "min-h-[420px] md:min-h-[480px]" : "min-h-[280px]"
        } bg-gradient-to-b from-surface to-surface-2 overflow-hidden`}
      >
        {children}
      </div>
    </div>
  );
}

function MockupBody({ r, size }: { r: Realisation; size: Size }) {
  switch (r.slug) {
    case "mon-kit-electrique":
      return <MonKitMockup size={size} />;
    case "pakkt":
      return <PakktMockup size={size} />;
    case "fileshrink":
      return <FileshrinkMockup size={size} />;
    default:
      return <GenericMockup r={r} size={size} />;
  }
}

function MonKitMockup({ size }: { size: Size }) {
  const isHero = size === "hero";
  return (
    <div className={`relative ${isHero ? "p-10 md:p-14" : "p-6 md:p-7"}`}>
      <div className="flex items-center justify-between mb-6">
        <span className="font-editorial text-sm md:text-base font-medium text-text italic">
          Mon Kit Électrique
        </span>
        <div className="hidden md:flex items-center gap-3 text-micro text-text-muted">
          <span>Le kit</span>
          <span>Devenir partenaire</span>
          <span>Trouver un atelier</span>
        </div>
      </div>

      <div
        className={`${
          isHero ? "text-micro md:text-xs" : "text-[9px]"
        } uppercase tracking-[0.18em] text-text-faint`}
      >
        Conversion vélo électrique · Réseau d'ateliers
      </div>
      <h3
        className={`font-editorial mt-3 ${
          isHero ? "text-3xl md:text-5xl" : "text-xl md:text-2xl"
        } font-medium text-text leading-[1.05]`}
      >
        Votre vélo,
        <br />
        vraiment électrifié.
      </h3>
      <p
        className={`mt-3 ${
          isHero ? "text-sm md:text-base" : "text-xxs"
        } text-text-muted max-w-md`}
      >
        Un kit pro, installé près de chez vous par un atelier partenaire.
      </p>

      <div className={`mt-6 flex items-center gap-2 ${isHero ? "max-w-md" : "max-w-xs"}`}>
        <div className="flex-1 flex items-center gap-2 px-3 py-2 rounded-md border border-border bg-stone-900/[0.03]">
          <MapPin className="size-3 text-accent" />
          <span className="text-xxs text-text-muted">Trouver un atelier...</span>
        </div>
        <div className="px-3 py-2 rounded-md bg-accent text-accent-fg text-xxs font-semibold">
          Rechercher
        </div>
      </div>

      <div className="mt-6 grid grid-cols-3 gap-2 md:gap-3">
        <Stat val="750+" label="modèles vélos" />
        <Stat val="Réseau" label="ateliers partenaires" />
        <Stat val="Pro" label="installation" />
      </div>
    </div>
  );
}

function PakktMockup({ size }: { size: Size }) {
  const isHero = size === "hero";
  return (
    <div className={`relative ${isHero ? "p-10 md:p-14" : "p-6 md:p-7"}`}>
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-2">
          <Shield className="size-4 text-accent" strokeWidth={1.8} />
          <span className="font-editorial text-sm md:text-base font-medium text-text">PAKKT</span>
        </div>
        <LiveBadge>Protection active</LiveBadge>
      </div>

      <div
        className={`${
          isHero ? "text-micro md:text-xs" : "text-[9px]"
        } uppercase tracking-[0.18em] text-text-faint`}
      >
        Protection kernel · Anti-DDoS
      </div>
      <h3
        className={`font-editorial mt-3 ${
          isHero ? "text-3xl md:text-5xl" : "text-xl md:text-2xl"
        } font-medium text-text leading-[1.05]`}
      >
        Une commande,
        <br />
        votre serveur protégé.
      </h3>

      <div
        className={`mt-6 rounded-md border border-border bg-stone-900 px-3 py-2.5 font-mono ${
          isHero ? "text-[12px]" : "text-micro md:text-xxs"
        }`}
      >
        <span className="text-success">$</span>{" "}
        <span className="text-stone-300">curl -fsSL pakkt.io/install | sh</span>
      </div>

      <div className="mt-6 grid grid-cols-3 gap-2 md:gap-3">
        <Stat val="77" label="templates prêts" />
        <Stat val="XDP" label="filtrage kernel" />
        <Stat val="France" label="hébergement" />
      </div>
    </div>
  );
}

function FileshrinkMockup({ size }: { size: Size }) {
  const isHero = size === "hero";
  return (
    <div className={`relative ${isHero ? "p-10 md:p-14" : "p-6 md:p-7"}`}>
      <div className="flex items-center justify-between mb-6">
        <span className="font-editorial text-sm md:text-base font-medium text-text">FileShrink</span>
        <span className="text-micro uppercase tracking-wider text-text-faint">FR · EN</span>
      </div>

      <div
        className={`${
          isHero ? "text-micro md:text-xs" : "text-[9px]"
        } uppercase tracking-[0.18em] text-text-faint`}
      >
        Conversion · Compression
      </div>
      <h3
        className={`font-editorial mt-3 ${
          isHero ? "text-3xl md:text-5xl" : "text-xl md:text-2xl"
        } font-medium text-text leading-[1.05]`}
      >
        Vos fichiers,
        <br />
        restent chez vous.
      </h3>

      <div
        className={`mt-6 rounded-xl border border-dashed border-border bg-stone-900/[0.02] ${
          isHero ? "p-6 md:p-8" : "p-4"
        } text-center`}
      >
        <div className="flex flex-col items-center gap-1.5 text-text-muted">
          <FileText className="size-5 text-text-dim" strokeWidth={1.5} />
          <span className="text-xxs md:text-xs">Glisser un fichier ici, ou parcourir</span>
          <span className="text-[9px] md:text-micro text-text-faint">
            PNG · JPG · WEBP · PDF · DOCX...
          </span>
        </div>
      </div>

      <div className="mt-5 grid grid-cols-3 gap-2 md:gap-3">
        <Stat val="Aucun" label="upload serveur" />
        <Stat val="Wasm" label="dans le navigateur" />
        <Stat val="Gratuit" label="sans inscription" />
      </div>
    </div>
  );
}

function GenericMockup({ r, size }: { r: Realisation; size: Size }) {
  const isHero = size === "hero";
  const Icon = TYPE_ICONS[r.type];
  return (
    <div className={`relative ${isHero ? "p-10 md:p-14" : "p-6 md:p-7"}`}>
      <div className="flex items-center gap-2">
        <Icon className="size-4 text-accent" strokeWidth={1.8} />
        <span className="text-micro uppercase tracking-[0.18em] text-text-faint">
          {TYPE_LABELS[r.type]} · {r.sector}
        </span>
      </div>
      <h3
        className={`font-editorial mt-4 ${
          isHero ? "text-4xl md:text-6xl" : "text-2xl md:text-3xl"
        } font-medium text-text leading-[1.05]`}
      >
        {r.name}
      </h3>
      <p
        className={`mt-3 ${isHero ? "text-base md:text-lg" : "text-sm"} text-text-muted italic max-w-xl`}
      >
        {r.tagline}
      </p>
      <div className="mt-6 flex flex-wrap gap-2">
        {r.highlights.slice(0, 3).map((h) => (
          <span
            key={h.label}
            className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-border bg-stone-900/[0.03] text-micro"
          >
            <span className="text-text-faint">{h.label}</span>
            <span className="text-text">{h.value}</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function Stat({ val, label }: { val: string; label: string }) {
  return (
    <div className="px-2.5 md:px-3 py-2 rounded-md border border-border bg-stone-900/[0.03]">
      <div className="font-editorial text-sm md:text-base font-medium text-text leading-tight tabular-nums">
        {val}
      </div>
      <div className="text-[8px] md:text-micro text-text-faint uppercase tracking-wider mt-0.5 leading-tight">
        {label}
      </div>
    </div>
  );
}

function LiveBadge({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full border border-success/30 bg-success/10 text-success text-[9px] uppercase tracking-wider font-semibold">
      <span className="size-1 rounded-full bg-success animate-pulse" />
      {children}
    </span>
  );
}