// ===== App screens =====

function AppFrame({ children, beginnerMode, setBeginnerMode, active, crumb }) {
  const [mobileNavOpen, setMobileNavOpen] = React.useState(false);
  return (
    <div className="flex h-full relative">
      {/* Mobile backdrop */}
      {mobileNavOpen && (
        <button
          onClick={() => setMobileNavOpen(false)}
          aria-label="Fechar menu"
          className="md:hidden fixed inset-0 z-30 bg-pleita-ink/40 backdrop-blur-sm"
        />
      )}
      <Sidebar
        beginnerMode={beginnerMode}
        setBeginnerMode={setBeginnerMode}
        active={active}
        mobileOpen={mobileNavOpen}
        onCloseMobile={() => setMobileNavOpen(false)}
      />
      <div className="flex-1 flex flex-col min-w-0">
        <Topbar crumb={crumb} onOpenMobileNav={() => setMobileNavOpen(true)} />
        <main className="flex-1 overflow-y-auto scrollbar-pl">
          <div className="max-w-[1400px] mx-auto px-4 sm:px-6 md:px-10 py-6 md:py-8">{children}</div>
        </main>
      </div>
    </div>
  );
}

function ScreenEditais({ onOpen, beginnerMode, setBeginnerMode }) {
  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="editais" crumb={["Pleita", beginnerMode ? "Oportunidades" : "Editais"]}>
      {beginnerMode && (
        <div className="mb-6 rounded-[10px] border border-pleita-lime/40 bg-pleita-lime/15 p-5 flex items-start gap-4 shadow-pl-sm">
          <div className="size-12 rounded-full bg-pleita-lime grid place-items-center text-2xl shrink-0">🎓</div>
          <div className="flex-1 min-w-0">
            <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-ink/70 mb-1">Coach · oi de novo!</div>
            <p className="text-sm text-pleita-ink leading-relaxed">
              <strong>Cada linha abaixo é uma oportunidade de venda pro governo.</strong> O número à direita (de 0 a 100) é o quanto faz sentido pra sua empresa. <span className="text-pleita-ink/80">Comece pelas verdinhas 🟢.</span>
            </p>
          </div>
          <button onClick={() => setBeginnerMode(false)} className="pl-num text-[10px] uppercase tracking-wider text-pleita-ink/60 hover:text-pleita-ink whitespace-nowrap">desativar →</button>
        </div>
      )}
      <SectionHeader
        eyebrow={beginnerMode ? "🔎 Oportunidades pra você" : "📡 Editais"}
        title={beginnerMode ? "28 boas oportunidades hoje" : "312 editais hoje · 28 dão match com sua empresa"}
        description={beginnerMode
          ? "Nossos robôs vasculham o governo o tempo todo. Estas aqui são as que combinam com o que você vende."
          : "Filtros: SP, MG, RJ · pregão e concorrência · valor ≥ R$ 100k. O Caça-Editais varre a cada 15 minutos."}
        actions={<>
          <PleitaButton variant="ghost" size="sm"><Icons.Filter className="size-4" />Filtros</PleitaButton>
          <PleitaButton variant="ghost" size="sm"><Icons.Download className="size-4" />Exportar</PleitaButton>
        </>}
      />
      <div className="rounded-2xl bg-surface-card border border-pleita-line shadow-pl-sm overflow-hidden">
        <div className="grid grid-cols-12 px-5 py-3 border-b border-pleita-line bg-surface-2/50 pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2">
          <div className="col-span-2">Veredito</div>
          <div className="col-span-4">Edital · Objeto</div>
          <div className="col-span-2">Órgão · UF</div>
          <div className="col-span-1 text-right">Valor</div>
          <div className="col-span-1 text-right">Abertura</div>
          <div className="col-span-1 text-right">Match</div>
          <div className="col-span-1 text-right">Ação</div>
        </div>
        <ul className="divide-y divide-pleita-line">
          {EDITAIS.map((e) => (
            <li key={e.id}>
              <button
                onClick={() => onOpen(e)}
                className="w-full grid grid-cols-12 px-5 py-4 items-center hover:bg-surface-2/40 transition-colors text-left group"
              >
                <div className="col-span-2"><VerdictBadge verdict={e.verdict} size="sm" /></div>
                <div className="col-span-4 min-w-0 pr-4">
                  <div className="pl-num text-[11px] text-pleita-stone-2">{e.id} · {e.modalidade}</div>
                  <div className="text-sm text-pleita-ink truncate font-medium">{e.objeto}</div>
                </div>
                <div className="col-span-2 min-w-0 pr-4">
                  <div className="text-sm text-pleita-stone truncate">{e.orgao}</div>
                  <div className="pl-num text-[11px] text-pleita-stone-2">{e.uf}</div>
                </div>
                <div className="col-span-1 text-right pl-num text-sm text-pleita-ink">{fmtBRL(e.valor)}</div>
                <div className="col-span-1 text-right pl-num text-sm text-pleita-stone">{fmtDate(e.abertura)}</div>
                <div className="col-span-1 text-right pl-num text-sm">
                  <span className={e.match >= 80 ? "text-verdict-go" : e.match >= 60 ? "text-verdict-caution" : "text-verdict-stop"}>{e.match}</span>
                  <span className="text-pleita-stone-2 text-xs">/100</span>
                </div>
                <div className="col-span-1 flex justify-end">
                  <Icons.ArrowUpRight className="size-4 text-pleita-stone-2 group-hover:text-pleita-ink" />
                </div>
              </button>
            </li>
          ))}
        </ul>
      </div>
    </AppFrame>
  );
}

function ScreenEditalDetail({ edital, onBack, beginnerMode, setBeginnerMode }) {
  const e = edital ?? EDITAIS[0];
  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="editais" crumb={["Pleita", "Editais", e.id]}>
      <button onClick={onBack} className="pl-num text-xs text-pleita-stone-2 hover:text-pleita-ink mb-4">← voltar para a lista</button>
      <div className="grid grid-cols-12 gap-6">
        <div className="col-span-12 xl:col-span-8 space-y-6">
          <header className="rounded-2xl bg-surface-card border border-pleita-line p-7">
            <div className="flex items-start justify-between gap-4 flex-wrap">
              <div className="min-w-0">
                <div className="pl-num text-[11px] uppercase tracking-[0.14em] text-pleita-stone-2 mb-2">{e.id} · {e.modalidade}</div>
                <h1 className="font-display font-medium text-2xl md:text-3xl text-pleita-ink leading-tight">{e.objeto}</h1>
              </div>
              <VerdictBadge verdict={e.verdict} size="lg" />
            </div>
            <dl className="mt-7 grid grid-cols-2 md:grid-cols-4 gap-6">
              {[
                { i: Icons.Building2,     l: "Órgão",          v: `${e.orgao} · ${e.uf}` },
                { i: Icons.Coins,         l: "Valor estimado", v: fmtBRL(e.valor), mono: true },
                { i: Icons.CalendarClock, l: "Abertura",       v: fmtDate(e.abertura), mono: true },
                { i: Icons.FileText,      l: "Match score",    v: `${e.match}/100`, mono: true, accent: e.match >= 80 ? "text-verdict-go" : e.match >= 60 ? "text-verdict-caution" : "text-verdict-stop" },
              ].map((m) => (
                <div key={m.l}>
                  <div className="flex items-center gap-2 pl-num text-[10px] uppercase tracking-[0.14em] text-pleita-stone-2"><m.i className="size-3.5" />{m.l}</div>
                  <div className={`mt-1.5 text-pleita-ink text-base ${m.mono ? "pl-num font-semibold" : "font-display font-medium"} ${m.accent ?? ""}`}>{m.v}</div>
                </div>
              ))}
            </dl>
          </header>

          {/* Coach hero */}
          <section className="rounded-2xl bg-pleita-ink text-pleita-paper p-8 md:p-10 relative overflow-hidden">
            <div aria-hidden className="absolute -right-16 -top-16 size-64 rounded-full" style={{ background: "rgb(159 232 112 / 0.15)" }} />
            <div className="grid md:grid-cols-12 gap-8 items-center relative">
              <div className="md:col-span-5 flex justify-center"><VerdictHero verdict={e.verdict} diameter={130} /></div>
              <div className="md:col-span-7">
                <div className="pl-num text-[11px] uppercase tracking-[0.14em] text-pleita-lime mb-3">🎓 Coach · resumo</div>
                <h2 className="font-display font-medium text-xl md:text-2xl text-pleita-paper leading-snug">
                  {e.verdict === "go" && "Vai com a Pleita. Esse edital é seu."}
                  {e.verdict === "caution" && "Dá pra participar, mas com ressalvas claras."}
                  {e.verdict === "stop" && "Não vale o risco — aqui está o porquê."}
                </h2>
                <ol className="mt-5 space-y-2 text-sm text-pleita-paper/85">
                  <li><span className="pl-num text-pleita-lime">1.</span> Match {e.match}/100 — sua empresa atende {Math.round(e.match * 0.92)}% dos requisitos técnicos.</li>
                  <li><span className="pl-num text-pleita-lime">2.</span> Margem estimada {e.verdict === "go" ? "+18%" : e.verdict === "caution" ? "+6%" : "−4%"} considerando BDI atual.</li>
                  <li><span className="pl-num text-pleita-lime">3.</span> {e.verdict === "stop" ? "Cláusula 12.4 restringe ME/EPP — risco de inabilitação." : "Habilitação completa: documentação válida no cofre."}</li>
                </ol>
              </div>
            </div>
          </section>

          <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <AgentCard agentKey="hunter"  score={94} compact />
            <AgentCard agentKey="analyst" score={88} compact />
            <AgentCard agentKey="legal"   score={e.verdict === "stop" ? 42 : 91} compact />
            <AgentCard agentKey="finance" score={e.verdict === "stop" ? 38 : 86} compact />
            <AgentCard agentKey="docs"    score={97} compact />
          </section>
        </div>

        <aside className="col-span-12 xl:col-span-4 space-y-3">
          <div className="rounded-2xl bg-surface-card border border-pleita-line p-5">
            <div className="flex items-center justify-between">
              <h3 className="font-display font-medium text-pleita-ink">Pergunte a um agente</h3>
            </div>
            <div className="flex flex-wrap gap-1.5 mt-4">
              {Object.values(AGENTS).map((a) => (
                <button key={a.key} className="text-xs px-2.5 py-1.5 rounded-full bg-surface-2 hover:bg-pleita-paper-2/60 text-pleita-ink transition-colors">
                  <span className="mr-1">{a.emoji}</span>{a.name}
                </button>
              ))}
            </div>
            <div className="mt-5 space-y-3">
              <div className="flex">
                <div className="max-w-[85%] rounded-2xl rounded-bl-md px-3.5 py-2.5 text-sm bg-surface-2 text-pleita-ink">
                  <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-1">🎓 Coach</div>
                  Quer que eu detalhe a margem de {e.verdict === "go" ? "+18%" : "+6%"}? Posso simular variações de BDI.
                </div>
              </div>
              <div className="flex justify-end">
                <div className="max-w-[85%] rounded-2xl rounded-br-md px-3.5 py-2.5 text-sm bg-pleita-ink text-pleita-paper">
                  Quais documentos preciso renovar?
                </div>
              </div>
            </div>
            <div className="mt-4 flex items-center gap-2 rounded-full border border-pleita-line bg-surface-2/40 px-3 py-2">
              <input placeholder="Pergunte ao Coach…" className="flex-1 bg-transparent outline-none text-sm placeholder:text-pleita-stone-2/70" />
              <button className="size-7 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center text-xs">↵</button>
            </div>
          </div>

          <div className="flex flex-col gap-2">
            <PleitaButton size="lg" className="w-full"><Icons.Bookmark className="size-4" />Decidir participar</PleitaButton>
            <PleitaButton size="md" variant="ghost" className="w-full"><Icons.X className="size-4" />Marcar como descartado</PleitaButton>
          </div>
        </aside>
      </div>
    </AppFrame>
  );
}

function ScreenKanban({ beginnerMode, setBeginnerMode }) {
  const [cards, setCards] = React.useState(KANBAN_SEED);
  const [draggingId, setDraggingId] = React.useState(null);
  const [overStage, setOverStage] = React.useState(null);

  const STAGES = [
    { id: "avaliando",     label: "Avaliando",     tone: "bg-surface-2 text-pleita-stone-2" },
    { id: "decidindo",     label: "Decidindo",     tone: "bg-verdict-caution/15 text-verdict-caution" },
    { id: "participando",  label: "Participando",  tone: "bg-pleita-info/10 text-pleita-info" },
    { id: "ganho",         label: "Ganho",         tone: "bg-verdict-go/15 text-verdict-go" },
    { id: "perdido",       label: "Perdido",       tone: "bg-verdict-stop/10 text-verdict-stop" },
  ];

  const onDrop = (target) => {
    if (!draggingId) return;
    setCards((prev) => prev.map((c) => (c.id === draggingId ? { ...c, stage: target } : c)));
    setDraggingId(null); setOverStage(null);
  };

  return (
    <AppFrame beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="matches" crumb={["Pleita", "Kanban"]}>
      <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">🎯 Kanban</div>
          <h1 className="font-display font-medium text-3xl text-pleita-ink leading-tight">CRM de licitações</h1>
          <p className="text-sm text-pleita-stone mt-2 max-w-xl">Arraste para mover entre estágios.</p>
        </div>
      </header>

      <div className="flex md:hidden gap-1.5 mb-3 overflow-x-auto scrollbar-pl pb-1">
        {STAGES.map((s) => {
          const c = cards.filter((x) => x.stage === s.id).length;
          return (
            <span key={s.id} className={`pl-num text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-full font-semibold whitespace-nowrap ${s.tone}`}>{s.label} · {c}</span>
          );
        })}
      </div>

      <div className="md:hidden flex gap-3 overflow-x-auto scrollbar-pl -mx-4 px-4 pb-2 snap-x snap-mandatory">
        {STAGES.map((s) => {
          const list = cards.filter((c) => c.stage === s.id);
          const sum = list.reduce((n, c) => n + c.valor, 0);
          return (
            <div key={s.id} className="snap-start shrink-0 w-[280px] rounded-2xl border border-pleita-line bg-surface-2/40">
              <header className="px-4 pt-4 pb-3 flex items-center justify-between">
                <span className={`pl-num text-[10px] uppercase tracking-wider px-2 py-1 rounded-full font-semibold ${s.tone}`}>{s.label}</span>
                <span className="pl-num text-[11px] text-pleita-stone-2">{fmtBRL(sum)}</span>
              </header>
              <ul className="px-2 pb-3 space-y-2 min-h-[120px]">
                {list.map((c) => (
                  <li key={c.id} className="rounded-xl bg-surface-card border border-pleita-line p-3">
                    <div className="pl-num text-[10px] text-pleita-stone-2">{c.id}</div>
                    <div className="text-sm text-pleita-ink leading-snug font-medium mt-0.5">{c.title}</div>
                    <div className="pl-num text-[11px] text-pleita-stone-2 mt-1 truncate">{c.orgao}</div>
                    <div className="flex items-center justify-between mt-2">
                      <span className="pl-num text-xs text-pleita-ink">{fmtBRL(c.valor)}</span>
                      {c.verdict && <VerdictBadge verdict={c.verdict} size="sm" hideEmoji />}
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>

      <div className="hidden md:grid grid-cols-2 xl:grid-cols-5 gap-4">
        {STAGES.map((s) => {
          const list = cards.filter((c) => c.stage === s.id);
          const sum = list.reduce((n, c) => n + c.valor, 0);
          const isOver = overStage === s.id;
          return (
            <div
              key={s.id}
              onDragOver={(ev) => { ev.preventDefault(); setOverStage(s.id); }}
              onDragLeave={() => setOverStage((x) => (x === s.id ? null : x))}
              onDrop={() => onDrop(s.id)}
              className={`rounded-2xl border bg-surface-2/40 transition-colors ${isOver ? "border-pleita-lime bg-pleita-lime/10" : "border-pleita-line"}`}
            >
              <header className="px-4 pt-4 pb-3 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span className={`pl-num text-[10px] uppercase tracking-[0.14em] px-2 py-1 rounded-full font-semibold ${s.tone}`}>{s.label}</span>
                  <span className="pl-num text-xs text-pleita-stone-2">{list.length}</span>
                </div>
                <span className="pl-num text-[11px] text-pleita-stone-2">{fmtBRL(sum)}</span>
              </header>
              <ul className="px-2 pb-2 space-y-2 min-h-[120px]">
                {list.map((c) => (
                  <li
                    key={c.id}
                    draggable
                    onDragStart={() => setDraggingId(c.id)}
                    onDragEnd={() => setDraggingId(null)}
                    className={`rounded-xl bg-surface-card border border-pleita-line p-3 cursor-grab active:cursor-grabbing transition-all hover:shadow-pl-md ${draggingId === c.id ? "opacity-40" : ""}`}
                  >
                    <div className="flex items-start gap-2">
                      <Icons.GripVertical className="size-4 text-pleita-stone-2/50 shrink-0 mt-0.5" />
                      <div className="flex-1 min-w-0">
                        <div className="pl-num text-[10px] text-pleita-stone-2">{c.id}</div>
                        <div className="text-sm text-pleita-ink leading-snug font-medium mt-0.5 line-clamp-2">{c.title}</div>
                        <div className="pl-num text-[11px] text-pleita-stone-2 mt-1 truncate">{c.orgao}</div>
                        <div className="flex items-center justify-between mt-3">
                          <span className="pl-num text-xs text-pleita-ink">{fmtBRL(c.valor)}</span>
                          {c.verdict && <VerdictBadge verdict={c.verdict} size="sm" hideEmoji />}
                        </div>
                        <div className="flex items-center justify-between mt-2">
                          <span className="pl-num text-[10px] text-pleita-stone-2">abre {fmtDate(c.abertura)}</span>
                          <span className="size-6 rounded-full bg-pleita-ink text-pleita-paper grid place-items-center pl-num text-[10px] font-semibold">{c.owner}</span>
                        </div>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </AppFrame>
  );
}

Object.assign(window, { ScreenEditais, ScreenEditalDetail, ScreenKanban });