// ===== Integrações · canais e APIs =====

const CHANNELS = [
  {
    id: "whatsapp", n: "WhatsApp Business", emoji: "💬", desc: "Receba avisos críticos pelo número da sua empresa.",
    connected: true, status: "ok", meta: "+55 19 99812-4477 · há 142 dias",
    events: [
      ["Edital novo bate o match",     true],
      ["Cláusula abusiva detectada",   true],
      ["Documento prestes a vencer",   true],
      ["Pregão começa em 1h",          true],
      ["Resumo diário às 9h",          false],
    ],
  },
  {
    id: "email", n: "E-mail", emoji: "📧", desc: "Notificações por SMTP. Templates customizáveis.",
    connected: true, status: "ok", meta: "marcos@souzaeng.com.br + 4 destinatários",
    events: [
      ["Resumo semanal de oportunidades", true],
      ["Pregão arrematado (parabéns)",    true],
      ["Fatura emitida",                  true],
      ["Convite pra equipe",              true],
      ["Tudo · firehose",                 false],
    ],
  },
  {
    id: "slack", n: "Slack", emoji: "#", desc: "Notificações no canal #licitacoes. Bot da Pleita.",
    connected: false, status: "off", meta: "não conectado",
    events: [],
  },
  {
    id: "teams", n: "Microsoft Teams", emoji: "🎯", desc: "Card adaptativo dentro do Teams.",
    connected: false, status: "off", meta: "não conectado",
    events: [],
  },
  {
    id: "webhook", n: "Webhook genérico", emoji: "🔗", desc: "POST JSON para sua URL · eventos em tempo real.",
    connected: true, status: "warn", meta: "https://api.souzaeng.com.br/pleita-hook · falhou 2× nas últimas 24h",
    events: [
      ["edital.matched",         true],
      ["pregao.opened",          true],
      ["pregao.bid",             true],
      ["pregao.won",             true],
      ["document.expiring",      true],
      ["plan.invoice_issued",    false],
    ],
  },
  {
    id: "api", n: "API REST", emoji: "🔑", desc: "Acesso programático · 2 chaves ativas.",
    connected: true, status: "ok", meta: "2 chaves · 14.2k requests no mês",
    events: [],
  },
  {
    id: "contabil", n: "Sistema contábil", emoji: "📊", desc: "Conecta com Domínio, Alterdata, Contmatic.",
    connected: false, status: "off", meta: "não conectado",
    events: [],
  },
  {
    id: "openf", n: "Open Finance", emoji: "🏦", desc: "Acessa saldo bancário pra simular fluxo de caixa.",
    connected: false, status: "off", meta: "não conectado",
    events: [],
  },
];

const STATUS_COLOR = { ok: "verdict-go", warn: "verdict-caution", off: "pleita-stone-2" };

function ChannelCard({ c, expanded, onToggle }) {
  return (
    <div className={`rounded-2xl border transition-shadow ${c.connected ? "border-pleita-line bg-surface-card shadow-pl-sm" : "border-dashed border-pleita-line bg-surface-2/30"}`}>
      <button onClick={onToggle} className="w-full text-left p-5 flex items-start gap-4">
        <div className={`size-12 rounded-xl grid place-items-center text-2xl shrink-0 ${c.connected ? "bg-pleita-paper-2" : "bg-surface-2"}`}>{c.emoji}</div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-3 flex-wrap">
            <div className="font-display text-base text-pleita-ink">{c.n}</div>
            <span className={`pl-num text-[10px] uppercase tracking-wider px-2 py-0.5 rounded font-semibold bg-${STATUS_COLOR[c.status]}/15 text-${STATUS_COLOR[c.status]}`}>
              {c.status === "ok" ? "ativo" : c.status === "warn" ? "atenção" : "desligado"}
            </span>
          </div>
          <div className="text-xs text-pleita-stone-2 mt-1 leading-relaxed">{c.desc}</div>
          <div className="pl-num text-[11px] text-pleita-stone-2 mt-2">{c.meta}</div>
        </div>
        <div className="shrink-0 mt-1">
          {c.connected ? (
            <Icons.ChevronDown className={`size-4 text-pleita-stone-2 transition-transform ${expanded ? "rotate-180" : ""}`} />
          ) : (
            <PleitaButton variant="ink" size="sm">Conectar</PleitaButton>
          )}
        </div>
      </button>

      {expanded && c.events.length > 0 && (
        <div className="px-5 pb-5 pt-2 border-t border-pleita-line bg-surface-2/30">
          <div className="pl-num text-[10px] uppercase tracking-wider text-pleita-stone-2 mb-3 mt-3">Eventos enviados</div>
          {c.events.map(([n, on]) => (
            <label key={n} className="flex items-center justify-between py-2 cursor-pointer">
              <span className="text-sm text-pleita-ink">{n}</span>
              <span className="relative inline-block">
                <input type="checkbox" defaultChecked={on} className="sr-only peer" />
                <span className="block w-9 h-5 rounded-full bg-pleita-line peer-checked:bg-pleita-ink transition-colors" />
                <span className={`absolute top-0.5 size-4 rounded-full bg-white transition-transform ${on ? "translate-x-4" : "translate-x-0.5"}`} />
              </span>
            </label>
          ))}
          <div className="mt-4 flex justify-between items-center">
            <button className="pl-num text-xs text-pleita-stone-2 hover:text-verdict-stop">Desconectar</button>
            <button className="pl-num text-xs text-pleita-info hover:underline">Testar envio →</button>
          </div>
        </div>
      )}
    </div>
  );
}

