/* global React, SEQ_UI, SEQ_LAYOUT */
const { brl } = window.SEQ_UI;
const { PageHead, SectLabel, Pill } = window.SEQ_LAYOUT;

function Integracoes() {
  const [tab, setTab] = React.useState("integracoes");

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead num="15" label="INTEGRAÇÕES & API" title="Conecte o que" em="já existe."
        actions={(<>
          <a href="#/landing" className="kp-btn kp-btn-sm">Docs da API ↗</a>
          <button className="kp-btn kp-btn-sm kp-btn-ink">+ Nova chave</button>
        </>)}
      />
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px" }}>
        <div style={{ display: "flex", gap: 4, marginBottom: 22, borderBottom: "1.5px solid var(--kp-ink)" }}>
          {[
            { id: "integracoes", l: "Integrações" },
            { id: "webhooks", l: "Webhooks" },
            { id: "api", l: "API & SDKs" },
            { id: "logs", l: "Logs" },
          ].map(t => (
            <button key={t.id} onClick={()=>setTab(t.id)} style={{
              padding: "10px 18px", border: "1.5px solid var(--kp-ink)", marginBottom: -1.5,
              background: tab === t.id ? "var(--kp-paper)" : "var(--kp-soft)",
              color: "var(--kp-ink)", cursor: "pointer",
              fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
              fontWeight: tab === t.id ? 600 : 400,
            }}>{t.l}</button>
          ))}
        </div>

        {tab === "integracoes" && <Integrations/>}
        {tab === "webhooks" && <Webhooks/>}
        {tab === "api" && <ApiPanel/>}
        {tab === "logs" && <Logs/>}
      </div>
    </div>
  );
}

const APPS = [
  { cat: "Email & Marketing", items: [
    { n: "Mailchimp", d: "Sync de assinantes pra listas e tags", c: "var(--kp-yellow)", l: "M", on: true },
    { n: "ActiveCampaign", d: "Automações + tags por evento", c: "var(--kp-cold)", l: "AC", on: false },
    { n: "Resend", d: "Emails transacionais customizáveis", c: "var(--kp-ink)", l: "R", on: true },
    { n: "ConvertKit", d: "Sequências automatizadas", c: "var(--kp-pink)", l: "CK", on: false },
  ]},
  { cat: "Pagamentos & ERP", items: [
    { n: "Stripe", d: "Cartões internacionais USD/EUR", c: "var(--kp-cold)", l: "S", on: true, badge: "POPULAR" },
    { n: "Asaas", d: "PIX, boleto, cartão BR", c: "var(--kp-green)", l: "A", on: true },
    { n: "Conta Azul", d: "Notas fiscais automáticas", c: "var(--kp-pink-soft)", l: "CA", on: false },
    { n: "Omie", d: "Sync com seu ERP", c: "var(--kp-yellow)", l: "O", on: false },
  ]},
  { cat: "Comunidade & Conteúdo", items: [
    { n: "Discord", d: "Acesso automático a roles VIP", c: "#5865F2", l: "D", on: true },
    { n: "Circle", d: "Liberação de espaços por plano", c: "var(--kp-pink)", l: "C", on: false },
    { n: "Notion", d: "Páginas privadas por assinatura", c: "var(--kp-soft)", l: "N", on: true },
    { n: "Vimeo", d: "Vídeos protegidos por login", c: "var(--kp-cold)", l: "V", on: false },
  ]},
  { cat: "Analytics & Tracking", items: [
    { n: "Google Analytics", d: "Eventos GA4 automáticos", c: "var(--kp-warm)", l: "GA", on: true },
    { n: "Meta Pixel", d: "Conversão API server-side", c: "#1877F2", l: "M", on: true },
    { n: "Hotjar", d: "Heatmaps de checkout", c: "var(--kp-pink)", l: "H", on: false },
    { n: "Zapier", d: "10.000+ apps via Zaps", c: "#FF4A00", l: "Z", on: true, badge: "POPULAR" },
  ]},
];

function providerKey(name) {
  const map = {
    "Mailchimp": "mailchimp",
    "ActiveCampaign": "activecampaign",
    "Resend": "resend",
    "ConvertKit": "convertkit",
    "Stripe": "stripe",
    "Asaas": "asaas",
    "Conta Azul": "contaazul",
    "Omie": "omie",
    "Discord": "discord",
    "Circle": "circle",
    "Notion": "notion",
    "Vimeo": "vimeo",
    "Google Analytics": "google_analytics",
    "Meta Pixel": "meta_pixel",
    "Hotjar": "hotjar",
    "Zapier": "zapier",
  };
  return map[name] || name.toLowerCase();
}

function Integrations() {
  const [statuses, setStatuses] = React.useState({});
  const [busy, setBusy] = React.useState(null);

  React.useEffect(() => {
    window.SEQ_API.listIntegrations()
      .then(d => {
        const m = {};
        for (const i of d.integrations || []) m[i.provider] = i.status === "connected";
        setStatuses(m);
      })
      .catch(() => {});
  }, []);

  async function toggle(provider, currentlyOn) {
    setBusy(provider);
    const newStatus = currentlyOn ? "disconnected" : "connected";
    try {
      await window.SEQ_API.updateIntegration(provider, { status: newStatus });
      setStatuses(prev => ({ ...prev, [provider]: !currentlyOn }));
    } catch (err) {
      console.error("integration toggle failed", err);
    } finally {
      setBusy(null);
    }
  }

  const groups = APPS.map(g => ({
    ...g,
    items: g.items.map(it => {
      const provider = providerKey(it.n);
      const live = provider in statuses ? statuses[provider] : it.on;
      return { ...it, provider, on: live, busy: busy === provider };
    }),
  }));
  return (
    <>
      <div className="kp-card" style={{ padding: 22, marginBottom: 22, background: "var(--kp-pink-soft)", display: "grid", gridTemplateColumns: "1fr auto", gap: 16, alignItems: "center" }}>
        <div>
          <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>NÃO ENCONTROU?</div>
          <h3 className="kp-display" style={{ fontSize: 26, lineHeight: 1.1, margin: "4px 0 0" }}>Tudo conecta via <em>Zapier</em> ou <em>API</em>.</h3>
          <div style={{ fontSize: 12.5, color: "var(--kp-muted)", marginTop: 4 }}>Mais de 10.000 apps disponíveis. Ou monte uma integração custom em 5min.</div>
        </div>
        <button className="kp-btn kp-btn-ink">Ver biblioteca →</button>
      </div>

      {groups.map((group, gIdx) => (
        <div key={group.cat} style={{ marginBottom: 26 }}>
          <SectLabel num={String(gIdx+1).padStart(2,"0")} label={group.cat}/>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px,1fr))", gap: 12 }}>
            {group.items.map(app => (
              <div key={app.n} className="kp-card" style={{ padding: 16, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "center" }}>
                <div style={{ width: 44, height: 44, background: app.c, border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--kp-display)", fontSize: 18, fontStyle: "italic", color: app.c === "var(--kp-ink)" || app.c.startsWith("#") ? "var(--kp-paper)" : "var(--kp-ink)" }}>{app.l}</div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                    <span style={{ fontSize: 13.5, fontWeight: 500 }}>{app.n}</span>
                    {app.badge && <Pill bg="var(--kp-pink)">{app.badge}</Pill>}
                  </div>
                  <div style={{ fontSize: 11.5, color: "var(--kp-muted)", marginTop: 2, lineHeight: 1.3 }}>{app.d}</div>
                </div>
                <button onClick={() => toggle(app.provider, app.on)} disabled={app.busy} className={"kp-btn kp-btn-sm" + (app.on ? " kp-btn-green" : "")}>{app.busy ? "..." : app.on ? "Conectado" : "Conectar"}</button>
              </div>
            ))}
          </div>
        </div>
      ))}
    </>
  );
}

function Webhooks() {
  const hooks = [
    { url: "https://hooks.slack.com/services/T0/B0/abc…", e: ["payment.confirmed", "subscription.created"], s: "ativo" },
    { url: "https://api.notion.com/v1/pages/sequencia-crm", e: ["customer.created"], s: "ativo" },
    { url: "https://flow.example.com/seq?token=xyz", e: ["proposal.viewed", "proposal.accepted"], s: "falhou", err: "401 Unauthorized · 28 abr" },
  ];
  return (
    <>
      <div className="kp-card" style={{ padding: 0, marginBottom: 22 }}>
        <div style={{ padding: "14px 18px", borderBottom: "1.5px solid var(--kp-ink)", display: "flex", justifyContent: "space-between" }}>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>WEBHOOKS ATIVOS</span>
          <button className="kp-btn kp-btn-sm">+ Novo endpoint</button>
        </div>
        {hooks.map((h,i) => (
          <div key={i} style={{ padding: 18, borderBottom: i === hooks.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
              <code style={{ fontFamily: "var(--kp-mono)", fontSize: 11.5, color: "var(--kp-pink)" }}>{h.url}</code>
              <Pill bg={h.s === "ativo" ? "var(--kp-green)" : "#FFB5B5"}>{h.s}</Pill>
            </div>
            <div style={{ marginTop: 8, display: "flex", gap: 6, flexWrap: "wrap" }}>
              {h.e.map(ev => <span key={ev} style={{ padding: "3px 8px", border: "1px solid var(--kp-ink)", background: "var(--kp-soft)", fontFamily: "var(--kp-mono)", fontSize: 9.5, letterSpacing: "0.12em" }}>{ev}</span>)}
            </div>
            {h.err && <div style={{ marginTop: 8, fontSize: 11.5, color: "#B22", fontFamily: "var(--kp-mono)" }}>⚠ {h.err}</div>}
          </div>
        ))}
      </div>

      <div className="kp-card" style={{ padding: 22 }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>EVENTOS DISPONÍVEIS</div>
        <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 6 }}>
          {[
            "payment.confirmed", "payment.failed", "payment.refunded",
            "subscription.created", "subscription.canceled", "subscription.renewed",
            "proposal.sent", "proposal.viewed", "proposal.accepted",
            "customer.created", "customer.updated", "affiliate.commission",
          ].map(ev => (
            <code key={ev} style={{ padding: "8px 10px", background: "var(--kp-ink)", color: "var(--kp-green)", fontFamily: "var(--kp-mono)", fontSize: 11, border: "1.5px solid var(--kp-ink)" }}>{ev}</code>
          ))}
        </div>
      </div>
    </>
  );
}

function ApiPanel() {
  const [shown, setShown] = React.useState({ k1: false, k2: false });
  const keys = [
    { id: "k1", l: "Production", k: "sk_live_DKT8x7yNqB3vF9eR2sT5uW1pZ4mC6oI8", c: "29 abr 2025", scope: ["read", "write"], color: "var(--kp-green)" },
    { id: "k2", l: "Test (sandbox)", k: "sk_test_HG4n6mP2qLrX8yT5vF9wB3cE7sD1uK6oI", c: "12 mar 2025", scope: ["read"], color: "var(--kp-yellow)" },
  ];
  const sample = `// Criar checkout via API
const res = await fetch("https://api.sequencia.app/v1/checkouts", {
  method: "POST",
  headers: {
    "Authorization": "Bearer sk_live_…",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    product: "prod_mentoria_mensal",
    customer: { email: "marina@verbete.co" },
    methods: ["pix", "card", "crypto"],
    metadata: { source: "site_principal" }
  })
});
const { url, id } = await res.json();
// → redirecionar pra \`url\``;

  return (
    <>
      <div className="kp-card" style={{ padding: 0, marginBottom: 22 }}>
        <div style={{ padding: "14px 18px", borderBottom: "1.5px solid var(--kp-ink)" }}>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>SUAS CHAVES</span>
        </div>
        {keys.map((k,i) => (
          <div key={k.id} style={{ padding: 18, borderBottom: i === keys.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)", display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 14, alignItems: "center" }}>
            <span style={{ width: 40, height: 40, background: k.color, border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--kp-display)", fontSize: 16, fontStyle: "italic" }}>K</span>
            <div>
              <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                <span style={{ fontSize: 13.5, fontWeight: 500 }}>{k.l}</span>
                {k.scope.map(s => <Pill key={s} bg="var(--kp-soft)">{s}</Pill>)}
              </div>
              <code style={{ display: "block", marginTop: 6, fontFamily: "var(--kp-mono)", fontSize: 11.5, color: "var(--kp-muted)" }}>{shown[k.id] ? k.k : k.k.slice(0,16) + "•".repeat(20)}</code>
              <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--kp-muted)", marginTop: 2 }}>CRIADA EM {k.c.toUpperCase()}</div>
            </div>
            <button onClick={()=>setShown(s=>({...s,[k.id]:!s[k.id]}))} className="kp-btn kp-btn-sm">{shown[k.id] ? "ocultar" : "mostrar"}</button>
            <button className="kp-btn kp-btn-sm" style={{ color: "#B22" }}>revogar</button>
          </div>
        ))}
      </div>

      <div className="kp-card" style={{ padding: 0 }}>
        <div style={{ padding: "14px 18px", borderBottom: "1.5px solid var(--kp-ink)", display: "flex", justifyContent: "space-between" }}>
          <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>EXEMPLO · POST /v1/checkouts</span>
          <div style={{ display: "flex", gap: 4 }}>
            {["JS","cURL","Python","PHP"].map((l,i) => (
              <button key={l} className="kp-btn kp-btn-sm" style={{ background: i === 0 ? "var(--kp-ink)" : "var(--kp-white)", color: i === 0 ? "var(--kp-paper)" : "var(--kp-ink)" }}>{l}</button>
            ))}
          </div>
        </div>
        <pre style={{ margin: 0, padding: 18, background: "var(--kp-ink)", color: "var(--kp-green)", fontFamily: "var(--kp-mono)", fontSize: 12, lineHeight: 1.6, overflow: "auto" }}>{sample}</pre>
      </div>

      <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12 }}>
        {[
          { l: "REST API", d: "JSON sobre HTTPS", c: "var(--kp-pink)" },
          { l: "Webhooks", d: "Eventos em tempo real", c: "var(--kp-green)" },
          { l: "SDKs oficiais", d: "JS · Python · PHP · Go", c: "var(--kp-cold)" },
        ].map((s,i) => (
          <a key={i} href="#/landing" className="kp-card" style={{ padding: 16, background: s.c, textDecoration: "none", color: "var(--kp-ink)" }}>
            <div className="kp-display" style={{ fontSize: 22, lineHeight: 1.05 }}>{s.l}</div>
            <div style={{ fontSize: 12, marginTop: 4 }}>{s.d}</div>
            <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", marginTop: 12 }}>VER DOCS →</div>
          </a>
        ))}
      </div>
    </>
  );
}

