"use client";

import { type CSSProperties, useEffect, useMemo, useState } from "react";

type Inspection = { id: string; vehicle: string; plate: string; type: "Leve" | "Moto" | "Pesado"; stage: string; stageTone: "cyan" | "orange" | "green" | "red" | "gray"; time: string; score?: number };
type Branding = { displayName: string; logoUrl: string | null; primaryColor: string; accentColor: string; backgroundColor: string };

const filters = ["Todas", "Em vistoria", "Em análise IA", "Em análise humana", "Em retriagem", "Aprovada", "Reprovada"];

export default function ClientDashboard() {
  const [items, setItems] = useState<Inspection[]>([]);
  const [query, setQuery] = useState("");
  const [filter, setFilter] = useState("Todas");
  const [notice, setNotice] = useState("");
  const [linkBusy, setLinkBusy] = useState("");
  const [branding, setBranding] = useState<Branding | null>(null);
  const [canManageBrand, setCanManageBrand] = useState(false);
  const [userName, setUserName] = useState("");
  const [supportMode, setSupportMode] = useState(false);

  useEffect(() => { fetch("/api/inspections").then(async (response) => response.ok ? response.json() : null).then((data) => setItems(data?.items ?? [])).catch(() => undefined); }, []);
  useEffect(() => { fetch("/api/client/branding").then(async (response) => response.ok ? response.json() : null).then((data) => { if (data?.branding) setBranding(data.branding); setCanManageBrand(Boolean(data?.canManage)); setUserName(data?.user?.name || ""); setSupportMode(Boolean(data?.isSupport)); }).catch(() => undefined); }, []);
  const visible = useMemo(() => items.filter((item) => (filter === "Todas" || item.stage === filter) && `${item.id} ${item.vehicle} ${item.plate}`.toLowerCase().includes(query.toLowerCase())), [items, filter, query]);
  const completed = items.filter((item) => ["Aprovada", "Reprovada"].includes(item.stage)).length;
  const inProgress = items.filter((item) => ["Em vistoria", "Em análise IA", "Em análise humana"].includes(item.stage)).length;
  const approvalRate = completed ? Math.round((items.filter((item) => item.stage === "Aprovada").length / completed) * 100) : 0;
  const showNotice = (message: string) => { setNotice(message); window.setTimeout(() => setNotice(""), 2800); };
  async function generateClientLink(item: Inspection) {
    setLinkBusy(item.id);
    try {
      const response = await fetch(`/api/inspections/${encodeURIComponent(item.id)}/link`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ reinspection: item.stage === "Em retriagem" }) });
      const result = await response.json();
      if (!response.ok) throw new Error([result.error, result.hint].filter(Boolean).join(" "));
      await navigator.clipboard?.writeText(`${window.location.origin}${result.path}`);
      showNotice("Link gerado e copiado. Envie-o ao responsável pela vistoria.");
      setItems((current) => current.map((entry) => entry.id === item.id ? { ...entry, stage: "Link enviado", stageTone: "gray" } : entry));
    } catch (error) { showNotice(error instanceof Error ? error.message : "Não foi possível gerar o link."); } finally { setLinkBusy(""); }
  }
  async function exitSupport() { await fetch("/api/admin/clients/unused/support", { method: "DELETE" }); window.location.assign("/admin/clientes"); }

  const brandStyle = branding ? { "--client-primary": branding.primaryColor, "--client-accent": branding.accentColor, "--client-background": branding.backgroundColor } as CSSProperties : undefined;
  const initials = (userName || "Usuário").split(" ").filter(Boolean).map((part) => part[0]).slice(0, 2).join("").toUpperCase();
  return <main className="client-shell" style={brandStyle}>
    {supportMode && <div className="support-mode-banner"><span>Modo de suporte Capital: você está visualizando este portal como administrador.</span><button onClick={exitSupport}>Sair do suporte</button></div>}
    <header className="client-topbar"><a className="client-brand" href="/cliente">{branding?.logoUrl ? <img className="client-brand-logo" src={`${branding.logoUrl}?v=${encodeURIComponent(branding.primaryColor)}`} alt={`Logo ${branding.displayName}`} /> : <><span>✓</span><b>{branding?.displayName || "Portal do cliente"}</b><i>·</i> Autovistoria Veicular</>}</a><nav><a className="active" href="/cliente">Visão geral</a><button onClick={() => showNotice("A área de laudos será liberada após a geração do primeiro laudo.")}>Laudos</button>{canManageBrand && <a href="/cliente/configuracoes">Personalização</a>}<button onClick={() => showNotice("Seu gestor de conta Capital poderá auxiliar nas configurações.")}>Suporte</button></nav><div className="client-user"><span>{initials}</span><div><b>{userName || "Usuário"}</b><small>{branding?.displayName || "Cliente"}</small></div></div></header>
    <section className="client-page">
      <div className="client-heading"><div><p className="eyebrow">PORTAL DO CLIENTE</p><h1>Olá{userName ? `, ${userName}` : ""}</h1><p>Acompanhe as suas solicitações, vistorias e decisões em um só lugar.</p></div><a className="client-primary" href="/cliente/vistorias/nova">＋ Nova solicitação</a></div>
      <section className="client-metrics"><ClientMetric label="Solicitações no período" value={String(items.length)} detail="Todas as vistorias recebidas" /><ClientMetric label="Em andamento" value={String(inProgress)} detail="Captura ou análise em progresso" tone="blue" /><ClientMetric label="Concluídas" value={String(completed)} detail="Com decisão disponível" tone="green" /><ClientMetric label="Taxa de aprovação" value={`${approvalRate}%`} detail="Entre vistorias concluídas" tone="purple" /></section>
      <section className="client-highlight"><div><p className="eyebrow">ACOMPANHAMENTO</p><h2>O que acontece agora?</h2><p>Você recebe o status de cada vistoria. Quando a decisão for conclusiva, o laudo e o retorno da integração ficarão disponíveis aqui.</p></div><div className="client-steps"><span className="done">1 <small>Solicitação</small></span><i /><span className="done">2 <small>Vistoria</small></span><i /><span>3 <small>Análise</small></span><i /><span>4 <small>Laudo</small></span></div></section>
      <section className="client-list-card"><div className="client-list-head"><div><p className="eyebrow">MINHAS VISTORIAS</p><h2>Solicitações recentes</h2></div><button onClick={() => showNotice("Filtros avançados serão adicionados nesta área.")}>Exportar lista</button></div><div className="client-toolbar"><label className="client-search">⌕ <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar por proposta, placa ou veículo" /></label><div className="client-filters">{filters.map((item) => <button key={item} className={filter === item ? "selected" : ""} onClick={() => setFilter(item)}>{item}</button>)}</div></div><div className="client-table-wrap"><table className="client-table"><thead><tr><th>Proposta</th><th>Veículo</th><th>Tipo</th><th>Status</th><th>Última atualização</th><th /></tr></thead><tbody>{visible.length ? visible.map((item) => <tr key={item.id}><td><b>{item.id}</b><small>{item.plate}</small></td><td>{item.vehicle}</td><td>{item.type}</td><td><span className={`client-status ${item.stageTone}`}><i />{item.stage}</span></td><td>{item.time}</td><td>{item.stage === "Em retriagem" ? <button className="client-view-link client-link-button" disabled={linkBusy === item.id} onClick={() => generateClientLink(item)}>{linkBusy === item.id ? "Gerando..." : "Gerar novo link"}</button> : <a className="client-view-link" href={`/cliente/vistorias/${encodeURIComponent(item.id)}`}>Ver vistoria →</a>}</td></tr>) : <tr><td colSpan={6} className="client-empty">Nenhuma vistoria encontrada com estes filtros.</td></tr>}</tbody></table></div></section>
      <section className="client-support"><div><span>?</span><div><b>Precisa de ajuda com uma solicitação?</b><p>O time da Capital acompanha a operação e pode ajudar em qualquer etapa.</p></div></div><button onClick={() => showNotice("Canal de suporte em configuração para o Banco PAN.")}>Falar com suporte</button></section>
    </section>{notice && <div className="toast" role="status">{notice}</div>}
  </main>;
}

function ClientMetric({ label, value, detail, tone = "navy" }: { label: string; value: string; detail: string; tone?: string }) { return <article className={`client-metric ${tone}`}><p>{label}</p><b>{value}</b><small>{detail}</small></article>; }