function ScreenIntegracoes({ beginnerMode, setBeginnerMode }) {
  const [expanded, setExpanded] = React.useState(null);
  const [navOpen, setNavOpen] = React.useState(false);

  const connected = CHANNELS.filter((c) => c.connected);
  const available = CHANNELS.filter((c) => !c.connected);

  return (
    <div className="h-full flex bg-pleita-paper">
      <Sidebar beginnerMode={beginnerMode} setBeginnerMode={setBeginnerMode} active="config" mobileOpen={navOpen} onCloseMobile={() => setNavOpen(false)} />
      <div className="flex-1 flex flex-col min-w-0">
        <Topbar crumb={["Configurações", "Integrações"]} onOpenMobileNav={() => setNavOpen(true)} />
        <main className="flex-1 overflow-y-auto scrollbar-pl">
          <div className="max-w-6xl mx-auto px-4 md:px-8 py-8">
            <SectionHeader
              eyebrow="Integrações"
              title="Onde a Pleita também te avisa"
              description="Conecte os canais e sistemas que você já usa — WhatsApp, Slack, contábil, sua API."
            />

            <section className="mb-10">
              <div className="flex items-center justify-between mb-4">
                <h2 className="font-display text-lg text-pleita-ink">{connected.length} canais ativos</h2>
                <button className="pl-num text-xs text-pleita-info hover:underline">Ver histórico de envios →</button>
              </div>
              <div className="grid md:grid-cols-2 gap-4">
                {connected.map((c) => (
                  <ChannelCard key={c.id} c={c} expanded={expanded === c.id} onToggle={() => setExpanded(expanded === c.id ? null : c.id)} />
                ))}
              </div>
            </section>

            <section>
              <h2 className="font-display text-lg text-pleita-ink mb-4">Disponíveis</h2>
              <div className="grid md:grid-cols-2 gap-4">
                {available.map((c) => (
                  <ChannelCard key={c.id} c={c} expanded={false} onToggle={() => {}} />
                ))}
              </div>
            </section>

            {/* API keys panel */}
            <section className="mt-10 rounded-2xl bg-pleita-ink text-pleita-paper p-6 md:p-8">
              <div className="flex items-start gap-6 flex-wrap">
                <div className="flex-1 min-w-[280px]">
                  <div className="pl-num text-[10px] uppercase tracking-[0.18em] text-pleita-paper/60">Para desenvolvedores</div>
                  <h3 className="font-display text-2xl mt-2">API REST e Webhooks</h3>
                  <p className="text-sm text-pleita-paper/70 mt-2 leading-relaxed max-w-md">
                    Integre a Pleita com seu ERP, seu CRM ou suas planilhas. Documentação completa, rate limit 1.000 req/min.
                  </p>
                  <div className="flex gap-2 mt-5">
                    <PleitaButton variant="lime" size="sm">Gerar nova chave</PleitaButton>
                    <button className="pl-num text-xs px-3 py-2 rounded-md border border-pleita-paper/20 hover:bg-pleita-paper/10">Ler docs →</button>
                  </div>
                </div>
                <div className="font-mono text-[11px] bg-pleita-paper/5 border border-pleita-paper/15 rounded-xl p-5 max-w-md flex-1">
                  <div className="text-pleita-paper/50 mb-2">$ curl -X POST</div>
                  <div className="text-pleita-paper">  https://api.pleita.com.br/v1/editais</div>
                  <div className="text-pleita-paper/70">  -H "Authorization: Bearer <span className="text-pleita-lime">pl_live_...</span>"</div>
                  <div className="text-pleita-paper/70">  -H "Content-Type: application/json"</div>
                </div>
              </div>
            </section>
          </div>
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenIntegracoes });