"use client";

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

type ExceptionItem = { external_id: string; tenant_id: string; vehicle_type: "light" | "motorcycle" | "heavy"; plate: string; vehicle_description: string | null; status: string; risk_score: number | string; created_at: string; tenant_name: string; chassis_alert: number; plate_alert: number; ai_requires_human: number; ai_low_confidence: number; pending_review: number };
type Filter = "Todas" | "Crítica" | "Análise humana" | "Retriagem" | "IA";

const typeLabel = { light: "Leve", motorcycle: "Moto", heavy: "Pesado" };

function exception(item: ExceptionItem) {
  if (Number(item.chassis_alert)) return { label: "Divergência de chassi", tone: "critical", detail: "Possível divergência ou adulteração: decisão bloqueada." };
  if (Number(item.plate_alert)) return { label: "Divergência de placa", tone: "high", detail: "A leitura não confere com o cadastro: retriagem recomendada." };
  if (item.status === "retriage") return { label: "Retriagem solicitada", tone: "high", detail: "É necessário reenviar o link e capturar novas fotos." };
  if (Number(item.pending_review) || item.status === "human_review") return { label: "Análise humana pendente", tone: "medium", detail: "Aguarda validação e decisão de um analista." };
  return { label: "Baixa confiança da IA", tone: "medium", detail: "A análise automática não foi conclusiva." };
}

export default function ExceptionsPage() {
  const [items, setItems] = useState<ExceptionItem[]>([]); const [filter, setFilter] = useState<Filter>("Todas"); const [query, setQuery] = useState(""); const [error, setError] = useState(""); const [loading, setLoading] = useState(true);
  const load = () => { setLoading(true); fetch("/api/exceptions").then(async (response) => ({ response, body: await response.json() })).then(({ response, body }) => { if (!response.ok) throw new Error(body.error || "Não foi possível carregar a fila."); setItems(body.items || []); }).catch((reason) => setError(reason instanceof Error ? reason.message : "Não foi possível carregar a fila.")).finally(() => setLoading(false)); };
  useEffect(load, []);
  const visible = useMemo(() => items.filter((item) => { const itemException = exception(item); const text = `${item.external_id} ${item.plate} ${item.vehicle_description || ""} ${item.tenant_name}`.toLocaleLowerCase("pt-BR"); const matchingFilter = filter === "Todas" || (filter === "Crítica" && itemException.tone === "critical") || (filter === "Análise humana" && (item.status === "human_review" || Number(item.pending_review))) || (filter === "Retriagem" && item.status === "retriage") || (filter === "IA" && (Number(item.ai_low_confidence) || Number(item.ai_requires_human))); return matchingFilter && text.includes(query.toLocaleLowerCase("pt-BR")); }), [items, filter, query]);
  const counts = useMemo(() => ({ critical: items.filter((item) => exception(item).tone === "critical").length, human: items.filter((item) => item.status === "human_review" || Number(item.pending_review)).length, retriage: items.filter((item) => item.status === "retriage").length }), [items]);
  return <main className="app-shell"><aside className="sidebar"><a className="brand" href="/"><span className="brand-mark">✓</span><span>GRUPO<br /><b>CAPITAL</b></span></a><div className="workspace"><span className="dot" /> Capital Vistorias</div><nav><a className="nav-item" href="/"><span className="nav-icon">▦</span>Visão geral</a><a className="nav-item" href="/"><span className="nav-icon">◫</span>Vistorias</a><a className="nav-item active" href="/excecoes"><span className="nav-icon">!</span>Fila de exceções</a><a className="nav-item" href="/admin"><span className="nav-icon">≋</span>Regras e decisões</a><a className="nav-item" href="/admin/clientes"><span className="nav-icon">◉</span>Clientes</a><a className="nav-item" href="/admin"><span className="nav-icon">↗</span>Administração</a></nav><div className="sidebar-bottom"><a className="nav-item" href="/perfil"><span className="nav-icon">GB</span>Meu perfil</a></div></aside><section className="content"><header className="topbar"><div className="crumb">Capital Vistorias <span>/</span> Fila de exceções</div><div className="top-actions"><button className="help-button" onClick={load}>↻ Atualizar fila</button></div></header><div className="page exception-page"><div className="page-heading"><div><p className="eyebrow">CENTRAL OPERACIONAL</p><h1>Fila de exceções</h1><p className="subheading">Casos que precisam de decisão humana, retriagem ou validação de identificação.</p></div><a className="primary-button" href="/vistorias/nova"><span>＋</span> Nova vistoria</a></div><section className="exception-metrics"><article><span className="exception-symbol critical">!</span><div><b>{counts.critical}</b><small>Críticos · chassi</small></div></article><article><span className="exception-symbol high">↻</span><div><b>{counts.retriage}</b><small>Aguardando retriagem</small></div></article><article><span className="exception-symbol medium">⌘</span><div><b>{counts.human}</b><small>Análise humana</small></div></article></section><section className="panel exception-panel"><div className="exception-toolbar"><div className="search"><span>⌕</span><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar por proposta, placa, veículo ou cliente" /></div><div className="filters">{(["Todas", "Crítica", "Análise humana", "Retriagem", "IA"] as Filter[]).map((item) => <button key={item} className={filter === item ? "filter active-filter" : "filter"} onClick={() => setFilter(item)}>{item}</button>)}</div></div>{error ? <div className="exception-empty"><b>Não foi possível carregar a fila</b><p>{error}</p><button onClick={load}>Tentar novamente</button></div> : loading ? <div className="exception-empty">Atualizando a fila de exceções...</div> : visible.length === 0 ? <div className="exception-empty"><b>Não há exceções na fila.</b><p>As vistorias que exigirem atenção da operação aparecerão aqui.</p></div> : <div className="exception-list">{visible.map((item) => { const info = exception(item); return <article key={`${item.tenant_id}-${item.external_id}`} className="exception-row"><span className={`exception-symbol ${info.tone}`}>{info.tone === "critical" ? "!" : info.tone === "high" ? "↻" : "⌘"}</span><div className="exception-case"><div><b>{item.external_id}</b><span className={`exception-badge ${info.tone}`}>{info.label}</span></div><h2>{item.vehicle_description || "Veículo não informado"}</h2><p>{item.plate} · {typeLabel[item.vehicle_type]} · {item.tenant_name}</p></div><p className="exception-detail">{info.detail}</p><div className="exception-risk"><span>Risco</span><b>{Number(item.risk_score)} pts</b></div><a className="row-action exception-action" href={`/vistorias/${encodeURIComponent(item.external_id)}?tenantId=${encodeURIComponent(item.tenant_id)}`}>Analisar caso →</a></article>; })}</div>}</section></div></section></main>;
}