function Logs() {
  const logs = [
    { t: "14:23:08", method: "POST", path: "/v1/checkouts", code: 201, ms: 84, ev: "checkout.created" },
    { t: "14:22:51", method: "GET", path: "/v1/customers/cus_8K", code: 200, ms: 22, ev: "—" },
    { t: "14:22:14", method: "POST", path: "/v1/webhooks", code: 200, ms: 156, ev: "payment.confirmed" },
    { t: "14:21:02", method: "POST", path: "/v1/checkouts", code: 401, ms: 12, ev: "auth.failed", err: true },
    { t: "14:18:44", method: "POST", path: "/v1/subscriptions", code: 201, ms: 198, ev: "subscription.created" },
    { t: "14:15:28", method: "GET", path: "/v1/products", code: 200, ms: 28, ev: "—" },
    { t: "14:12:11", method: "POST", path: "/v1/checkouts", code: 201, ms: 92, ev: "checkout.created" },
    { t: "14:08:07", method: "POST", path: "/v1/webhooks", code: 500, ms: 5042, ev: "—", err: true },
  ];
  return (
    <div className="kp-card" style={{ padding: 0 }}>
      <div style={{ padding: "14px 18px", borderBottom: "1.5px solid var(--kp-ink)", display: "flex", justifyContent: "space-between" }}>
        <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>LOGS · ÚLTIMAS 24H</span>
        <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>1.842 EVENTOS · 2 ERROS</span>
      </div>
      <div style={{ background: "var(--kp-ink)", color: "var(--kp-paper)", padding: 0 }}>
        {logs.map((l,i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "auto auto 1fr auto auto auto", gap: 14, padding: "10px 18px", alignItems: "center", borderBottom: i === logs.length-1 ? "none" : "1px solid rgba(247,241,232,0.08)", fontFamily: "var(--kp-mono)", fontSize: 11.5 }}>
            <span style={{ color: "rgba(247,241,232,0.55)" }}>{l.t}</span>
            <span style={{ padding: "1px 6px", background: l.method === "GET" ? "var(--kp-cold)" : "var(--kp-pink)", color: "var(--kp-ink)", fontSize: 9, letterSpacing: "0.14em" }}>{l.method}</span>
            <span>{l.path}</span>
            <span style={{ color: l.err ? "#FF6B6B" : "var(--kp-green)" }}>{l.code}</span>
            <span style={{ color: "rgba(247,241,232,0.55)", fontSize: 10 }}>{l.ms}ms</span>
            <span style={{ color: "var(--kp-pink)", fontSize: 10 }}>{l.ev}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.SEQ_INTEGRACOES = Integracoes;