// ===== App · Centro de Avisos =====

const AVISOS_DATA = [
  { id: 1,  ico: "🔴", t: "CND Federal vence em 6 dias",         desc: "Renove agora pra não perder o pregão TRF-3 da semana que vem.",                                  cat: "doc",     time: "agora",      unread: true,  pin: true },
  { id: 2,  ico: "🟡", t: "Pregão TRF-3 começa em 1h",            desc: "Locação de impressoras · R$ 385k · você está classificado. Robô de lances pronto.",            cat: "pregao",  time: "há 12min",   unread: true },
  { id: 3,  ico: "🟢", t: "VOCÊ VENCEU · Pregão 012/2026 SES-MG", desc: "R$ 182.400 em contratos. Próximo passo: assinatura.",                                          cat: "vitoria", time: "há 2h",      unread: true,  pin: true },
  { id: 4,  ico: "📡", t: "3 novos editais compatíveis hoje",     desc: "Match 84, 87 e 91 · Caça-Editais terminou a varredura das 14h.",                              cat: "match",   time: "há 3h",      unread: true },
  { id: 5,  ico: "⚖️", t: "Peça jurídica pronta para revisão",   desc: "Impugnação da cláusula §4º do EDT-2026-04-A1B2 finalizada pelo Agente Jurídico.",              cat: "pecas",   time: "há 5h",      unread: false },
  { id: 6,  ico: "📊", t: "Análise concluída · EDT-2026-04-3C8D", desc: "Veredito 🟢 PARTICIPE · score 92/100 · margem +18% · 5 ações sugeridas.",                       cat: "agente",  time: "há 8h",      unread: false },
  { id: 7,  ico: "💳", t: "Cobrança recorrente paga",             desc: "R$ 197,00 · Em Marcha · maio/2026 · NF-e emitida.",                                            cat: "billing", time: "ontem 14h",  unread: false },
  { id: 8,  ico: "🎓", t: "Coach: você está pronto pra ME-EPP",   desc: "Sua empresa qualifica em 14 dos 28 editais ativos. Quer ver?",                                cat: "coach",   time: "ontem 10h",  unread: false },
  { id: 9,  ico: "📋", t: "FGTS sincronizado automaticamente",    desc: "Nova certidão válida até 20/10/2026 já está no Cofre.",                                       cat: "doc",     time: "há 2d",      unread: false },
  { id: 10, ico: "🏆", t: "Marco: 3 contratos ganhos este mês",   desc: "Você bateu sua média histórica. Compartilhe o relatório.",                                    cat: "vitoria", time: "há 3d",      unread: false },
];

const CAT_FILTERS = [
  { id: "all",     label: "Tudo",          ico: "📥" },
  { id: "pregao",  label: "Pregões",       ico: "⚡" },
  { id: "match",   label: "Novos matches", ico: "🎯" },
  { id: "doc",     label: "Documentos",    ico: "📋" },
  { id: "pecas",   label: "Peças",         ico: "⚖️" },
  { id: "vitoria", label: "Vitórias",      ico: "🏆" },
  { id: "billing", label: "Faturamento",   ico: "💳" },
];

function ScreenAvisos({ beginnerMode, setBeginnerMode }) {
  const [filter, setFilter]   = React.useState("all");
  const [items, setItems]     = React.useState(AVISOS_DATA);
  const unread                = items.filter((a) => a.unread).length;
  const visible               = items.filter((a) => filter === "all" || a.cat === filter);
  const markAll               = () => setItems((xs) => xs.map((x) => ({ ...x, unread: false })));
  const toggleOne             = (id) => setItems((xs) => xs.map((x) => (x.id === id ? { ...x, unread: false } : x)));

  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="avisos" crumb={["Pleita", "Avisos"]}>
      <header className="mb-6 flex items-end justify-between flex-wrap gap-4">
        <div>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">🔔 Centro de avisos</div>
          <h1 className="font-display text-3xl text-pleita-ink leading-tight">{unread > 0 ? `${unread} avisos não lidos` : "Tudo em dia"}<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-2">Aqui chega tudo que importa. Configure canais nas <a className="underline">preferências</a>.</p>
        </div>
        <div className="flex items-center gap-2">
          <button onClick={markAll} disabled={unread === 0} className="pl-num text-xs px-3 py-2 rounded-md border border-pleita-line text-pleita-stone hover:bg-surface-2 disabled:opacity-40">Marcar tudo como lido</button>
          <button className="pl-num text-xs px-3 py-2 rounded-md bg-pleita-ink text-pleita-paper font-semibold">⚙ Preferências</button>
        </div>
      </header>

      <div className="grid grid-cols-12 gap-6">
        <nav className="col-span-12 md:col-span-3">
          <div className="md:sticky md:top-20 rounded-[10px] bg-surface-card border border-pleita-line p-1.5 flex md:flex-col gap-0.5 overflow-x-auto scrollbar-pl">
            {CAT_FILTERS.map((c) => {
              const n = c.id === "all" ? items.length : items.filter((x) => x.cat === c.id).length;
              const u = c.id === "all" ? unread     : items.filter((x) => x.cat === c.id && x.unread).length;
              return (
                <button key={c.id} onClick={() => setFilter(c.id)} className={`flex items-center gap-2.5 px-3 py-2 rounded-md text-sm whitespace-nowrap text-left transition-colors ${filter === c.id ? "bg-pleita-paper-2 text-pleita-ink font-medium" : "text-pleita-stone hover:bg-surface-2"}`}>
                  <span className="text-base">{c.ico}</span><span className="flex-1">{c.label}</span>
                  {u > 0 ? <span className="pl-num text-[10px] px-1.5 py-0.5 rounded-full font-bold bg-pleita-lime text-pleita-ink">{u}</span>
                         : <span className="pl-num text-[10px] text-pleita-stone-2">{n}</span>}
                </button>
              );
            })}
          </div>
        </nav>

        <section className="col-span-12 md:col-span-9 min-w-0">
          <div className="rounded-[10px] bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden">
            {visible.length === 0 ? (
              <div className="py-20 text-center">
                <div className="text-5xl mb-3 opacity-40">📥</div>
                <div className="text-sm text-pleita-stone">Nenhum aviso nessa categoria.</div>
              </div>
            ) : (
              <ul className="divide-y divide-pleita-line/60">
                {visible.map((a) => (
                  <li key={a.id} onClick={() => toggleOne(a.id)} className={`px-5 py-4 cursor-pointer hover:bg-surface-2/40 transition-colors flex items-start gap-4 ${a.unread ? "" : "opacity-65"}`}>
                    <span className="size-10 rounded-md bg-surface-2 grid place-items-center text-xl shrink-0">{a.ico}</span>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center justify-between gap-3 flex-wrap">
                        <div className="flex items-center gap-2 min-w-0">
                          {a.unread && <span className="size-2 rounded-full bg-pleita-lime shrink-0" />}
                          {a.pin && <span className="pl-num text-[9px] uppercase tracking-wider px-1.5 py-0.5 rounded font-semibold bg-verdict-caution/20 text-verdict-caution">PIN</span>}
                          <h3 className={`text-sm leading-tight truncate ${a.unread ? "font-semibold text-pleita-ink" : "text-pleita-stone"}`}>{a.t}</h3>
                        </div>
                        <span className="pl-num text-[11px] text-pleita-stone-2 whitespace-nowrap">{a.time}</span>
                      </div>
                      <p className="text-sm text-pleita-stone mt-1 leading-snug">{a.desc}</p>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </section>
      </div>
    </AppFrame>
  );
}

window.ScreenAvisos = ScreenAvisos;