import { useMemo, useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { Cake, ChevronDown, Crown, Trophy } from "lucide-react";
import { cn } from "@/lib/utils";
import { PageHeader, StatTile } from "@/components/crapp/ui-bits";
import { BarraSottosezioni } from "@/components/crapp/BarraSottosezioni";
import { Avatar } from "@/components/crapp/Avatar";
import { formatData, inizialiDa } from "@/lib/crapp-data";
import { microcopyObiettivo, progressoObiettivo } from "@/lib/obiettivi";
import {
  useRosa,
  useObiettivi,
  classificaRank,
  dettaglioClassifica,
  type CriterioClassifica,
} from "@/lib/rosa";
import { usePresenzeUltimoMeseTutti } from "@/lib/presenze-mese";
import {
  isAllenatore,
  nomeCompleto,
  ruoloVisibile,
  useGiocatoriSquadra,
} from "@/lib/giocatori-squadra";
import { useSonoAllenatore } from "@/lib/user-store";
import { totaliSquadra, useScoutMatches } from "@/lib/scout-store";
import { useCsi } from "@/lib/csi";
import { partiteGiocate } from "@/lib/csi-core";
import { mediaSquadra, usePagelle } from "@/lib/pagelle";
import { Reveal } from "@/components/motion/Reveal";
import { Barra } from "@/components/motion/Barra";
import { Numero } from "@/components/motion/Numero";
import { BadgeDrawer } from "@/components/crapp/BadgeDrawer";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import {
  badgeDefs,
  badgeGiocatore,
  badgeSegretiSbloccati,
  descrizioneSoglie,
  gradiOrdine,
  gradoMeta,
  gradoRaggiunto,
  collezioneBadge,
} from "@/lib/badges";

function RuoloBadge({ ruolo }: { ruolo: string }) {
  return (
    <span className="inline-flex items-center rounded-full bg-accent px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-accent-foreground">
      {ruolo}
    </span>
  );
}

export const Route = createFileRoute("/squadra")({
  head: () => ({
    meta: [
      { title: "Squadra CRAP Volley — CrAPP" },
      {
        name: "description",
        content:
          "Rosa completa del CRAP Volley: giocatori, dati anagrafici, statistiche stagionali e badge sbloccati.",
      },
      { property: "og:title", content: "Squadra CRAP Volley — CrAPP" },
      {
        property: "og:description",
        content: "Tutti i giocatori della rosa con dati, statistiche e obiettivi raggiunti.",
      },
    ],
  }),
  component: Squadra,
});

const criteri = [
  { id: "presenze", label: "Presenze" },
  { id: "mediaVoto", label: "Media voto" },
  { id: "mvp", label: "MVP" },
  { id: "palloni", label: "Palloni" },
  { id: "cacchePartita", label: "Cacche" },
] as const;

type Criterio = CriterioClassifica;

function valore(
  g: { presenze: number; mediaVoto: number; mvp: number; palloni: number; cacchePartita: number },
  c: Criterio,
) {
  return g[c] ?? 0;
}

function Squadra() {
  const rosa = useRosa();
  // Gli allenatori stanno in Rosa con i giocatori, senza numero né statistiche (DD-034).
  const { righe: squadra } = useGiocatoriSquadra();
  const allenatori = useMemo(() => squadra.filter((g) => g.attivo && isAllenatore(g)), [squadra]);
  // Chi allena non vede badge, cacche né obiettivi (DD-034).
  const sonoAllenatore = useSonoAllenatore();
  const criteriVisibili = sonoAllenatore
    ? criteri.filter((c) => c.id !== "cacchePartita")
    : criteri;
  const mese = usePresenzeUltimoMeseTutti();
  const scoutMatches = useScoutMatches();
  const { voti: pagelle } = usePagelle();
  const [aperto, setAperto] = useState<string | null>(null);
  const [criterio, setCriterio] = useState<Criterio>("presenze");
  const [filtroAperto, setFiltroAperto] = useState(false);
  const obiettivi = useObiettivi();
  const team = totaliSquadra(scoutMatches);
  const mediaPresenze = rosa.length
    ? Math.round(
        (rosa.reduce((s, g) => s + g.presenze / (g.totaliEventi || 1), 0) / rosa.length) * 100,
      )
    : 0;
  const ordinati = [...rosa].sort((a, b) => valore(b, criterio) - valore(a, criterio));
  const rank = classificaRank(ordinati.map((g) => valore(g, criterio)));
  const max = ordinati[0] ? valore(ordinati[0], criterio) || 1 : 1;
  const { data: csi } = useCsi();
  const matchGiocati = csi ? partiteGiocate(csi.partite).length : scoutMatches.length;
  const completati = obiettivi.filter((o) => progressoObiettivo(o) >= 100).length;
  const mediaObiettivi = obiettivi.length
    ? Math.round(obiettivi.reduce((s, o) => s + progressoObiettivo(o), 0) / obiettivi.length)
    : 0;

  // Ogni tab è memoizzata: aprire/chiudere una card giocatore (stato `aperto`)
  // non deve ricalcolare badge e obiettivi delle altre sezioni.
  const contenutoRosa = useMemo(
    () => (
      <div className="space-y-2">
        {allenatori.map((a) => (
          <article
            key={a.id}
            className="flex min-h-11 items-center gap-3 rounded-3xl bg-card p-3 shadow-card"
          >
            <Avatar
              id={a.id}
              fallback={inizialiDa(nomeCompleto(a))}
              className="h-11 w-11 text-lg"
            />
            <span className="min-w-0 flex-1">
              <span className="block truncate text-sm font-bold leading-tight">
                {nomeCompleto(a)}
              </span>
              <span className="mt-1 flex items-center gap-2">
                <RuoloBadge ruolo={ruoloVisibile(a)} />
                {a.nascita ? (
                  <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
                    <Cake className="h-3.5 w-3.5" /> {formatData(a.nascita)}
                  </span>
                ) : null}
              </span>
            </span>
          </article>
        ))}
        {rosa.map((g) => {
          const stati = badgeGiocatore(g);
          const sbloccati = sonoAllenatore
            ? []
            : [...stati.filter((b) => b.grado !== null), ...badgeSegretiSbloccati(g)];
          const isOpen = aperto === g.id;
          return (
            <article key={g.id} className="overflow-hidden rounded-3xl bg-card shadow-card">
              <button
                type="button"
                onClick={() => setAperto(isOpen ? null : g.id)}
                className="flex min-h-11 w-full items-center gap-3 p-3 text-left active:scale-[0.99]"
                aria-expanded={isOpen}
              >
                <Avatar
                  id={g.id}
                  fallback={g.numero ? String(g.numero) : g.iniziali}
                  className="h-11 w-11 text-lg"
                />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-sm font-bold leading-tight">{g.nome}</span>
                  <span className="mt-1 flex items-center gap-2">
                    <RuoloBadge ruolo={g.ruolo} />
                    <span className="text-xs text-muted-foreground">
                      {g.numero ? `#${g.numero}` : "n° da definire"}
                    </span>
                  </span>
                </span>
                {sbloccati.length > 0 ? (
                  <span className="flex max-w-[74px] shrink-0 flex-wrap items-center justify-end gap-0.5">
                    {sbloccati.map((b) => {
                      const Icon = b.def.icon;
                      return (
                        <span key={b.def.id} title={`${b.def.nome} — ${gradoMeta[b.grado!].label}`}>
                          <Icon
                            className={cn("h-3.5 w-3.5", gradoMeta[b.grado!].text)}
                            aria-hidden="true"
                          />
                          <span className="sr-only">
                            {b.def.nome}: {gradoMeta[b.grado!].label}
                          </span>
                        </span>
                      );
                    })}
                  </span>
                ) : null}
                <ChevronDown
                  className={cn(
                    "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
                    isOpen && "rotate-180",
                  )}
                />
              </button>

              {isOpen ? (
                <div className="border-t border-border px-4 pb-4 pt-3">
                  {g.nascita ? (
                    <div className="flex flex-wrap items-center gap-2">
                      <p className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
                        <Cake className="h-3.5 w-3.5" /> {formatData(g.nascita)}{" "}
                        {g.nascita.slice(0, 4)}
                      </p>
                    </div>
                  ) : null}

                  <div className="mt-3 grid grid-cols-3 gap-2">
                    {[
                      { l: "Presenze", v: `${g.presenze}/${g.totaliEventi}` },
                      { l: "Presenze 30gg", v: `${mese[g.id]?.percentuale ?? 0}%` },
                      { l: "Presenze di fila", v: g.streak },
                      { l: "Media voto", v: g.mediaVoto || "—" },
                      { l: "MVP", v: g.mvp },
                      ...(sonoAllenatore
                        ? []
                        : [{ l: "Cacche/partita 💩", v: g.cacchePartita || "—" }]),
                    ].map((s) => (
                      <div key={s.l} className="rounded-2xl bg-secondary p-2.5 text-center">
                        <p className="font-display text-xl leading-none">{s.v}</p>
                        <p className="mt-1 text-xs font-semibold uppercase text-muted-foreground">
                          {s.l}
                        </p>
                      </div>
                    ))}
                  </div>

                  {sonoAllenatore ? null : (
                    <>
                      <p className="mt-4 text-xs font-bold uppercase tracking-wide text-muted-foreground">
                        Badge sbloccati · {collezioneBadge(g).ottenuti}/{collezioneBadge(g).totali}
                      </p>
                      {sbloccati.length === 0 ? (
                        <p className="mt-2 rounded-2xl bg-secondary/50 p-3 text-xs text-muted-foreground">
                          Nessun badge sbloccato per ora.
                        </p>
                      ) : (
                        <div className="mt-2 grid grid-cols-2 gap-2">
                          {sbloccati.map((b) => {
                            const Icon = b.def.icon;
                            const meta = gradoMeta[b.grado!];
                            return (
                              <BadgeDrawer key={b.def.id} def={b.def} stato={b}>
                                <div className={cn("rounded-2xl p-2.5 ring-1", meta.bg, meta.ring)}>
                                  <Icon className={cn("h-4 w-4", meta.text)} />
                                  <p className="mt-1 text-xs font-bold leading-tight">
                                    {b.def.nome}
                                  </p>
                                  <p className="text-xs text-muted-foreground">
                                    {b.valore} {b.def.unita}
                                    {b.prossimaSoglia
                                      ? ` · ${b.prossimaSoglia} per ${gradoMeta[b.prossimo!].label.toLowerCase()}`
                                      : ""}
                                  </p>
                                  <p
                                    className={cn("mt-1.5 text-xs font-bold uppercase", meta.text)}
                                  >
                                    {meta.label}
                                  </p>
                                </div>
                              </BadgeDrawer>
                            );
                          })}
                        </div>
                      )}
                    </>
                  )}
                </div>
              ) : null}
            </article>
          );
        })}
      </div>
    ),
    [rosa, aperto, mese, allenatori, sonoAllenatore],
  );

  const contenutoStats = useMemo(
    () => (
      <div className="space-y-4">
        <div className="grid grid-cols-3 gap-2">
          <StatTile valore={`${mediaPresenze}%`} label="Media presenze" />
          <StatTile valore={matchGiocati} label="Match giocati" />
          <StatTile valore={mediaSquadra(pagelle) || "—"} label="Media pagelle" />
          <StatTile valore={team.punti} label="Punti squadra" />
          <StatTile valore={team.ace} label="Ace squadra" />
          <StatTile valore={team.muri} label="Muri squadra" />
        </div>

        <div className="border-t border-border pt-4">
          <button
            type="button"
            onClick={() => setFiltroAperto(true)}
            aria-haspopup="dialog"
            className="flex w-full min-w-0 items-center gap-2 rounded-2xl bg-card px-3 py-2.5 text-left shadow-card"
          >
            <Trophy className="h-5 w-5 shrink-0 text-warning" aria-hidden />
            <span className="shrink-0 text-[14px] text-foreground/80">Classifica per</span>
            <span className="min-w-0 flex-1 truncate text-right text-[14px] font-bold">
              {criteri.find((c) => c.id === criterio)?.label}
            </span>
            <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
          </button>

          <Drawer open={filtroAperto} onOpenChange={setFiltroAperto}>
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>Classifica per</DrawerTitle>
              </DrawerHeader>
              <div className="flex flex-col gap-1 px-4 pb-6">
                {criteriVisibili.map((c) => (
                  <DrawerClose key={c.id} asChild>
                    <button
                      type="button"
                      onClick={() => setCriterio(c.id)}
                      className={cn(
                        "flex min-h-11 w-full items-center rounded-xl px-3 text-left text-sm font-bold",
                        criterio === c.id
                          ? "bg-accent text-accent-foreground"
                          : "bg-secondary text-foreground",
                      )}
                    >
                      {c.label}
                    </button>
                  </DrawerClose>
                ))}
              </div>
            </DrawerContent>
          </Drawer>

          <div className="mt-3 space-y-2">
            {ordinati.map((g, i) => (
              <div key={g.id} className="rounded-2xl bg-card p-3 shadow-card">
                <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
                  <div className="flex min-w-0 items-center gap-3">
                    <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-secondary font-display text-lg">
                      {rank[i]}
                    </span>
                    <div className="min-w-0">
                      <p className="truncate text-sm font-bold">
                        {g.nome}
                        {rank[i] === 1 ? (
                          <Crown className="ml-1 inline h-3.5 w-3.5 text-warning" />
                        ) : null}
                      </p>
                      <p className="truncate text-xs text-muted-foreground">
                        #{g.numero} · {g.ruolo} · {dettaglioClassifica(g, criterio)}
                      </p>
                    </div>
                  </div>
                  <span className="font-display text-xl tabular-nums">
                    {valore(g, criterio) || "—"}
                  </span>
                </div>
                <Barra
                  percentuale={Math.max(6, (valore(g, criterio) / max) * 100)}
                  altezza="h-1.5"
                  trackClassName="mt-2"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    ),
    [
      mediaPresenze,
      matchGiocati,
      pagelle,
      team,
      filtroAperto,
      criterio,
      ordinati,
      rank,
      max,
      criteriVisibili,
    ],
  );

  const contenutoObiettivi = useMemo(
    () => (
      <>
        <div className="mb-3 rounded-3xl bg-hero p-4 text-primary-foreground shadow-card">
          <div className="flex items-end justify-between gap-3">
            <div>
              <p className="text-xs font-semibold uppercase tracking-wide text-primary-foreground/60">
                Progresso collettivo
              </p>
              <p className="font-display text-4xl leading-none">
                <Numero valore={mediaObiettivi} suffisso="%" />
              </p>
            </div>
            <p className="text-xs text-primary-foreground/70">
              {completati}/{obiettivi.length} completati
            </p>
          </div>
          <Barra percentuale={mediaObiettivi} trackClassName="mt-3 bg-primary-foreground/15" />
        </div>
        <div className="space-y-2">
          {obiettivi.map((o, i) => {
            const pct = progressoObiettivo(o);
            const fatto = pct >= 100;
            return (
              <Reveal
                key={o.id}
                indice={i}
                className={cn(
                  "premi rounded-3xl bg-card p-4 shadow-card ring-1",
                  fatto ? "ring-success/40" : pct >= 90 ? "ring-accent/40" : "ring-transparent",
                )}
              >
                <div className="flex items-start gap-2">
                  <span className="text-lg leading-none">{o.emoji}</span>
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-bold leading-tight">{o.titolo}</p>
                    <p className="text-xs text-muted-foreground">{o.descrizione}</p>
                  </div>
                  <span
                    className={cn(
                      "rounded-full px-2 py-0.5 text-xs font-bold uppercase tracking-wide",
                      fatto
                        ? "bg-success text-success-foreground"
                        : "bg-secondary text-muted-foreground",
                    )}
                  >
                    {fatto ? "Completato" : `${pct}%`}
                  </span>
                </div>
                <Barra percentuale={pct} trackClassName="mt-3" />
                <p className="mt-2 text-xs text-muted-foreground">
                  {o.valore}/{o.target} {o.unita} · {pct}%
                  {o.scadenza ? ` · entro il ${formatData(o.scadenza)}` : ""}
                </p>
                <p className="mt-1 text-xs font-semibold text-accent">{microcopyObiettivo(o)}</p>
                <p className="mt-0.5 text-xs text-muted-foreground">{o.impatto}</p>
              </Reveal>
            );
          })}
        </div>
      </>
    ),
    [obiettivi, mediaObiettivi, completati],
  );

  const contenutoBadge = useMemo(
    () => (
      <div className="space-y-2">
        {badgeDefs.map((b) => {
          const Icon = b.icon;
          return (
            <BadgeDrawer key={b.id} def={b}>
              <div className="rounded-3xl bg-card p-3 shadow-card">
                <div className="flex items-center gap-2">
                  <Icon className="h-5 w-5 text-accent" />
                  <p className="text-sm font-bold leading-tight">{b.nome}</p>
                  <p className="ml-auto text-xs text-muted-foreground">{descrizioneSoglie(b)}</p>
                </div>
                <div className="mt-2 grid grid-cols-3 gap-1.5">
                  {gradiOrdine.map((grado) => {
                    const meta = gradoMeta[grado];
                    const quanti = rosa.filter((g) => {
                      const raggiunto = gradoRaggiunto(b, b.valore(g));
                      return raggiunto
                        ? gradiOrdine.indexOf(raggiunto) >= gradiOrdine.indexOf(grado)
                        : false;
                    }).length;
                    return (
                      <div
                        key={grado}
                        className={cn("rounded-2xl p-2 text-center ring-1", meta.bg, meta.ring)}
                      >
                        <p className={cn("text-xs font-bold uppercase", meta.text)}>{meta.label}</p>
                        <p className="font-display text-lg leading-none">{b.soglie[grado]}</p>
                        <p className="text-xs text-muted-foreground">
                          {quanti}/{rosa.length}
                        </p>
                      </div>
                    );
                  })}
                </div>
              </div>
            </BadgeDrawer>
          );
        })}
      </div>
    ),
    [rosa],
  );

  return (
    <>
      <PageHeader titolo="Squadra" sottotitolo={`${rosa.length} giocatori · Stagione 2026/27`} />

      <BarraSottosezioni
        defaultId="rosa"
        variante="sottolineatura"
        riempiLarghezza
        voci={[
          { id: "rosa", label: "Rosa", contenuto: contenutoRosa },
          { id: "stats", label: "Stats", contenuto: contenutoStats },
          ...(sonoAllenatore
            ? []
            : [
                { id: "obiettivi", label: "Obiettivi", contenuto: contenutoObiettivi },
                { id: "badge", label: "Badge", contenuto: contenutoBadge },
              ]),
        ]}
      />
    </>
  );
}