"use client";

import Link from "next/link";
import { useState, useTransition } from "react";
import { deletePerson, regenerateShareToken } from "@/app/actions";
import type { Item } from "@/db/schema";
import { PersonCard } from "./PersonCard";
import { Wordmark } from "./Wordmark";

type Props = {
  id: string;
  name: string;
  notes: string;
  items: Item[];
  shareToken: string;
  updatedBy: "casa" | "amico";
  updatedAt: number;
  startEditing: boolean;
};

const fmtDate = (ms: number) => new Date(ms).toLocaleDateString("it-IT", { day: "numeric", month: "long" });

// Scheda vista da casa: lettura veloce, con "Modifica" per cambiare
export function PersonScreen({ id, name, notes, items, shareToken, updatedBy, updatedAt, startEditing }: Props) {
  const [editing, setEditing] = useState(startEditing);
  return (
    <div className="flex min-h-dvh flex-col">
      <header className="gingham safe-top rounded-b-[28px] shadow-[0_6px_20px_-12px_rgba(28,42,82,0.6)]">
        <div className="mx-auto max-w-2xl px-5 pb-6">
        <div className="flex items-center justify-between pt-4">
          <Link href="/" className="-ml-2 rounded-field px-2 py-2 text-[15px] font-bold">
            ‹ Amici
          </Link>
          <button
            type="button"
            onClick={() => setEditing((e) => !e)}
            className={`h-10 rounded-field px-4 text-sm font-extrabold shadow-[0_3px_0_rgba(28,42,82,0.3)] ${editing ? "bg-hi text-hi-ink" : "bg-white/95 text-[#1c2a52]"}`}
          >
            {editing ? "Fatto" : "Modifica"}
          </button>
        </div>
        <h1 className="mt-2 font-display text-[38px] leading-[1.1] [text-shadow:0_2px_0_rgba(28,42,82,0.35)]">{name}</h1>
        {updatedBy === "amico" && <p className="mt-1 text-sm font-semibold opacity-90">Aggiornata dal link il {fmtDate(updatedAt)}</p>}
        </div>
      </header>

      <main className="mx-auto flex w-full max-w-2xl flex-col gap-4 px-3 pt-4 pb-10">
        <PersonCard personRef={{ personId: id }} name={name} notes={notes} items={items} mode="casa" editing={editing} />
        <ShareBox personId={id} name={name} token={shareToken} />
        {editing && <DeleteBox personId={id} name={name} />}
      </main>
    </div>
  );
}

function ShareBox({ personId, name, token: initialToken }: { personId: string; name: string; token: string }) {
  const [token, setToken] = useState(initialToken);
  const [copied, setCopied] = useState(false);
  const [confirm, setConfirm] = useState(false);
  const [pending, start] = useTransition();
  const url = typeof window === "undefined" ? `/p/${token}` : `${window.location.origin}/p/${token}`;
  const first = name.split(" ")[0];

  async function share() {
    const text = `Ciao ${first}! Ti mando questo link: ci scrivi cosa non mangi e cosa ti piace, così quando vieni a cena andiamo sul sicuro. Non serve registrarsi.`;
    if (navigator.share) {
      try {
        await navigator.share({ title: "AmiCibi", text, url });
        return;
      } catch (e) {
        if ((e as Error).name === "AbortError") return;
      }
    }
    await copy();
  }

  async function copy() {
    try {
      await navigator.clipboard.writeText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      window.prompt("Copia il link", url);
    }
  }

  return (
    <section className="flex flex-col gap-3 rounded-card bg-surface p-4">
      <div>
        <h2 className="text-[13px] font-extrabold tracking-wider text-ink uppercase">Link per {first}</h2>
        <p className="mt-1 text-sm text-muted">
          Chi ha questo link può vedere e modificare solo questa scheda, senza registrarsi. Non dà accesso al resto.
        </p>
      </div>
      <div className="flex gap-2">
        <button type="button" onClick={share} className="flex-1 rounded-field bg-accent py-3.5 text-base font-extrabold text-accent-ink">
          Condividi la scheda
        </button>
        <button type="button" onClick={copy} className="rounded-field px-4 text-sm font-bold ring-2 ring-line">
          {copied ? "Copiato!" : "Copia"}
        </button>
      </div>
      {confirm ? (
        <div className="flex flex-wrap items-center gap-2 rounded-field bg-int-soft p-3 text-sm text-int-ink">
          <span className="flex-1">Il link vecchio smetterà di funzionare. Continuo?</span>
          <button
            type="button"
            disabled={pending}
            onClick={() =>
              start(async () => {
                setToken(await regenerateShareToken(personId));
                setConfirm(false);
              })
            }
            className="rounded-field bg-int px-3 py-1.5 font-bold text-white"
          >
            {pending ? "…" : "Sì, crea nuovo link"}
          </button>
          <button type="button" onClick={() => setConfirm(false)} className="px-2 py-1.5 font-semibold">
            Annulla
          </button>
        </div>
      ) : (
        <button type="button" onClick={() => setConfirm(true)} className="self-start text-sm text-muted underline">
          Crea un nuovo link (disattiva il vecchio)
        </button>
      )}
    </section>
  );
}

function DeleteBox({ personId, name }: { personId: string; name: string }) {
  const [confirm, setConfirm] = useState(false);
  const [pending, start] = useTransition();
  return (
    <section className="flex flex-col gap-2 px-1 pt-2">
      {confirm ? (
        <div className="flex flex-wrap items-center gap-2 rounded-card bg-all-soft p-4 text-sm text-all-ink">
          <span className="flex-1 font-semibold">Eliminare {name} e tutte le sue preferenze?</span>
          <button
            type="button"
            disabled={pending}
            onClick={() => start(() => deletePerson(personId))}
            className="rounded-field bg-all px-4 py-2 font-bold text-white"
          >
            {pending ? "…" : "Elimina"}
          </button>
          <button type="button" onClick={() => setConfirm(false)} className="px-2 py-2 font-semibold">
            Annulla
          </button>
        </div>
      ) : (
        <button type="button" onClick={() => setConfirm(true)} className="self-start text-sm font-semibold text-all">
          Elimina questa persona
        </button>
      )}
    </section>
  );
}

// Pagina che apre l'amico dal suo link: sempre in modifica, nessun accesso al resto
export function FriendScreen({ token, name, notes, items }: { token: string; name: string; notes: string; items: Item[] }) {
  const first = name.split(" ")[0];
  return (
    <div className="flex min-h-dvh flex-col">
      <header className="gingham safe-top rounded-b-[28px] shadow-[0_6px_20px_-12px_rgba(28,42,82,0.6)]">
        <div className="mx-auto max-w-2xl px-5 pb-6">
        <div className="pt-5">
          <Wordmark className="text-2xl [text-shadow:0_2px_0_rgba(28,42,82,0.35)]" />
        </div>
        <h1 className="mt-4 font-display text-[34px] leading-[1.1] [text-shadow:0_2px_0_rgba(28,42,82,0.35)]">Ciao {first}!</h1>
        <p className="mt-2 max-w-md text-[16px] leading-snug font-semibold">
          Scrivi qui cosa non puoi mangiare, cosa non ti piace e i piatti che ami. Si salva tutto da solo.
        </p>
        </div>
      </header>
      <main className="mx-auto flex w-full max-w-2xl flex-col gap-4 px-3 pt-4 pb-12">
        <PersonCard personRef={{ token }} name={name} notes={notes} items={items} mode="amico" editing />
        <p className="px-2 pt-2 text-center text-sm text-muted">Grazie! Quando hai finito puoi chiudere la pagina.</p>
      </main>
    </div>
  );
}