// ===== Cofre de Certidões + Peças Jurídicas =====

const STATUS_META = {
  ok:   { color: "rgb(22 163 74)",  bg: "rgb(34 197 94 / .12)",  ico: "✓" },
  warn: { color: "rgb(245 158 11)", bg: "rgb(245 158 11 / .12)", ico: "⚠" },
  err:  { color: "rgb(239 68 68)",  bg: "rgb(239 68 68 / .12)",  ico: "✕" },
};

const COFRE_DOCS = [
  { ico: "🏛", nome: "CND Federal",         dias: 6,   prox: "13/05/2026", emissor: "Receita Federal · PGFN" },
  { ico: "🏢", nome: "Certidão Estadual",   dias: 45,  prox: "29/06/2026", emissor: "Sefaz · SP" },
  { ico: "💼", nome: "FGTS / CRF",          dias: 180, prox: "20/10/2026", emissor: "Caixa Econômica" },
  { ico: "⚖️", nome: "CNDT",                dias: 95,  prox: "15/08/2026", emissor: "TST · Justiça do Trabalho" },
  { ico: "📊", nome: "Balanço Patrimonial 2025", dias: null, prox: "Não encontrado", emissor: "Solicite ao contador" },
  { ico: "🏭", nome: "SICAF",               dias: 90,  prox: "14/08/2026", emissor: "Compras.gov.br" },
  { ico: "📜", nome: "Inscrição Municipal", dias: 220, prox: "20/12/2026", emissor: "Pref. Município" },
  { ico: "🧾", nome: "Certidão Trabalhista", dias: 30, prox: "14/06/2026", emissor: "TRT" },
];

function statusFromDias(dias) {
  if (dias == null)    return { tone: "err",  label: "Não encontrado",      cta: "Solicitar →" };
  if (dias <= 7)       return { tone: "err",  label: `Vence em ${dias} dias`, cta: "Renovar →" };
  if (dias <= 60)      return { tone: "warn", label: `Vence em ${dias} dias`, cta: "Renovar antes →" };
  return                       { tone: "ok",   label: `Vence em ${dias} dias`, cta: null };
}

function ScreenCofre({ beginnerMode, setBeginnerMode }) {
  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="habilitacao" crumb={["Pleita", "Cofre de Certidões"]}>
      <header className="flex items-end justify-between flex-wrap gap-4 mb-6">
        <div>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">📋 Cofre</div>
          <h1 className="font-display text-3xl text-pleita-ink leading-tight">Seus documentos em um só lugar<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-2 max-w-xl">Avisamos antes de qualquer certidão vencer. Linguagem simples — sem datas técnicas.</p>
        </div>
        <PleitaButton><Icons.Plus className="size-4" />Adicionar documento</PleitaButton>
      </header>

      <div className="rounded-[10px] bg-pleita-ink text-pleita-paper p-5 mb-6 flex items-center gap-4 flex-wrap shadow-pl-sm">
        <div className="size-10 rounded-md bg-pleita-lime/20 grid place-items-center text-xl">🔔</div>
        <div className="flex-1 min-w-0">
          <div className="text-sm text-pleita-paper">Alertas automáticos · 30 · 15 · 7 · 1 dias antes do vencimento</div>
          <div className="pl-num text-[11px] text-pleita-paper/60 mt-0.5">Via e-mail e WhatsApp · também enviamos checklist quando você ganha uma licitação</div>
        </div>
        <button className="text-sm text-pleita-lime pl-num">Configurar →</button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
        {COFRE_DOCS.map((d) => {
          const s = statusFromDias(d.dias);
          const m = STATUS_META[s.tone];
          return (
            <article key={d.nome} className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm hover:shadow-pl-md hover:-translate-y-px transition-all"
              style={{ borderLeftWidth: 3, borderLeftColor: m.color }}>
              <header className="flex items-start gap-3">
                <div className="size-10 rounded-md grid place-items-center text-xl" style={{ background: m.bg }}>{d.ico}</div>
                <div className="flex-1 min-w-0">
                  <div className="font-display text-base text-pleita-ink leading-tight">{d.nome}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{d.emissor}</div>
                </div>
              </header>
              <div className="mt-4 flex items-baseline justify-between">
                <div>
                  <div className="text-sm font-semibold" style={{ color: m.color }}>{s.label}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2">{d.prox}</div>
                </div>
                {s.cta && (
                  <button className="rounded-md px-3 py-1.5 text-xs font-medium" style={{ background: m.bg, color: m.color }}>{s.cta}</button>
                )}
              </div>
            </article>
          );
        })}
      </div>
    </AppFrame>
  );
}

// ----- Peças Jurídicas -----

const PECAS = [
  { id: "PJ-2026-0042", tipo: "Impugnação", processo: "EDT-2026-04-08FE", orgao: "SEDUC GO", data: "12/05/2026", status: "rascunho",  preview: "Excelentíssimo Sr. Pregoeiro, vem a presente IMPUGNAR o item 5.4.2 do edital, com fundamento na LC 123/06 art. 3º, §14º e jurisprudência TCU AC 1.234/2021…" },
  { id: "PJ-2026-0041", tipo: "Esclarecimento", processo: "EDT-2026-04-3C8D", orgao: "TRF 3ª Região", data: "11/05/2026", status: "enviada", preview: "Solicitamos esclarecimento quanto à exigência de atestado de capacidade técnica conforme item 7.3 — qual o quantitativo mínimo admitido para…" },
  { id: "PJ-2026-0040", tipo: "Recurso",     processo: "EDT-2026-03-77E1", orgao: "DNIT", data: "08/05/2026", status: "aprovada", preview: "Vem a Recorrente, com fundamento no art. 165 da LC 14.133/21, RECORRER da decisão que inabilitou a empresa por suposta inexequibilidade…" },
  { id: "PJ-2026-0039", tipo: "Contrarrazões", processo: "EDT-2026-03-90AC", orgao: "SES-RJ", data: "02/05/2026", status: "enviada", preview: "Em resposta ao recurso interposto pela empresa concorrente, apresentamos as presentes CONTRARRAZÕES demonstrando o cumprimento integral…" },
];

const PECA_META = {
  rascunho: { color: "rgb(107 114 128)",  bg: "rgb(107 114 128 / .12)" },
  enviada:  { color: "rgb(59 130 246)",   bg: "rgb(59 130 246 / .12)" },
  aprovada: { color: "rgb(22 163 74)",    bg: "rgb(34 197 94 / .12)" },
};
const TIPO_COLOR = {
  "Impugnação":   "#B45309",
  "Esclarecimento": "#7C3AED",
  "Recurso":      "#DC2626",
  "Contrarrazões": "#0891B2",
};

function ScreenPecas({ beginnerMode, setBeginnerMode }) {
  const [tab, setTab] = React.useState("todas");
  const [open, setOpen] = React.useState(null);
  const tabs = ["todas", "Impugnações", "Recursos", "Esclarecimentos", "Contrarrazões"];

  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="pecas" crumb={["Pleita", "Peças Jurídicas"]}>
      <header className="flex items-end justify-between flex-wrap gap-4 mb-6">
        <div>
          <div className="pl-num text-xs uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">⚖️ Peças jurídicas</div>
          <h1 className="font-display text-3xl text-pleita-ink leading-tight">Geradas pelo Jurídico · com revisão humana<span className="text-pleita-lime">.</span></h1>
          <p className="text-sm text-pleita-stone mt-2 max-w-xl">O Agente Jurídico fundamenta com base no TCU, LC 14.133/21 e LC 123/06. Você revisa, ajusta e envia.</p>
        </div>
        <PleitaButton onClick={() => setOpen("new")}><Icons.Plus className="size-4" />Gerar nova peça</PleitaButton>
      </header>

      <div className="flex items-center gap-1 mb-5 border-b border-pleita-line overflow-x-auto scrollbar-pl">
        {tabs.map((t) => (
          <button key={t} onClick={() => setTab(t)}
            className={`pl-num text-xs uppercase tracking-wider px-4 py-2.5 border-b-2 transition-colors whitespace-nowrap ${tab === t ? "border-pleita-lime text-pleita-ink" : "border-transparent text-pleita-stone-2 hover:text-pleita-ink"}`}>
            {t}
          </button>
        ))}
      </div>

      <div className="space-y-3">
        {PECAS
          .filter((p) => tab === "todas" || p.tipo === tab.replace(/s$/, "") || tab === p.tipo + "s" || tab === p.tipo)
          .map((p) => {
            const sm = PECA_META[p.status];
            const tc = TIPO_COLOR[p.tipo];
            return (
              <article key={p.id} className="rounded-[10px] bg-surface-card border border-pleita-line p-5 shadow-pl-sm hover:shadow-pl-md transition-shadow"
                style={{ borderLeftWidth: 3, borderLeftColor: tc }}>
                <div className="flex items-start justify-between gap-4 flex-wrap">
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2 mb-1.5 flex-wrap">
                      <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-md font-semibold" style={{ background: `${tc}18`, color: tc }}>{p.tipo}</span>
                      <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-md font-semibold" style={{ background: sm.bg, color: sm.color }}>{p.status}</span>
                      <span className="pl-num text-[11px] text-pleita-stone-2">{p.id} · {p.processo}</span>
                    </div>
                    <div className="font-display text-base text-pleita-ink">{p.orgao}</div>
                    <p className="text-xs text-pleita-stone mt-2 leading-relaxed line-clamp-2 max-w-3xl">{p.preview}</p>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="pl-num text-[11px] text-pleita-stone-2 mr-2">{p.data}</span>
                    <button onClick={() => setOpen(p)} className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">Ver completo</button>
                    <button className="pl-num text-xs px-3 py-1.5 rounded-md bg-pleita-lime text-pleita-ink font-semibold">PDF</button>
                  </div>
                </div>
              </article>
            );
        })}
      </div>

      {/* Modal de geração / preview */}
      {open && (
        <div className="fixed inset-0 z-50 grid place-items-center p-4" style={{ background: "rgba(15,30,58,.6)" }}>
          <div className="rounded-[10px] bg-surface-card border border-pleita-line max-w-3xl w-full max-h-[85vh] overflow-y-auto shadow-pl-md">
            <header className="px-6 py-4 border-b border-pleita-line flex items-center justify-between sticky top-0 bg-surface-card">
              <div>
                <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{open === "new" ? "Nova peça" : "Preview"}</div>
                <h3 className="font-display text-lg text-pleita-ink">{open === "new" ? "Gerar peça jurídica" : `${open.tipo} · ${open.id}`}</h3>
              </div>
              <button onClick={() => setOpen(null)} className="size-8 grid place-items-center rounded-full hover:bg-surface-2 text-pleita-stone-2"><Icons.X className="size-4" /></button>
            </header>
            <div className="p-6 space-y-4">
              {open === "new" ? (
                <>
                  <div>
                    <label className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 block mb-1.5">Processo relacionado</label>
                    <select className="w-full rounded-md border border-pleita-line bg-surface-1 px-3 py-2 text-sm">
                      <option>EDT-2026-04-08FE · Sec. Educação · Goiás</option>
                      <option>EDT-2026-04-3C8D · TRF 3ª Região</option>
                    </select>
                  </div>
                  <div>
                    <label className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 block mb-1.5">Tipo de peça</label>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
                      {Object.keys(TIPO_COLOR).map((t) => (
                        <button key={t} className="rounded-md border border-pleita-line px-3 py-2 text-xs text-pleita-ink hover:border-pleita-lime hover:bg-pleita-lime/10">{t}</button>
                      ))}
                    </div>
                  </div>
                  <div>
                    <label className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 block mb-1.5">Contexto adicional <span className="lowercase">(opcional)</span></label>
                    <textarea rows="3" placeholder="Detalhes específicos que o agente deve considerar…" className="w-full rounded-md border border-pleita-line bg-surface-1 px-3 py-2 text-sm" />
                  </div>
                </>
              ) : (
                <>
                  <div className="rounded-md bg-pleita-paper-2/40 border border-pleita-line p-4 pl-num text-[11px] text-pleita-stone-2">
                    Fundamentação: <span className="text-pleita-ink">TCU AC 1.234/2021 · LC 123/06 art. 3º §14 · LC 14.133/21 art. 65</span>
                  </div>
                  <article className="prose prose-sm max-w-none text-pleita-stone leading-relaxed">
                    <p className="font-display text-base text-pleita-ink mb-3">EXCELENTÍSSIMO SENHOR PREGOEIRO DA {open.orgao?.toUpperCase()}</p>
                    <p>{open.preview}</p>
                    <p>Em adição, salienta-se que o tratamento diferenciado às microempresas e empresas de pequeno porte, estabelecido na Lei Complementar 123/2006 e regulamentado pelo Decreto 8.538/2015, é norma cogente, conforme reiteradamente reconhecido pelo Egrégio Tribunal de Contas da União.</p>
                    <p>Diante do exposto, requer-se o acolhimento da presente IMPUGNAÇÃO, com a consequente alteração do item ora questionado, sob pena de nulidade do certame.</p>
                    <p>Nestes termos, pede deferimento.</p>
                  </article>
                </>
              )}
              <div className="rounded-md p-3 flex items-start gap-3 bg-verdict-caution/10 border border-verdict-caution/30">
                <span className="text-base">⚖️</span>
                <div className="text-xs text-verdict-caution"><strong>Revisão humana recomendada</strong> antes do envio. A peça foi gerada com base em jurisprudência atual mas pode exigir adaptações.</div>
              </div>
            </div>
            <footer className="px-6 py-4 border-t border-pleita-line flex items-center justify-end gap-2 sticky bottom-0 bg-surface-card">
              <button onClick={() => setOpen(null)} className="text-sm text-pleita-stone-2 px-4 py-2">Cancelar</button>
              <button className="pl-num text-xs px-4 py-2 rounded-md border border-pleita-line text-pleita-ink hover:bg-surface-2">Salvar rascunho</button>
              <button className="pl-num text-xs px-4 py-2 rounded-md bg-pleita-lime text-pleita-ink font-semibold">{open === "new" ? "Gerar com Jurídico →" : "Marcar como enviada"}</button>
            </footer>
          </div>
        </div>
      )}
    </AppFrame>
  );
}

window.ScreenCofre = ScreenCofre;
window.ScreenPecas = ScreenPecas;
window.STATUS_META = STATUS_META;