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

function Configuracoes() {
  const [tab, setTab] = React.useState("conta");
  const tabs = [
    { id: "conta", l: "Conta" },
    { id: "empresa", l: "Empresa & Fiscal" },
    { id: "plano", l: "Plano & Cobrança" },
    { id: "branding", l: "Branding" },
    { id: "team", l: "Time & permissões" },
    { id: "notif", l: "Notificações" },
    { id: "seg", l: "Segurança" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead num="16" label="CONFIGURAÇÕES" title="Ajustes da" em="conta."
        actions={<button className="kp-btn kp-btn-sm kp-btn-ink">Salvar tudo</button>}
      />
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px", display: "grid", gridTemplateColumns: "240px 1fr", gap: 24 }}>
        {/* Side tabs */}
        <nav style={{ display: "flex", flexDirection: "column", gap: 4, position: "sticky", top: 20, alignSelf: "start" }}>
          {tabs.map((t,i) => (
            <button key={t.id} onClick={()=>setTab(t.id)} style={{
              padding: "11px 14px", border: "1.5px solid var(--kp-ink)", textAlign: "left", cursor: "pointer",
              background: tab === t.id ? "var(--kp-ink)" : "var(--kp-white)",
              color: tab === t.id ? "var(--kp-paper)" : "var(--kp-ink)",
              fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
              boxShadow: tab === t.id ? "3px 3px 0 0 var(--kp-pink)" : "none",
              display: "flex", justifyContent: "space-between", alignItems: "center",
            }}>
              <span>{t.l}</span>
              <span style={{ fontFamily: "var(--kp-display)", fontStyle: "italic", fontSize: 13, color: tab === t.id ? "var(--kp-pink)" : "var(--kp-muted)" }}>{String(i+1).padStart(2,"0")}</span>
            </button>
          ))}
        </nav>

        <div>
          {tab === "conta" && <Conta/>}
          {tab === "empresa" && <Empresa/>}
          {tab === "plano" && <Plano/>}
          {tab === "branding" && <Branding/>}
          {tab === "team" && <Team/>}
          {tab === "notif" && <Notif/>}
          {tab === "seg" && <Seguranca/>}
        </div>
      </div>
    </div>
  );
}

function Section({ num, t, children, sub }) {
  return (
    <div style={{ marginBottom: 26 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 14 }}>
        <span className="kp-display" style={{ fontSize: 28, fontStyle: "italic", color: "var(--kp-pink)", lineHeight: 1 }}>{num}</span>
        <div>
          <h2 className="kp-display" style={{ fontSize: 24, lineHeight: 1, margin: 0 }}>{t}</h2>
          {sub && <div style={{ fontSize: 12, color: "var(--kp-muted)", marginTop: 4 }}>{sub}</div>}
        </div>
      </div>
      {children}
    </div>
  );
}
function CField({ label, value, placeholder, type = "text", select, onChange, readOnly, hint }) {
  const controlled = typeof onChange === "function";
  return (
    <label style={{ display: "block" }}>
      <span className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>
        {label.toUpperCase()}
        {hint && <em style={{ fontStyle: "italic", marginLeft: 6, textTransform: "none", letterSpacing: 0, color: "var(--kp-muted)" }}>{hint}</em>}
      </span>
      {select ? (
        controlled ? (
          <select className="kp-input" value={value || ""} onChange={(e)=>onChange(e.target.value)} style={{ marginTop: 5 }}>
            {select.map(o => <option key={o}>{o}</option>)}
          </select>
        ) : (
          <select className="kp-input" defaultValue={value} style={{ marginTop: 5 }}>
            {select.map(o => <option key={o}>{o}</option>)}
          </select>
        )
      ) : (
        controlled ? (
          <input
            className="kp-input"
            type={type}
            value={value || ""}
            onChange={(e)=>onChange(e.target.value)}
            placeholder={placeholder}
            readOnly={readOnly}
            style={{ marginTop: 5, ...(readOnly ? { background: "var(--kp-soft)", cursor: "not-allowed" } : null) }}
          />
        ) : (
          <input className="kp-input" type={type} defaultValue={value} placeholder={placeholder} style={{ marginTop: 5 }}/>
        )
      )}
    </label>
  );
}
function ToggleRow({ on, l, d }) {
  const [v, setV] = React.useState(!!on);
  return (
    <div style={{ padding: "12px 16px", border: "1.5px solid var(--kp-ink)", background: "var(--kp-white)", display: "grid", gridTemplateColumns: "1fr auto", gap: 14, alignItems: "center" }}>
      <div>
        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{l}</div>
        {d && <div style={{ fontSize: 11.5, color: "var(--kp-muted)", marginTop: 2 }}>{d}</div>}
      </div>
      <button onClick={()=>setV(!v)} style={{
        width: 42, height: 24, padding: 0, border: "1.5px solid var(--kp-ink)",
        background: v ? "var(--kp-green)" : "var(--kp-white)", cursor: "pointer", position: "relative",
      }}>
        <span style={{ position: "absolute", top: 1, left: v ? 20 : 1, width: 18, height: 18, background: "var(--kp-ink)", transition: "left .15s" }}/>
      </button>
    </div>
  );
}

function Conta() {
  const [user, setUser] = React.useState(null);
  const [name, setName] = React.useState("");
  const [displayName, setDisplayName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [language, setLanguage] = React.useState("Português (BR)");
  const [timezone, setTimezone] = React.useState("America/Sao_Paulo (GMT-3)");
  const [saving, setSaving] = React.useState(false);
  const [feedback, setFeedback] = React.useState(null); // { kind: "ok"|"warn"|"err", msg: string }

  React.useEffect(() => {
    window.SEQ_API.me().then(d => {
      const u = d.user;
      setUser(u);
      setName(u?.name || "");
      setDisplayName(u?.displayName || u?.name || "");
      setEmail(u?.email || "");
      setPhone(u?.phone || "");
    }).catch(() => {});
  }, []);

  const initials = (name || email || "K")
    .split(/[\s@]/).map(s=>s[0]).filter(Boolean).slice(0,2).join("").toUpperCase();

  const dirty = user && (
    name !== (user.name || "") ||
    displayName !== (user.displayName || user.name || "") ||
    phone !== (user.phone || "")
  );

  async function tryUpdate(url, body) {
    try {
      const r = await fetch(url, {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      return r;
    } catch (e) {
      return null;
    }
  }

  async function save() {
    if (saving) return;
    setSaving(true);
    setFeedback(null);

    const payload = { name };

    let r = await tryUpdate("/api/auth/update-user", payload);
    if (!r || r.status === 404) {
      r = await tryUpdate("/api/auth/user/update", payload);
    }

    if (r && r.ok) {
      setUser(prev => ({ ...(prev || {}), name, phone }));
      setFeedback({ kind: "ok", msg: "Salvo. Recarregue para ver atualizado em outras telas." });
    } else {
      // fallback local-only
      setUser(prev => ({ ...(prev || {}), name, phone }));
      setFeedback({ kind: "warn", msg: "Salvo localmente · sync pendente" });
    }
    setSaving(false);
  }

  const fbColor = feedback?.kind === "ok" ? "var(--kp-green)"
    : feedback?.kind === "warn" ? "var(--kp-yellow)"
    : "var(--kp-pink)";

  return (
    <>
      <Section num="01" t="Sua identidade" sub="Como aparece pra quem te paga">
        <div className="kp-card" style={{ padding: 22 }}>
          <div style={{ display: "flex", gap: 16, alignItems: "center", marginBottom: 16 }}>
            <Avatar initials={initials} size={64} bg="var(--kp-pink)"/>
            <div>
              <button className="kp-btn kp-btn-sm" type="button">Trocar foto</button>
              <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)", marginTop: 6 }}>JPG, PNG · MÁX 2MB</div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <CField label="Nome completo" value={name} onChange={setName}/>
            <CField label="Display name" value={displayName} onChange={setDisplayName}/>
            <CField label="Email" value={email} onChange={()=>{}} type="email" readOnly hint="(não editável)"/>
            <CField label="Celular" value={phone} onChange={setPhone}/>
            <CField label="Idioma" value={language} onChange={setLanguage} select={["Português (BR)","English (US)","Español"]}/>
            <CField label="Fuso horário" value={timezone} onChange={setTimezone} select={["America/Sao_Paulo (GMT-3)","America/New_York","Europe/London"]}/>
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 18, flexWrap: "wrap" }}>
            <button
              type="button"
              className="kp-btn kp-btn-ink"
              onClick={save}
              disabled={saving || !dirty}
              style={{ opacity: (saving || !dirty) ? 0.55 : 1, cursor: (saving || !dirty) ? "not-allowed" : "pointer" }}
            >
              {saving ? "Salvando..." : "Salvar alterações →"}
            </button>
            {feedback && (
              <span
                className="kp-mono"
                style={{
                  fontSize: 10,
                  letterSpacing: "0.16em",
                  textTransform: "uppercase",
                  padding: "6px 10px",
                  border: "1.5px solid var(--kp-ink)",
                  background: fbColor,
                  color: "var(--kp-ink)",
                }}
              >
                {feedback.msg}
              </span>
            )}
          </div>
        </div>
      </Section>
    </>
  );
}

function Empresa() {
  return (
    <>
      <Section num="02" t="Dados da empresa" sub="Aparecem na nota fiscal e no checkout">
        <div className="kp-card" style={{ padding: 22 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <CField label="Razão social" value="Diogo Krieger Consultoria ME"/>
            <CField label="Nome fantasia" value="Sequência"/>
            <CField label="CNPJ" value="12.345.678/0001-90"/>
            <CField label="Inscrição municipal" value="987654-3"/>
            <CField label="Endereço" value="Rua Augusta, 1500 — São Paulo/SP"/>
            <CField label="CEP" value="01304-001"/>
            <CField label="Atividade (CNAE)" value="7020-4 · Atividades de consultoria em gestão"/>
            <CField label="Regime tributário" value="Simples Nacional" select={["Simples Nacional","Lucro Presumido","Lucro Real","MEI"]}/>
          </div>
        </div>
      </Section>

      <Section num="03" t="Notas fiscais" sub="Emitir automático ou manual">
        <div style={{ display: "grid", gap: 8 }}>
          <ToggleRow on l="Emitir NFS-e automaticamente após cada pagamento confirmado"/>
          <ToggleRow on l="Enviar PDF da NF pro email do cliente"/>
          <ToggleRow l="Reter ISS (caso seu município exija)"/>
        </div>
      </Section>
    </>
  );
}

function Plano() {
  return (
    <>
      <Section num="04" t="Seu plano" sub="Você está no Pro · 31 dias grátis restantes">
        <div className="kp-card" style={{ padding: 26, background: "var(--kp-pink)", boxShadow: "6px 6px 0 0 var(--kp-ink)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 12 }}>
            <div>
              <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-ink)" }}>PLANO ATUAL</div>
              <h3 className="kp-display" style={{ fontSize: 44, lineHeight: 1, fontStyle: "italic", margin: "6px 0 0" }}>Pro</h3>
              <div style={{ fontSize: 12.5, marginTop: 4 }}>Tudo desbloqueado · usuários ilimitados · 0% taxa fixa</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="kp-display" style={{ fontSize: 36, fontStyle: "italic" }}>{brl(199)}<span style={{ fontSize: 14 }}>/mês</span></div>
              <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--kp-ink)", marginTop: 4 }}>+ 1.5% POR TRANSAÇÃO</div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 18 }}>
            <button className="kp-btn kp-btn-ink">Mudar pra anual (−2 meses)</button>
            <button className="kp-btn">Comparar planos</button>
          </div>
        </div>
      </Section>

      <Section num="05" t="Método de cobrança" sub="Como nós cobramos seu plano de você">
        <div className="kp-card" style={{ padding: 18, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center" }}>
          <div style={{ width: 56, height: 36, background: "var(--kp-cold)", border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--kp-display)", fontStyle: "italic", fontSize: 14 }}>Visa</div>
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 500 }}>•••• •••• •••• 4242</div>
            <div style={{ fontSize: 11.5, color: "var(--kp-muted)", marginTop: 2 }}>Vence em 12/27 · titular Diogo Krieger</div>
          </div>
          <button className="kp-btn kp-btn-sm">Trocar</button>
        </div>
      </Section>

      <Section num="06" t="Histórico de pagamentos do plano">
        <div className="kp-card" style={{ padding: 0 }}>
          {[
            { d: "01 mai 2025", v: 199, s: "paga" },
            { d: "01 abr 2025", v: 199, s: "paga" },
            { d: "01 mar 2025", v: 199, s: "paga" },
          ].map((f,i,a) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr auto", gap: 12, padding: "12px 18px", alignItems: "center", borderBottom: i === a.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)" }}>
              <span className="kp-mono" style={{ fontSize: 10.5, letterSpacing: "0.14em" }}>{f.d}</span>
              <Pill bg="var(--kp-green)">{f.s}</Pill>
              <span className="kp-display" style={{ fontSize: 18, fontStyle: "italic" }}>{brl(f.v)}</span>
              <button className="kp-btn kp-btn-sm">PDF ↓</button>
            </div>
          ))}
        </div>
      </Section>
    </>
  );
}

function Branding() {
  return (
    <>
      <Section num="07" t="Identidade visual" sub="O que aparece no checkout, propostas e portal do cliente">
        <div className="kp-card" style={{ padding: 22 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            <CField label="Marca / Nome" value="Sequência"/>
            <CField label="Subtítulo" value="Propostas que pensam por você"/>
            <CField label="Domínio próprio" value="pagar.sequencia.app" placeholder="checkout.suamarca.com"/>
            <CField label="URL pública (slug)" value="@diogo"/>
          </div>

          <div style={{ marginTop: 18 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>CORES DA MARCA</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 8, marginTop: 8 }}>
              {[
                { l: "Primária", c: "#0A0A0A" },
                { l: "Acento", c: "#D262B2" },
                { l: "Sucesso", c: "#A8E085" },
                { l: "Fundo", c: "#F4F1E8" },
                { l: "Atenção", c: "#FFD485" },
              ].map((x,i) => (
                <div key={i} style={{ border: "1.5px solid var(--kp-ink)", overflow: "hidden" }}>
                  <div style={{ background: x.c, height: 64, borderBottom: "1.5px solid var(--kp-ink)" }}/>
                  <div style={{ padding: "8px 10px" }}>
                    <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", color: "var(--kp-muted)" }}>{x.l.toUpperCase()}</div>
                    <code style={{ fontFamily: "var(--kp-mono)", fontSize: 11 }}>{x.c}</code>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 18 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>LOGO</div>
            <div style={{ marginTop: 8, padding: 24, border: "1.5px dashed var(--kp-ink)", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 14, alignItems: "center" }}>
              <div className="kp-display" style={{ fontSize: 36, lineHeight: 1 }}>Sequência<em style={{ color: "var(--kp-pink)" }}>·</em></div>
              <div style={{ fontSize: 12, color: "var(--kp-muted)" }}>Logo atual · SVG, 124 KB</div>
              <button className="kp-btn kp-btn-sm">Trocar</button>
            </div>
          </div>
        </div>
      </Section>

      <Section num="08" t="Email do cliente" sub="Customizar email automático de confirmação">
        <div className="kp-card" style={{ padding: 0 }}>
          <div style={{ padding: 16, borderBottom: "1.5px solid var(--kp-ink)", background: "var(--kp-soft)", fontFamily: "var(--kp-mono)", fontSize: 11 }}>
            <div><strong>De:</strong> Diogo @ Sequência &lt;diogo@sequencia.app&gt;</div>
            <div><strong>Assunto:</strong> Pagamento confirmado · Mentoria 1:1</div>
          </div>
          <div style={{ padding: 22, fontSize: 13.5, lineHeight: 1.6 }}>
            <p style={{ margin: 0 }}>Oi <em>&#123;&#123;cliente.nome&#125;&#125;</em>,</p>
            <p>Recebi seu pagamento de <strong>&#123;&#123;valor&#125;&#125;</strong>. Tá tudo certo. Sua primeira sessão é dia <strong>&#123;&#123;data&#125;&#125;</strong>.</p>
            <p>Risco zero, sequência total.<br/>— Diogo</p>
          </div>
        </div>
      </Section>
    </>
  );
}

function Team() {
  const members = [
    { n: "Diogo Krieger", e: "diogo@costaperf.com", r: "Owner", s: "ativo", c: "var(--kp-pink)" },
    { n: "Marina V.", e: "marina@verbete.co", r: "Editor", s: "ativo", c: "var(--kp-green)" },
    { n: "André S.", e: "andre@cafesapatao.com", r: "Visualizador", s: "convite enviado", c: "var(--kp-cold)" },
  ];
  return (
    <Section num="09" t="Time & permissões" sub="Convide pessoas pra colaborar na sua conta Sequência">
      <div className="kp-card" style={{ padding: 18, marginBottom: 16, display: "flex", gap: 8, alignItems: "center" }}>
        <input className="kp-input" placeholder="email@empresa.com" style={{ flex: 1 }}/>
        <select className="kp-input" defaultValue="Editor" style={{ width: 160 }}>
          <option>Owner</option><option>Editor</option><option>Visualizador</option>
        </select>
        <button className="kp-btn kp-btn-ink">Convidar →</button>
      </div>
      <div className="kp-card" style={{ padding: 0 }}>
        {members.map((m,i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr 1fr 1fr auto", gap: 14, padding: "14px 18px", alignItems: "center", borderBottom: i === members.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)" }}>
            <Avatar initials={m.n.split(" ").map(s=>s[0]).slice(0,2).join("")} size={32} bg={m.c}/>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 500 }}>{m.n}</div>
              <div style={{ fontSize: 11, color: "var(--kp-muted)", fontFamily: "var(--kp-mono)" }}>{m.e}</div>
            </div>
            <Pill>{m.r}</Pill>
            <Pill bg={m.s === "ativo" ? "var(--kp-green)" : "var(--kp-yellow)"}>{m.s}</Pill>
            <button className="kp-btn kp-btn-sm">···</button>
          </div>
        ))}
      </div>
    </Section>
  );
}

function Notif() {
  return (
    <Section num="10" t="Notificações" sub="O que vai te avisar">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        <ToggleRow on l="Email · venda confirmada" d="Cada pagamento que entra"/>
        <ToggleRow on l="Email · proposta lida pelo cliente" d="Quando o cliente abre a proposta"/>
        <ToggleRow on l="Email · resumo semanal" d="Toda segunda às 8h"/>
        <ToggleRow l="Email · resumo diário" d="Todo dia às 18h"/>
        <ToggleRow on l="Push · venda > R$5.000" d="Notificação no celular"/>
        <ToggleRow on l="Push · cobrança falhou" d="Cartão recusado, boleto vencido"/>
        <ToggleRow l="SMS · venda > R$10.000" d="Custos por SMS aplicáveis"/>
        <ToggleRow on l="Slack · canal #vendas" d="Webhook configurado"/>
      </div>
    </Section>
  );
}

function Seguranca() {
  return (
    <>
      <Section num="11" t="Acesso & autenticação">
        <div style={{ display: "grid", gap: 8 }}>
          <ToggleRow on l="Verificação em duas etapas (2FA)" d="App authenticator · ativo desde 12 mar"/>
          <ToggleRow on l="Login por link mágico (passwordless)" d="Email com link de acesso temporário"/>
          <ToggleRow l="Login com Google (SSO)" d="Permitir entrar com conta Google"/>
        </div>
      </Section>

      <Section num="12" t="Sessões ativas">
        <div className="kp-card" style={{ padding: 0 }}>
          {[
            { d: "Mac · Chrome · São Paulo", a: "agora", c: "var(--kp-green)", atual: true },
            { d: "iPhone · Safari · São Paulo", a: "há 2h", c: "var(--kp-cold)" },
            { d: "Windows · Edge · Curitiba", a: "há 3 dias", c: "var(--kp-soft)" },
          ].map((s,i,a) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 14, padding: "14px 18px", alignItems: "center", borderBottom: i === a.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)" }}>
              <span style={{ width: 10, height: 10, background: s.c, border: "1.5px solid var(--kp-ink)" }}/>
              <span style={{ fontSize: 13 }}>{s.d}</span>
              <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--kp-muted)" }}>{s.a}</span>
              <button className="kp-btn kp-btn-sm" disabled={s.atual}>{s.atual ? "ATUAL" : "encerrar"}</button>
            </div>
          ))}
        </div>
      </Section>

      <Section num="13" t="Privacidade & LGPD">
        <div style={{ display: "grid", gap: 8 }}>
          <ToggleRow on l="Permitir uso de dados anônimos pra melhorar o produto"/>
          <ToggleRow l="Compartilhar minha localização aproximada"/>
        </div>
        <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
          <button className="kp-btn">Exportar meus dados (LGPD)</button>
          <button className="kp-btn" style={{ color: "#B22" }}>Excluir minha conta</button>
        </div>
      </Section>
    </>
  );
}

window.SEQ_CONFIG = Configuracoes;