// ===== Proposta · wizard de 5 passos =====
// Roda dentro do app shell.

const PROPOSTA_STEPS = [
  { id: "identif", n: "Identificação",   d: "Edital, lote, vigência" },
  { id: "precos",  n: "Planilha de preços", d: "Itens × quantidade × valor" },
  { id: "anexos",  n: "Anexos técnicos", d: "Catálogos, ARTs, atestados" },
  { id: "decl",    n: "Declarações",     d: "13 checkboxes da Lei 14.133" },
  { id: "rev",     n: "Revisão e envio", d: "Conferir tudo antes do clique" },
];

const PLANILHA = [
  { i: 1, desc: "Microcomputador desktop · proc. i5, 16GB RAM, SSD 512GB", un: "UN",   qt: 80, ref: 4800, lance: 4150 },
  { i: 2, desc: "Monitor 24\" Full HD IPS · entrada HDMI/DP",              un: "UN",   qt: 80, ref: 1200, lance:  990 },
  { i: 3, desc: "Notebook 14\" · proc. i7, 16GB, SSD 512GB",               un: "UN",   qt: 20, ref: 7400, lance: 6620 },
  { i: 4, desc: "Estabilizador 1000VA com 6 tomadas",                      un: "UN",   qt: 80, ref:  280, lance:  214 },
  { i: 5, desc: "Servidor de armazenamento NAS · 4 baias 16TB",            un: "UN",   qt:  2, ref:18400, lance:14800 },
  { i: 6, desc: "Switch gerenciável 24p PoE+",                             un: "UN",   qt:  6, ref: 3200, lance: 2680 },
  { i: 7, desc: "Instalação · cabeamento estruturado e configuração",      un: "SERV", qt:  1, ref:42000, lance:32500 },
];

function PropostaStep1() {
  return (
    <div className="grid lg:grid-cols-3 gap-6">
      <section className="lg:col-span-2 space-y-4">
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-6">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Edital selecionado</div>
          <div className="flex items-start gap-4">
            <div className="size-14 rounded-xl bg-pleita-lime/20 grid place-items-center text-2xl shrink-0">📄</div>
            <div className="flex-1 min-w-0">
              <div className="font-display text-lg text-pleita-ink leading-tight">Aquisição de equipamentos de TI</div>
              <div className="pl-num text-xs text-pleita-stone-2 mt-1">EDT-2026-04-A1B2 · Pregão Eletrônico nº 047/2026 · Pref. Campinas — SP</div>
              <div className="flex flex-wrap gap-2 mt-3">
                <VerdictBadge verdict="go" size="sm" />
                <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-surface-2 text-pleita-stone">match 89%</span>
                <span className="pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded bg-surface-2 text-pleita-stone">abertura 21 mai · 14h32</span>
              </div>
            </div>
            <button className="pl-num text-xs text-pleita-info hover:underline whitespace-nowrap">Trocar edital</button>
          </div>
        </div>
        <div className="grid md:grid-cols-2 gap-4">
          <div className="rounded-xl border border-pleita-line bg-surface-card p-5">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Lote</div>
            <select className="w-full mt-2 px-3 py-2.5 rounded-md border border-pleita-line bg-surface-1 text-sm">
              <option>Lote único · R$ 1.247.380</option>
              <option>Lote 1 · equipamentos · R$ 845k</option>
              <option>Lote 2 · serviços · R$ 402k</option>
            </select>
          </div>
          <div className="rounded-xl border border-pleita-line bg-surface-card p-5">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">Vigência do contrato</div>
            <div className="text-sm text-pleita-ink mt-2">12 meses · prorrogável até 60 meses</div>
            <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">conforme art. 106 da Lei 14.133/21</div>
          </div>
        </div>
        <div className="rounded-xl border border-pleita-line bg-surface-card p-5">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3">Responsável técnico</div>
          <div className="grid md:grid-cols-3 gap-3">
            <div><label className="text-xs text-pleita-stone-2">Nome</label><input defaultValue="Marcos Souza" className="w-full mt-1 px-3 py-2 rounded border border-pleita-line bg-surface-1 text-sm" /></div>
            <div><label className="text-xs text-pleita-stone-2">CREA/CRC</label><input defaultValue="CREA-SP 0608291-1" className="w-full mt-1 px-3 py-2 rounded border border-pleita-line bg-surface-1 text-sm pl-num" /></div>
            <div><label className="text-xs text-pleita-stone-2">E-mail</label><input defaultValue="marcos@souzaeng.com.br" className="w-full mt-1 px-3 py-2 rounded border border-pleita-line bg-surface-1 text-sm pl-num" /></div>
          </div>
        </div>
      </section>

      <aside className="space-y-4">
        <div className="rounded-2xl bg-pleita-lime/10 border border-pleita-lime/40 p-5">
          <div className="text-pleita-lime text-2xl">🎓</div>
          <div className="font-display text-base text-pleita-ink mt-1">O Coach diz</div>
          <p className="text-sm text-pleita-stone leading-relaxed mt-2">
            Edital padrão · pregão eletrônico · margem boa. A planilha já vem preenchida com o preço de referência que o Analista calculou. Você só precisa ajustar onde achar necessário.
          </p>
        </div>
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-5">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-2">Documentos necessários</div>
          {[
            ["CNDs federal, estadual, municipal", true],
            ["FGTS e Trabalhista",                true],
            ["Balanço patrimonial 2025",          false],
            ["Atestado de capacidade técnica",    false],
            ["ART do responsável",                true],
          ].map(([n, ok]) => (
            <div key={n} className="flex items-center gap-2 py-1.5 text-sm">
              <span className={ok ? "text-verdict-go" : "text-verdict-stop"}>{ok ? "✓" : "!"}</span>
              <span className={ok ? "text-pleita-ink" : "text-pleita-stone"}>{n}</span>
            </div>
          ))}
          <button className="pl-num text-xs text-pleita-info hover:underline mt-2">Resolver no Cofre →</button>
        </div>
      </aside>
    </div>
  );
}

function PropostaStep2() {
  const totalRef = PLANILHA.reduce((s, r) => s + r.qt * r.ref, 0);
  const totalLance = PLANILHA.reduce((s, r) => s + r.qt * r.lance, 0);
  return (
    <div className="space-y-4">
      <div className="grid md:grid-cols-4 gap-3">
        {[
          ["Total de referência", fmtBRL(totalRef),    "neutro"],
          ["Seu lance total",     fmtBRL(totalLance),  "lime"],
          ["Economia ofertada",   ((1 - totalLance/totalRef) * 100).toFixed(1) + "%", "go"],
          ["Margem estimada",     "18,2%",             "go"],
        ].map(([k, v, t]) => (
          <div key={k} className="rounded-xl bg-surface-card border border-pleita-line p-4">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">{k}</div>
            <div className={`font-display text-2xl mt-1 ${t === "lime" ? "text-pleita-lime" : t === "go" ? "text-verdict-go" : "text-pleita-ink"}`}>{v}</div>
          </div>
        ))}
      </div>

      <div className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <div className="overflow-x-auto scrollbar-pl">
          <table className="w-full text-sm">
            <thead className="bg-surface-2/40 pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">
              <tr>
                <th className="px-4 py-3 text-left w-12">#</th>
                <th className="px-4 py-3 text-left">Descrição</th>
                <th className="px-3 py-3 text-center w-16">UN</th>
                <th className="px-3 py-3 text-right w-20">Qt.</th>
                <th className="px-3 py-3 text-right w-28">Ref. unit</th>
                <th className="px-3 py-3 text-right w-28">Seu lance</th>
                <th className="px-3 py-3 text-right w-28">Total</th>
                <th className="px-3 py-3 text-right w-20">Δ</th>
              </tr>
            </thead>
            <tbody>
              {PLANILHA.map((r) => {
                const delta = ((r.lance - r.ref) / r.ref) * 100;
                return (
                  <tr key={r.i} className="border-t border-pleita-line">
                    <td className="px-4 py-3 pl-num text-pleita-stone-2">{r.i}</td>
                    <td className="px-4 py-3 text-pleita-ink">{r.desc}</td>
                    <td className="px-3 py-3 text-center pl-num text-xs text-pleita-stone-2">{r.un}</td>
                    <td className="px-3 py-3 text-right pl-num">{r.qt}</td>
                    <td className="px-3 py-3 text-right pl-num text-pleita-stone-2">{fmtBRL(r.ref)}</td>
                    <td className="px-3 py-3 text-right pl-num text-pleita-ink font-semibold">{fmtBRL(r.lance)}</td>
                    <td className="px-3 py-3 text-right pl-num text-pleita-ink">{fmtBRL(r.qt * r.lance)}</td>
                    <td className="px-3 py-3 text-right pl-num text-verdict-go text-xs">{delta.toFixed(1)}%</td>
                  </tr>
                );
              })}
              <tr className="bg-pleita-paper-2/40 border-t border-pleita-line">
                <td colSpan="6" className="px-4 py-3 text-right pl-num text-[11px] uppercase tracking-wider text-pleita-stone-2">Total geral</td>
                <td className="px-3 py-3 text-right font-display text-xl text-pleita-ink">{fmtBRL(totalLance)}</td>
                <td className="px-3 py-3 text-right pl-num text-verdict-go text-xs">{((1 - totalLance/totalRef) * 100).toFixed(1)}%</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="px-4 py-3 border-t border-pleita-line flex items-center justify-between">
          <button className="pl-num text-xs text-pleita-info hover:underline inline-flex items-center gap-1.5"><Icons.Plus className="size-3" /> Adicionar item</button>
          <div className="flex gap-2">
            <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line hover:bg-surface-2 inline-flex items-center gap-1.5"><Icons.Download className="size-3" /> Exportar XLSX</button>
            <button className="pl-num text-xs px-3 py-1.5 rounded-md border border-pleita-line hover:bg-surface-2">Sugerir preço · Financeiro</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PropostaStep3() {
  return (
    <div className="space-y-4">
      <div className="rounded-2xl border border-dashed border-pleita-line bg-surface-2/40 p-12 text-center">
        <div className="text-4xl mb-3">📎</div>
        <div className="text-sm text-pleita-ink font-medium">Arraste PDFs / DWG / ZIP aqui</div>
        <div className="pl-num text-[11px] text-pleita-stone-2 mt-1">Até 25MB por arquivo · pode anexar quantos quiser</div>
      </div>
      <div className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        {[
          { n: "Catálogo técnico Dell OptiPlex 7010",     tipo: "PDF",  sz: "8,4 MB", t: "há 2h" },
          { n: "Atestado Pref. Sorocaba — equipamentos",  tipo: "PDF",  sz: "1,2 MB", t: "há 1h" },
          { n: "ART nº 28191742-04 · Marcos Souza",       tipo: "PDF",  sz: "412 KB", t: "agora" },
          { n: "Manual técnico monitor LG 24MP400",       tipo: "PDF",  sz: "3,1 MB", t: "agora" },
          { n: "Layout cabeamento estruturado · CAD",     tipo: "DWG",  sz: "14,7 MB", t: "agora" },
        ].map((f, i) => (
          <div key={f.n} className={`flex items-center gap-4 px-5 py-3.5 ${i > 0 ? "border-t border-pleita-line" : ""}`}>
            <div className="size-10 rounded-md bg-pleita-paper-2 grid place-items-center">
              <Icons.FileText className="size-5 text-pleita-stone" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-sm text-pleita-ink truncate">{f.n}</div>
              <div className="pl-num text-[11px] text-pleita-stone-2">{f.tipo} · {f.sz} · {f.t}</div>
            </div>
            <button className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 hover:text-verdict-stop">Remover</button>
          </div>
        ))}
      </div>
    </div>
  );
}

function PropostaStep4() {
  const DECL = [
    ["Não emprega menor de 18 anos em trabalho noturno, perigoso ou insalubre",          "Lei 9.854/99 · art. 27, V"],
    ["Cumpre cota de aprendizes (5% do total de funcionários)",                          "Lei 10.097/00"],
    ["Não está impedida de licitar nos termos do art. 87 da Lei 8.666/93",               "Lei 8.666 · art. 87"],
    ["Não possui parentesco com servidores do órgão licitante",                          "Lei 14.133 · art. 14"],
    ["Possui condições financeiras e operacionais para cumprir o objeto",                "Lei 14.133 · art. 67"],
    ["Apresenta proposta em conformidade com edital e legislação aplicável",             "—"],
    ["Concorda com os termos do contrato modelo anexo",                                  "Anexo III"],
    ["Tem ciência de que a inadimplência implica multa e rescisão",                       "Cláusulas 9 e 10"],
    ["Os preços ofertados incluem todos os tributos, encargos e BDI",                    "—"],
    ["Vincula-se ao certame durante o prazo de validade da proposta (60 dias)",          "Art. 89"],
    ["Aceita receber comunicações por e-mail e via portal eletrônico",                   "Art. 76"],
    ["Não há fato impeditivo de habilitação",                                            "—"],
    ["Declara, sob pena de lei, que as informações são verdadeiras",                     "Lei 14.133 · art. 156"],
  ];
  return (
    <div className="space-y-4">
      <div className="rounded-md bg-verdict-caution/10 border border-verdict-caution/30 p-4 flex items-start gap-3">
        <span className="text-verdict-caution">⚠️</span>
        <p className="text-xs text-pleita-stone leading-relaxed">
          <b>Atenção:</b> declaração falsa configura crime (art. 299 do CP). Marque apenas o que efetivamente cumpre. Em caso de dúvida, consulte o Jurídico.
        </p>
      </div>
      <div className="rounded-2xl bg-surface-card border border-pleita-line overflow-hidden">
        <div className="px-5 py-3 border-b border-pleita-line bg-surface-2/40 flex items-center justify-between">
          <span className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2">13 declarações</span>
          <button className="pl-num text-xs text-pleita-info hover:underline">Marcar todas</button>
        </div>
        {DECL.map(([n, base], i) => (
          <label key={n} className={`flex items-start gap-3 px-5 py-3.5 cursor-pointer ${i > 0 ? "border-t border-pleita-line" : ""} hover:bg-surface-2/40`}>
            <input type="checkbox" defaultChecked={i < 11} className="mt-1 accent-pleita-ink size-4" />
            <div className="flex-1">
              <div className="text-sm text-pleita-ink leading-snug">{n}</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{base}</div>
            </div>
          </label>
        ))}
      </div>
    </div>
  );
}

function PropostaStep5() {
  return (
    <div className="grid lg:grid-cols-3 gap-6">
      <section className="lg:col-span-2 space-y-4">
        <div className="rounded-2xl bg-surface-card border border-pleita-line p-6">
          <h3 className="font-display text-xl text-pleita-ink leading-tight">Pronta pra enviar.</h3>
          <p className="text-sm text-pleita-stone mt-1">Confira o resumo abaixo. Depois do envio, dá pra alterar até a abertura do pregão (21 mai · 14h32).</p>
        </div>
        {[
          { n: "Identificação", ok: true,  detalhe: "Pregão 047/2026 · Pref. Campinas · Lote único · vigência 12m" },
          { n: "Planilha", ok: true, detalhe: "7 itens · total R$ 312.000 · 25% abaixo do preço de referência" },
          { n: "Anexos técnicos", ok: true, detalhe: "5 arquivos · 27,8 MB total" },
          { n: "Declarações", ok: false, detalhe: "11 de 13 marcadas — faltam 2" },
        ].map((s, i) => (
          <div key={s.n} className="rounded-xl bg-surface-card border border-pleita-line p-5 flex items-start gap-4">
            <span className={`size-9 rounded-full grid place-items-center ${s.ok ? "bg-verdict-go/15 text-verdict-go" : "bg-verdict-caution/15 text-verdict-caution"}`}>
              {s.ok ? "✓" : "!"}
            </span>
            <div className="flex-1">
              <div className="text-sm font-medium text-pleita-ink">{s.n}</div>
              <div className="pl-num text-[11px] text-pleita-stone-2 mt-0.5">{s.detalhe}</div>
            </div>
            <button className="pl-num text-xs text-pleita-info hover:underline">Editar →</button>
          </div>
        ))}
      </section>
      <aside className="space-y-4">
        <div className="rounded-2xl bg-pleita-ink text-pleita-paper p-6">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-paper/60 mb-2">Resumo financeiro</div>
          <div className="font-display text-4xl">R$ 312.000</div>
          <div className="pl-num text-xs text-pleita-paper/70 mt-1">−25% sobre preço de referência</div>
          <div className="mt-5 h-px bg-pleita-paper/20" />
          <dl className="text-sm mt-5 space-y-2">
            <div className="flex justify-between"><dt className="opacity-70">Margem estimada</dt><dd className="pl-num">18,2%</dd></div>
            <div className="flex justify-between"><dt className="opacity-70">BDI considerado</dt><dd className="pl-num">22,4%</dd></div>
            <div className="flex justify-between"><dt className="opacity-70">1º pagamento</dt><dd className="pl-num">47 dias</dd></div>
            <div className="flex justify-between"><dt className="opacity-70">Concorrência prov.</dt><dd className="pl-num">6 empresas</dd></div>
          </dl>
        </div>
        <div className="rounded-2xl bg-verdict-caution/10 border border-verdict-caution/30 p-5">
          <div className="text-verdict-caution text-lg mb-1">⚠️</div>
          <div className="text-sm font-medium text-pleita-ink">2 declarações sem marcar</div>
          <p className="pl-num text-[11px] text-pleita-stone-2 mt-2">Você precisa marcar todas as 13 antes de enviar.</p>
          <button className="mt-3 pl-num text-xs text-pleita-info hover:underline">Voltar ao passo 4 →</button>
        </div>
      </aside>
    </div>
  );
}

function ScreenProposta({ beginnerMode, setBeginnerMode }) {
  const [step, setStep] = React.useState(0);
  const [navOpen, setNavOpen] = React.useState(false);
  const Active = [PropostaStep1, PropostaStep2, PropostaStep3, PropostaStep4, PropostaStep5][step];

  return (
    <div className="h-full flex bg-pleita-paper">
      <Sidebar beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="editais" mobileOpen={navOpen} onCloseMobile={() => setNavOpen(false)} />
      <div className="flex-1 flex flex-col min-w-0">
        <Topbar crumb={["Editais", "Aquisição equip. TI", "Montar proposta"]} onOpenMobileNav={() => setNavOpen(true)} />
        <main className="flex-1 overflow-y-auto scrollbar-pl pb-24">
          <div className="max-w-7xl mx-auto px-4 md:px-8 py-8">
            {/* Steps header */}
            <div className="mb-8">
              <div className="pl-num text-[11px] uppercase tracking-[0.18em] text-pleita-stone-2">Edital EDT-2026-04-A1B2</div>
              <h1 className="font-display text-2xl md:text-3xl text-pleita-ink mt-1 leading-tight">{PROPOSTA_STEPS[step].n}<span className="text-pleita-lime">.</span></h1>
              <p className="text-sm text-pleita-stone mt-1">{PROPOSTA_STEPS[step].d}</p>
              <div className="flex items-center gap-1 mt-5 overflow-x-auto scrollbar-pl">
                {PROPOSTA_STEPS.map((s, i) => {
                  const isCurrent = i === step;
                  const isDone = i < step;
                  return (
                    <React.Fragment key={s.id}>
                      <button
                        onClick={() => setStep(i)}
                        className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full pl-num text-[11px] uppercase tracking-wider whitespace-nowrap transition-colors ${
                          isCurrent ? "bg-pleita-ink text-pleita-paper" :
                          isDone ? "bg-pleita-lime/30 text-pleita-ink" :
                          "bg-surface-2 text-pleita-stone-2 hover:text-pleita-ink"
                        }`}
                      >
                        <span>{isDone ? "✓" : i + 1}</span>{s.n}
                      </button>
                      {i < PROPOSTA_STEPS.length - 1 && <span className="text-pleita-line">·</span>}
                    </React.Fragment>
                  );
                })}
              </div>
            </div>
            <Active />
          </div>
        </main>
        <footer className="border-t border-pleita-line bg-surface-1/95 backdrop-blur sticky bottom-0">
          <div className="max-w-7xl mx-auto px-4 md:px-8 py-3 flex items-center justify-between gap-4">
            <button onClick={() => setStep(Math.max(0, step - 1))} disabled={step === 0} className="pl-num text-sm text-pleita-stone-2 hover:text-pleita-ink disabled:opacity-30 inline-flex items-center gap-2">
              <Icons.ChevronRight className="size-4 rotate-180" /> Anterior
            </button>
            <div className="pl-num text-[11px] uppercase tracking-wider text-pleita-stone-2 hidden md:block">
              Passo {step + 1} de {PROPOSTA_STEPS.length} · auto-salvo há 4s
            </div>
            {step === PROPOSTA_STEPS.length - 1 ? (
              <PleitaButton variant="lime" size="lg">Enviar ao órgão <Icons.ArrowUpRight className="size-4" /></PleitaButton>
            ) : (
              <PleitaButton variant="ink" onClick={() => setStep(Math.min(step + 1, PROPOSTA_STEPS.length - 1))}>Próximo <Icons.ChevronRight className="size-4" /></PleitaButton>
            )}
          </div>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenProposta });