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

function Saldo() {
  const [modal, setModal] = React.useState(false);
  const [bal, setBal] = React.useState({ available: 2438050, receivable: 1892000, anticipatable: 1620000, blocked: 89000 });
  const [amount, setAmount] = React.useState("10000");
  const [loading, setLoading] = React.useState(false);
  const [feedback, setFeedback] = React.useState(null);

  React.useEffect(() => {
    window.SEQ_API.getBalance()
      .then(d => {
        if (d.balance) setBal(d.balance);
      })
      .catch(() => {});
  }, []);

  const disponivel = (bal.available ?? 0) / 100;
  const aReceber = (bal.receivable ?? 0) / 100;
  const antecipavel = (bal.anticipatable ?? 0) / 100;

  const openModal = () => {
    setFeedback(null);
    setAmount("10000");
    setModal(true);
  };

  const closeModal = () => {
    if (loading) return;
    setModal(false);
    setFeedback(null);
  };

  const handlePayout = async () => {
    const valor = Number(amount);
    if (!valor || valor <= 0) {
      setFeedback({ type: "error", msg: "Valor inválido. Informe um número maior que zero." });
      return;
    }
    if (valor > disponivel) {
      setFeedback({ type: "error", msg: `Valor acima do disponível (${brl(disponivel)}).` });
      return;
    }
    const cents = Math.round(valor * 100);
    setLoading(true);
    setFeedback(null);
    try {
      await window.SEQ_API.requestPayout({
        amount: cents,
        method: "pix",
        bankData: { bank: "Itaú", agency: "0123", account: "••••42", holder: "Kaleidos" },
      });
      setFeedback({ type: "success", msg: `✓ Saque solicitado · ${brl(valor)}` });
      setTimeout(() => {
        window.location.reload();
      }, 1500);
    } catch (err) {
      setLoading(false);
      setFeedback({ type: "error", msg: "Falha ao solicitar saque. Tente novamente." });
    }
  };

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead num="13" label="FINANCEIRO · SALDO" title="Quanto você tem" em="hoje."
        actions={(<>
          <button className="kp-btn kp-btn-sm">Extrato completo</button>
          <button className="kp-btn kp-btn-sm">Antecipar</button>
          <button onClick={openModal} className="kp-btn kp-btn-sm kp-btn-ink">↓ Sacar</button>
        </>)}
      />
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px" }}>
        {/* Saldo hero */}
        <div className="kp-card" style={{ padding: 32, marginBottom: 22, background: "var(--kp-ink)", color: "var(--kp-paper)", boxShadow: "8px 8px 0 0 var(--kp-green)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "var(--kp-faint)" }}>SALDO DISPONÍVEL</div>
              <div className="kp-display" style={{ fontSize: 84, lineHeight: 0.95, fontStyle: "italic", color: "var(--kp-paper)", marginTop: 8 }}>{brl(disponivel)}</div>
              <div style={{ fontSize: 13, color: "rgba(247,241,232,0.65)", marginTop: 8 }}>Itaú · ag 0123 · cc ••••42 · liquidação D+1</div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, minWidth: 220 }}>
              <button onClick={openModal} className="kp-btn kp-btn-green" style={{ padding: "14px 18px", fontSize: 11 }}>↓ Sacar agora</button>
              <button className="kp-btn" style={{ background: "transparent", color: "var(--kp-paper)", borderColor: "var(--kp-paper)" }}>Sacar tudo</button>
            </div>
          </div>
        </div>

        {/* Outros saldos */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, marginBottom: 22 }}>
          <KPI label="A receber · 30d" value={brl(aReceber)} sub="14 cobranças agendadas" bg="var(--kp-cold)"/>
          <KPI label="Antecipável" value={brl(antecipavel)} sub="taxa 1.5% · liquidação imediata" bg="var(--kp-pink-soft)"/>
          <KPI label="Bloqueado / disputas" value={brl(890)} sub="1 chargeback em análise" bg="var(--kp-warm)"/>
        </div>

        {/* Histórico + agenda */}
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 16, marginBottom: 22 }}>
          <div className="kp-card" style={{ padding: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>ENTRADAS · 30 DIAS</div>
              <div className="kp-display" style={{ fontSize: 28, fontStyle: "italic" }}>{brl(54390)}</div>
            </div>
            <BarChart data={[12,18,15,22,28,24,32,28,38,35,42,38,48,44,52,46,55,50,58,62,55,68,64,72,68,76,82,78,88,92]}/>
          </div>
          <div className="kp-card" style={{ padding: 22 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>AGENDA DE RECEBÍVEIS</div>
            <div style={{ marginTop: 14 }}>
              {[
                { dia: "02 mai", liq: "D+1", v: 4200, n: "Cartão · 4 transações" },
                { dia: "05 mai", liq: "D+30", v: 3800, n: "Cartão · 6 transações" },
                { dia: "10 mai", liq: "Recorrente", v: 1490, n: "Café Sapatão" },
                { dia: "12 mai", liq: "Recorrente", v: 1800, n: "Lemos Saúde" },
                { dia: "15 mai", liq: "Recorrente", v: 2200, n: "Pet Hub" },
              ].map((r,i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, padding: "8px 0", borderBottom: i === 4 ? "none" : "1px solid rgba(10,10,10,0.08)", alignItems: "center" }}>
                  <div className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: "var(--kp-pink)" }}>{r.dia}<br/><span style={{ color: "var(--kp-muted)", fontSize: 8.5 }}>{r.liq}</span></div>
                  <span style={{ fontSize: 12.5 }}>{r.n}</span>
                  <span className="kp-mono" style={{ fontSize: 11, letterSpacing: "0.14em" }}>{brl(r.v)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Histórico de saques */}
        <div className="kp-card" style={{ padding: 0 }}>
          <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)" }}>HISTÓRICO DE SAQUES</span>
          </div>
          {[
            { d: "29 abr · 14:20", v: 12000, m: "PIX · Itaú", s: "concluído" },
            { d: "22 abr · 09:45", v: 8500, m: "PIX · Itaú", s: "concluído" },
            { d: "15 abr · 11:30", v: 15400, m: "TED · Itaú", s: "concluído" },
            { d: "08 abr · 17:50", v: 6800, m: "PIX · Itaú", s: "concluído" },
          ].map((s,i,a) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr auto", gap: 12, padding: "12px 18px", alignItems: "center", borderBottom: i === a.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)", background: i % 2 === 1 ? "var(--kp-soft)" : "var(--kp-white)" }}>
              <span className="kp-mono" style={{ fontSize: 10.5, letterSpacing: "0.14em" }}>{s.d}</span>
              <span style={{ fontSize: 12.5, color: "var(--kp-muted)" }}>{s.m}</span>
              <span className="kp-display" style={{ fontSize: 22, fontStyle: "italic" }}>{brl(s.v)}</span>
              <span className="status-chip status-chip--accept">{s.s}</span>
            </div>
          ))}
        </div>

        {modal && (
          <div onClick={closeModal} style={{ position: "fixed", inset: 0, background: "rgba(10,10,10,0.5)", zIndex: 300, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
            <div onClick={(e)=>e.stopPropagation()} className="kp-card" style={{ padding: 28, maxWidth: 460, width: "100%", background: "var(--kp-paper)" }}>
              <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>SACAR</div>
              <h2 className="kp-display" style={{ fontSize: 36, lineHeight: 1.05, marginTop: 6 }}>Quanto vai pra <em>conta</em>?</h2>
              <div style={{ marginTop: 18 }}>
                <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>VALOR</span>
                <input
                  className="kp-input"
                  value={amount}
                  onChange={(e)=>setAmount(e.target.value)}
                  type="number"
                  min="0"
                  step="0.01"
                  disabled={loading}
                  style={{ marginTop: 6, fontSize: 22, fontFamily: "var(--kp-display)", fontStyle: "italic", padding: 14 }}
                />
                <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)", marginTop: 4 }}>DISPONÍVEL: {brl(disponivel)}</div>
              </div>
              <div style={{ marginTop: 14, padding: 12, background: "var(--kp-soft)", border: "1.5px solid var(--kp-ink)", fontSize: 12 }}>
                <div style={{ fontWeight: 500 }}>Itaú · ag 0123 · cc ••••42</div>
                <div style={{ color: "var(--kp-muted)", marginTop: 2 }}>Diogo Krieger · CPF 123.456.789-00</div>
              </div>
              {feedback && (
                <div
                  className="kp-mono"
                  style={{
                    marginTop: 14,
                    padding: 10,
                    fontSize: 11,
                    letterSpacing: "0.08em",
                    border: "1.5px solid var(--kp-ink)",
                    background: feedback.type === "success" ? "var(--kp-green)" : "var(--kp-pink-soft)",
                    color: "var(--kp-ink)",
                  }}
                >
                  {feedback.msg}
                </div>
              )}
              <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
                <button onClick={closeModal} disabled={loading} className="kp-btn" style={{ flex: 1, opacity: loading ? 0.5 : 1 }}>Cancelar</button>
                <button onClick={handlePayout} disabled={loading} className="kp-btn kp-btn-ink" style={{ flex: 2, opacity: loading ? 0.7 : 1 }}>
                  {loading ? "Processando…" : "Sacar via PIX agora →"}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.SEQ_SALDO = Saldo;