'use client';

import { useId, useState } from 'react';
import Image from 'next/image';
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
import { Eye, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogClose,
  DialogDescription,
  DialogOverlay,
  DialogPortal,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import type { GameView } from '@/game/engine';
import { DUKE_VIDAL_RULES } from '@/game/duke-vidal';
import { specialLeaderArt } from '@/game/special-leader-art';

/** Original Ecaz medallion; identity and strength have equivalent HTML text. */
function VidalDisc({ large = false }: { large?: boolean }) {
  const gradient = useId();
  return (
    <svg
      viewBox="0 0 160 160"
      className={large ? 'mx-auto my-6 size-48 max-w-full' : 'size-20 shrink-0'}
      aria-hidden="true"
      focusable="false"
    >
      <defs>
        <radialGradient id={gradient} cx="35%" cy="25%" r="80%">
          <stop offset="0" stopColor="#795577" />
          <stop offset="1" stopColor="#251b31" />
        </radialGradient>
      </defs>
      <circle cx="80" cy="83" r="74" fill="#100f15" />
      <circle
        cx="80"
        cy="79"
        r="73"
        fill={`url(#${gradient})`}
        stroke="#d6bc80"
        strokeWidth="2"
      />
      <circle
        cx="80"
        cy="79"
        r="65"
        fill="none"
        stroke="#c9b385"
        strokeOpacity="0.65"
      />
      <path
        d="M 80 18 L 86 27 L 80 36 L 74 27 Z M 32 79 Q 32 39 63 30 M 128 79 Q 128 39 97 30 M 32 91 Q 41 125 64 133 M 128 91 Q 119 125 96 133"
        fill="none"
        stroke="#ddc892"
        strokeWidth="2"
      />
      <path
        d="M 55 48 L 67 59 L 80 43 L 93 59 L 105 48 L 98 69 H 62 Z"
        fill="none"
        stroke="#f0dca7"
        strokeWidth="2"
      />
      <text
        x="80"
        y="121"
        textAnchor="middle"
        fill="#fff1c9"
        fontFamily="Georgia, serif"
        fontSize="56"
      >
        6
      </text>
    </svg>
  );
}

/** Uses only the shared disc identity supplied by the public projection. */
function VidalPortrait({
  id,
  name,
  large = false,
}: {
  id?: string;
  name: string;
  large?: boolean;
}) {
  const [failedSource, setFailedSource] = useState<string | null>(null);
  const art = specialLeaderArt(id, name);
  if (!art || failedSource === art.src) return <VidalDisc large={large} />;
  return (
    <span
      className={`relative block shrink-0 ${large ? 'mx-auto my-6 size-48 max-w-full' : 'size-20'}`}
    >
      <span className="absolute inset-0 overflow-hidden rounded-full border-2 border-[#d6bc80] bg-[#251b31]">
        <Image
          src={art.src}
          alt=""
          width={1254}
          height={1254}
          sizes={large ? '192px' : '80px'}
          loading="lazy"
          decoding="async"
          onError={() => setFailedSource(art.src)}
          className="h-full w-full object-cover"
          style={{ objectPosition: art.objectPosition }}
        />
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-1 rounded-full border border-[#e6ce99]/40"
        />
      </span>
    </span>
  );
}

/** Read-only shared component. Custody comes exclusively from the public projection. */
export function DukeVidal({ game }: { game: GameView }) {
  const duke = game.dukeVidal;
  if (!duke) return null;
  const controller = duke.controller
    ? game.players.find((player) => player.id === duke.controller)
    : undefined;
  const status = duke.leader.dead
    ? 'In the Tanks'
    : duke.controller
      ? `Controlled by ${controller?.name ?? 'another player'}`
      : 'Set aside';
  return (
    <section
      aria-label="Duke Prad Vidal shared leader"
      className="min-w-0 rounded-xl border border-[#75617a] bg-[#241f29] p-4 text-[#eee7de]"
    >
      <div className="flex flex-wrap items-center gap-4">
        <VidalPortrait id={duke.leader.id} name={duke.leader.name} />
        <div className="min-w-0 flex-1 basis-40">
          <p className="m-0 text-xs font-semibold tracking-[0.16em] text-[#d5b888] uppercase">
            Ecaz · shared leader · strength 6
          </p>
          <h3 className="mt-1 mb-2 break-words font-serif text-xl text-[#fff0d4]">
            Duke Prad Vidal
          </h3>
          <p className="m-0 break-words text-sm">{status}</p>
          <p className="mt-1 mb-0 text-sm text-[#cbbbcc]">No Traitor Card</p>
        </div>
        <Dialog>
          <DialogTrigger
            render={
              <Button
                variant="outline"
                className="min-h-11 min-w-11 motion-reduce:transition-none"
              />
            }
            aria-label="Inspect Duke Prad Vidal"
          >
            <Eye aria-hidden="true" /> Inspect Duke
          </DialogTrigger>
          <DialogPortal>
            <DialogOverlay className="bg-black/75 motion-reduce:animate-none motion-reduce:transition-none" />
            <DialogPrimitive.Popup className="fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-1rem)] w-[calc(100%-1rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-[#9c815c] bg-[#19161d] text-[#eee7de] shadow-2xl outline-none motion-reduce:animate-none motion-reduce:transition-none">
              <div className="flex shrink-0 items-center justify-between gap-3 border-b border-[#4c3b51] px-4 py-3">
                <span className="text-xs font-semibold tracking-[0.16em] text-[#dec18b] uppercase">
                  Shared leader inspection
                </span>
                <DialogClose
                  render={
                    <Button
                      variant="outline"
                      className="min-h-11 min-w-11 motion-reduce:transition-none"
                    />
                  }
                >
                  <X aria-hidden="true" /> Close
                </DialogClose>
              </div>
              <div className="min-h-0 overflow-y-auto overscroll-contain p-4 sm:p-6">
                <div className="grid items-start gap-6 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
                  <article className="min-w-0 rounded-xl border border-[#a08967] bg-gradient-to-br from-[#4a334e] to-[#221d28] p-5">
                    <p className="m-0 text-sm tracking-wider text-[#e5cea6] uppercase">
                      House Ecaz
                    </p>
                    <VidalPortrait
                      id={duke.leader.id}
                      name={duke.leader.name}
                      large
                    />
                    <DialogTitle className="break-words font-serif text-3xl leading-tight text-[#fff1d5]">
                      {DUKE_VIDAL_RULES.name}
                    </DialogTitle>
                    <dl className="my-5 space-y-3 border-y border-[#a08967]/50 py-4">
                      <div>
                        <dt className="text-sm text-[#d6c2cc]">
                          Leader strength
                        </dt>
                        <dd className="m-0 font-serif text-4xl">6</dd>
                      </div>
                      <div>
                        <dt className="text-sm text-[#d6c2cc]">
                          Current state
                        </dt>
                        <dd className="m-0 break-words text-base">{status}</dd>
                      </div>
                    </dl>
                    <p className="mb-0 text-sm leading-6">
                      One shared disc. No Traitor Card.
                    </p>
                  </article>
                  <div className="min-w-0 space-y-5">
                    <DialogDescription className="m-0 text-base leading-7 text-[#ece0ce]">
                      {DUKE_VIDAL_RULES.summary}
                    </DialogDescription>
                    {DUKE_VIDAL_RULES.gameplay.map((paragraph) => (
                      <p
                        key={paragraph}
                        className="m-0 text-base leading-7 text-[#ddd4df]"
                      >
                        {paragraph}
                      </p>
                    ))}
                    <p className="m-0 rounded-lg border border-[#675071] bg-[#2c2232] p-4 text-sm leading-6 text-[#e5d3df]">
                      Current support covers Moritani acquisition, direct Ecaz
                      Ambassador acquisition for Ecaz, battle use and death.
                      Unused Ecaz custody survives the turn; unused Moritani
                      custody expires. Ecaz alliance and loan alternatives,
                      reacquisition while already controlled, revival, and
                      captured or ghola custody remain unfinished. Full Ecaz and
                      Moritani games are unavailable. Inspection does not select
                      a battle leader.
                    </p>
                  </div>
                </div>
              </div>
            </DialogPrimitive.Popup>
          </DialogPortal>
        </Dialog>
      </div>
    </section>
  );
}