"use client";
import { useEffect, useState, useTransition } from "react";
import { createPortal } from "react-dom";
import { useRouter } from "next/navigation";
import { X, Loader2 } from "lucide-react";
import { updateActressMeta } from "@/app/actions/actressMeta";

interface Props {
  actressId: number;
  initial: {
    name: string;
    altNames: string | null;
    notes: string | null;
    bornOn?: string | null;
    heightCm?: number | null;
    weightKg?: number | null;
    cupSize?: string | null;
  };
  onClose: () => void;
}

export function ActressMetaEditor({ actressId, initial, onClose }: Props) {
  const router = useRouter();
  const [name, setName] = useState(initial.name);
  const [altNames, setAltNames] = useState(initial.altNames ?? "");
  const [notes, setNotes] = useState(initial.notes ?? "");
  const [bornOn, setBornOn] = useState(initial.bornOn ?? "");
  const [height, setHeight] = useState(initial.heightCm != null ? String(initial.heightCm) : "");
  const [weight, setWeight] = useState(initial.weightKg != null ? String(initial.weightKg) : "");
  const [cup, setCup] = useState(initial.cupSize ?? "");
  const [busy, setBusy] = useState(false);
  const [, start] = useTransition();

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  async function save() {
    setBusy(true);
    try {
      const r = await updateActressMeta(actressId, {
        name,
        altNames,
        notes,
        bornOn: bornOn || null,
        heightCm: height ? Number(height) : null,
        weightKg: weight ? Number(weight) : null,
        cupSize: cup || null,
      });
      router.refresh();
      onClose();
      if (r && r.slug) router.push(`/actress/${r.slug}`);
    } finally {
      setBusy(false);
    }
  }

  if (typeof document === "undefined") return null;
  return createPortal(
    <div
      className="fixed inset-x-0 bottom-0 top-16 z-50 flex items-center justify-center px-4 py-4 fade-in overflow-y-auto"
      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="bg-[var(--color-bg-0)] border border-[var(--color-glass-border)] shadow-2xl rounded-2xl p-5 w-[min(820px,calc(100vw-32px))]">
        <div className="flex items-center justify-between mb-4">
          <div className="text-base font-medium">Edit Actress</div>
          <button onClick={onClose} className="text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]">
            <X className="w-5 h-5" />
          </button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-5 items-stretch">
          <div className="rounded-xl border border-[var(--color-glass-border)] bg-[var(--color-bg-1)]/30 p-4 flex flex-col gap-3">
            <SectionHeader>Identity</SectionHeader>
            <Field label="Name">
              <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                maxLength={80}
                className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
              />
            </Field>
            <Field label="Alt Names" hint="comma-separated · used for search (kanji, romaji, nicknames). Reversed name is added automatically.">
              <input
                value={altNames}
                onChange={(e) => setAltNames(e.target.value)}
                placeholder="松本いちか"
                className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
              />
            </Field>
            <div className="flex-1 flex flex-col">
              <div className="text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] mb-1">Notes</div>
              <textarea
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                className="flex-1 min-h-[140px] w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)] resize-none"
              />
            </div>
          </div>

          <div className="rounded-xl border border-[var(--color-glass-border)] bg-[var(--color-bg-1)]/30 p-4 flex flex-col gap-3">
            <SectionHeader>Personal</SectionHeader>
            <Field label="Born" hint="YYYY-MM-DD · age is computed from this">
              <input
                type="date"
                value={bornOn}
                onChange={(e) => setBornOn(e.target.value)}
                className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
              />
            </Field>

            <div className="pt-2"><SectionHeader>Body</SectionHeader></div>
            <div className="grid grid-cols-3 gap-2">
              <Field label="Height (cm)">
                <input
                  type="number"
                  inputMode="numeric"
                  value={height}
                  onChange={(e) => setHeight(e.target.value)}
                  className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
                />
              </Field>
              <Field label="Weight (kg)">
                <input
                  type="number"
                  inputMode="numeric"
                  value={weight}
                  onChange={(e) => setWeight(e.target.value)}
                  className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
                />
              </Field>
              <Field label="Cup Size">
                <input
                  value={cup}
                  onChange={(e) => setCup(e.target.value)}
                  placeholder="C"
                  maxLength={6}
                  className="w-full glass rounded-lg px-3 py-2 text-sm outline-none focus:border-[var(--color-cyan)]"
                />
              </Field>
            </div>
          </div>
        </div>

        <div className="flex items-center gap-2 mt-5 pt-4 border-t border-[var(--color-glass-border)]">
          <button
            onClick={onClose}
            className="flex-1 text-sm px-3 py-2 rounded-lg glass glass-hover"
          >
            Cancel
          </button>
          <button
            onClick={save}
            disabled={busy || !name.trim()}
            className="flex-1 flex items-center justify-center gap-1.5 text-sm px-3 py-2 rounded-lg bg-[var(--color-cyan)] text-black font-medium disabled:opacity-50"
          >
            {busy ? <Loader2 className="w-4 h-4 animate-spin" /> : null} Save
          </button>
        </div>
      </div>
    </div>,
    document.body,
  );
}

function SectionHeader({ children }: { children: React.ReactNode }) {
  return (
    <div className="text-[10px] uppercase tracking-wider font-mono text-[var(--color-cyan)]">{children}</div>
  );
}

function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
  return (
    <div>
      <div className="text-[10px] uppercase tracking-wider font-mono text-[var(--color-fg-muted)] mb-1">{label}</div>
      {children}
      {hint && <div className="text-[10px] text-[var(--color-fg-muted)] mt-1">{hint}</div>}
    </div>
  );
}