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

function CheckoutBuilder() {
  const [name, setName] = React.useState("Mentoria 1:1 · Plano mensal");
  const [price, setPrice] = React.useState(1200);
  const [recur, setRecur] = React.useState("monthly");
  const [bumps, setBumps] = React.useState([
    { id: "b1", t: "Sessão extra de bônus", p: 290, on: true },
    { id: "b2", t: "Acesso vitalício ao curso", p: 490, on: false },
  ]);
  const [upsell, setUpsell] = React.useState(true);
  const [methods, setMethods] = React.useState({ pix: true, card: true, boleto: true, crypto: false });
  const [theme, setTheme] = React.useState("ink");
  const [slug, setSlug] = React.useState("mentoria-mensal");
  const [products, setProducts] = React.useState([]);
  const [productId, setProductId] = React.useState("");
  const [publishing, setPublishing] = React.useState(false);
  const [feedback, setFeedback] = React.useState(null);

  React.useEffect(() => {
    window.SEQ_API.listProducts()
      .then(d => setProducts(d.products || []))
      .catch(() => {});
  }, []);

  React.useEffect(() => {
    if (productId) {
      const p = products.find(x => x.id === productId);
      if (p) {
        setName(p.name);
        setPrice((p.price || 0) / 100);
        setRecur(p.billingCycle || "once");
      }
    }
  }, [productId, products]);

  async function publicar() {
    if (!productId) {
      setFeedback({ type: "error", msg: "Selecione um produto primeiro." });
      return;
    }
    setPublishing(true);
    setFeedback(null);
    try {
      const paymentMethods = Object.entries(methods).filter(([_, v]) => v).map(([k]) => k);
      const r = await window.SEQ_API.createCheckout({
        productId,
        title: name,
        kind: recur === "once" ? "one_time" : "subscription",
        paymentMethods,
        affiliateEnabled: false,
      });
      // Normalmente o status sai como "draft" — vamos publicar imediatamente
      // (PATCH endpoint ainda não existe, então só mostramos o slug retornado)
      const newSlug = r.checkout?.publicSlug;
      if (newSlug) setSlug(newSlug);
      setFeedback({ type: "success", msg: `✓ Checkout criado: pay.kaleidos.com.br/c/${newSlug}` });
    } catch (err) {
      setFeedback({ type: "error", msg: err.message || "Falha ao publicar." });
    } finally {
      setPublishing(false);
    }
  }

  const url = `pay.kaleidos.com.br/c/${slug}`;
  const embed = `<iframe src="https://${url}/embed" style="width:100%;height:720px;border:0"></iframe>`;
  const script = `<script src="https://${url}.js"></script>`;

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead
        num="09"
        label="LINK DE PAGAMENTO · BUILDER"
        title="Monte um checkout"
        em="standalone."
        actions={(<>
          <select value={productId} onChange={e => setProductId(e.target.value)} style={{ padding: "7px 10px", border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", background: "var(--kp-white)" }}>
            <option value="">PRODUTO…</option>
            {products.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
          </select>
          <button onClick={publicar} disabled={publishing} className="kp-btn kp-btn-sm kp-btn-ink">{publishing ? "..." : "Publicar →"}</button>
        </>)}
      />

      {feedback && (
        <div style={{ position: "fixed", bottom: 24, right: 24, zIndex: 100, padding: "12px 18px", background: feedback.type === "success" ? "var(--kp-green)" : "#FFB5B5", border: "1.5px solid var(--kp-ink)", boxShadow: "4px 4px 0 0 var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 11, letterSpacing: "0.14em", maxWidth: 420 }}>{feedback.msg}</div>
      )}
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px", display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 24 }}>
        {/* Configuração */}
        <div>
          <SectLabel num="01" label="Produto"/>
          <div className="kp-card" style={{ padding: 18, marginBottom: 22 }}>
            <Field label="Nome do produto" value={name} onChange={setName}/>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 12 }}>
              <NumField label="Preço (R$)" value={price} onChange={setPrice}/>
              <SelectField label="Cobrança" value={recur} onChange={setRecur} options={[
                { v: "once", l: "Pagamento único" },
                { v: "monthly", l: "Mensal recorrente" },
                { v: "yearly", l: "Anual recorrente" },
              ]}/>
            </div>
            <Field label="Slug do link" value={slug} onChange={setSlug} prefix="sequencia.app/c/"/>
          </div>

          <SectLabel num="02" label="Order bumps" tag={`${bumps.filter(b=>b.on).length}/${bumps.length} ativos`}/>
          <div className="kp-card" style={{ padding: 18, marginBottom: 22 }}>
            {bumps.map((b,i) => (
              <div key={b.id} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 12, padding: "10px 0", alignItems: "center", borderBottom: i === bumps.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)" }}>
                <Toggle on={b.on} onClick={()=>setBumps(bs=>bs.map(x=>x.id===b.id?{...x,on:!x.on}:x))}/>
                <input className="kp-input" defaultValue={b.t} style={{ padding: "6px 10px", fontSize: 13 }}/>
                <input className="kp-input" defaultValue={b.p} type="number" style={{ width: 100, padding: "6px 10px", fontSize: 13 }}/>
                <button className="kp-btn kp-btn-sm" style={{ padding: "5px 8px" }}>×</button>
              </div>
            ))}
            <button onClick={()=>setBumps(bs=>[...bs,{id:"b"+Date.now(),t:"Novo bump",p:100,on:false}])} className="kp-btn kp-btn-sm kp-btn-ghost" style={{ marginTop: 10 }}>+ Adicionar bump</button>
          </div>

          <SectLabel num="03" label="Métodos de pagamento"/>
          <div className="kp-card" style={{ padding: 18, marginBottom: 22, display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8 }}>
            {[
              { k: "pix", l: "PIX", c: "var(--kp-green)" },
              { k: "card", l: "Cartão", c: "var(--kp-cold)" },
              { k: "boleto", l: "Boleto", c: "var(--kp-soft)" },
              { k: "crypto", l: "Cripto", c: "var(--kp-ink)" },
            ].map(m => (
              <button key={m.k} onClick={()=>setMethods(ms=>({...ms,[m.k]:!ms[m.k]}))} style={{
                padding: 14, border: "1.5px solid var(--kp-ink)",
                background: methods[m.k] ? m.c : "var(--kp-white)",
                color: m.k === "crypto" && methods[m.k] ? "var(--kp-paper)" : "var(--kp-ink)",
                cursor: "pointer", textAlign: "left",
                boxShadow: methods[m.k] ? "3px 3px 0 0 var(--kp-ink)" : "none",
              }}>
                <div className="kp-display" style={{ fontSize: 20, color: "inherit" }}>{m.l}</div>
                <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", marginTop: 4 }}>{methods[m.k] ? "ATIVO" : "INATIVO"}</div>
              </button>
            ))}
          </div>

          <SectLabel num="04" label="Aparência"/>
          <div className="kp-card" style={{ padding: 18, marginBottom: 22 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>TEMA</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 8, marginTop: 8 }}>
              {[
                { k: "ink", l: "Editorial", c: "var(--kp-paper)", a: "var(--kp-pink)" },
                { k: "green", l: "Verde", c: "var(--kp-green)", a: "var(--kp-ink)" },
                { k: "pink", l: "Rosa", c: "var(--kp-pink-soft)", a: "var(--kp-pink)" },
                { k: "dark", l: "Escuro", c: "var(--kp-ink)", a: "var(--kp-green)" },
              ].map(t => (
                <button key={t.k} onClick={()=>setTheme(t.k)} style={{
                  padding: 0, border: "1.5px solid var(--kp-ink)", cursor: "pointer",
                  boxShadow: theme === t.k ? "3px 3px 0 0 var(--kp-ink)" : "none",
                }}>
                  <div style={{ background: t.c, padding: 14, borderBottom: "1.5px solid var(--kp-ink)", color: t.k === "dark" ? "var(--kp-paper)" : "var(--kp-ink)", fontFamily: "var(--kp-display)", fontSize: 20, fontStyle: "italic" }}>Aa</div>
                  <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.14em", padding: "6px 8px", color: "var(--kp-muted)", background: "var(--kp-white)" }}>{t.l.toUpperCase()}</div>
                </button>
              ))}
            </div>

            <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>Upsell pós-compra</div>
                <div style={{ fontSize: 11.5, color: "var(--kp-muted)", marginTop: 2 }}>Após confirmar, oferecer um produto extra com 1-clique</div>
              </div>
              <Toggle on={upsell} onClick={()=>setUpsell(u=>!u)}/>
            </div>
          </div>

          <SectLabel num="05" label="Distribuição"/>
          <div className="kp-card" style={{ padding: 18 }}>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>LINK PÚBLICO</div>
            <div style={{ marginTop: 6, padding: 10, background: "var(--kp-soft)", border: "1.5px solid var(--kp-ink)", display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--kp-mono)", fontSize: 12 }}>
              <span style={{ flex: 1, color: "var(--kp-pink)" }}>{url}</span>
              <button className="kp-btn kp-btn-sm" style={{ padding: "4px 8px" }}><Icon.copy s={11}/></button>
            </div>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)", marginTop: 14 }}>EMBED · IFRAME</div>
            <pre style={{ marginTop: 6, padding: 10, background: "var(--kp-ink)", color: "var(--kp-green)", border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 11, overflow: "auto", lineHeight: 1.5 }}>{embed}</pre>
            <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)", marginTop: 14 }}>BOTÃO · SCRIPT TAG</div>
            <pre style={{ marginTop: 6, padding: 10, background: "var(--kp-ink)", color: "var(--kp-green)", border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 11, overflow: "auto" }}>{script}</pre>
          </div>
        </div>

        {/* Preview */}
        <div style={{ position: "sticky", top: 20 }}>
          <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)", marginBottom: 10, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span>● PREVIEW · DESKTOP</span>
            <span>{url}</span>
          </div>
          <div className="kp-mock">
            <div className="kp-mock-titlebar">
              <div className="kp-mock-dots"><span style={{ background: "#FF5F57" }}/><span style={{ background: "#FEBC2E" }}/><span style={{ background: "#28C840" }}/></div>
              <span>{url}</span>
              <span>🔒</span>
            </div>
            <CheckoutPreview name={name} price={price} recur={recur} bumps={bumps.filter(b=>b.on)} methods={methods} theme={theme}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function CheckoutPreview({ name, price, recur, bumps, methods, theme }) {
  const themes = {
    ink: { bg: "var(--kp-paper)", card: "var(--kp-white)", accent: "var(--kp-pink)", text: "var(--kp-ink)" },
    green: { bg: "var(--kp-green)", card: "var(--kp-white)", accent: "var(--kp-ink)", text: "var(--kp-ink)" },
    pink: { bg: "var(--kp-pink-soft)", card: "var(--kp-white)", accent: "var(--kp-pink)", text: "var(--kp-ink)" },
    dark: { bg: "var(--kp-ink)", card: "rgba(247,241,232,0.05)", accent: "var(--kp-green)", text: "var(--kp-paper)" },
  };
  const t = themes[theme] || themes.ink;
  const bumpsTotal = bumps.reduce((s,b)=>s+b.p,0);
  return (
    <div style={{ background: t.bg, padding: 22, color: t.text, minHeight: 520 }}>
      <div style={{ fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.2em", color: t.accent }}>SEQUÊNCIA · CHECKOUT</div>
      <h2 className="kp-display" style={{ fontSize: 28, color: t.text, lineHeight: 1.05, marginTop: 6 }}>
        Tá <em>quase lá.</em>
      </h2>
      <div style={{ background: t.card, border: "1.5px solid var(--kp-ink)", padding: 14, marginTop: 12 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", color: "var(--kp-ink)" }}>
          <span style={{ fontSize: 13, fontWeight: 500 }}>{name}</span>
          <span className="kp-display" style={{ fontSize: 24, fontStyle: "italic" }}>{brl(price)}<span style={{ fontSize: 10, color: "var(--kp-muted)" }}>{recur === "monthly" ? "/mês" : recur === "yearly" ? "/ano" : ""}</span></span>
        </div>
      </div>
      {bumps.length > 0 && (
        <div style={{ marginTop: 12 }}>
          <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: t.accent }}>+ ADICIONAR</div>
          {bumps.map(b => (
            <div key={b.id} style={{ background: t.card, border: "1.5px solid var(--kp-ink)", padding: 10, marginTop: 6, display: "flex", justifyContent: "space-between", alignItems: "center", color: "var(--kp-ink)" }}>
              <span style={{ fontSize: 12 }}>✓ {b.t}</span>
              <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>+ {brl(b.p)}</span>
            </div>
          ))}
        </div>
      )}
      <div style={{ marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap" }}>
        {Object.entries(methods).filter(([k,v])=>v).map(([k]) => (
          <span key={k} style={{ padding: "4px 8px", border: "1.5px solid " + t.text, background: t.card, color: "var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.14em", textTransform: "uppercase" }}>{k}</span>
        ))}
      </div>
      <div style={{ marginTop: 18, padding: 14, background: t.accent === t.text ? t.card : t.accent, color: theme === "ink" || theme === "pink" ? "var(--kp-ink)" : "var(--kp-paper)", border: "1.5px solid var(--kp-ink)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
        <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em" }}>TOTAL</span>
        <span className="kp-display" style={{ fontSize: 32, fontStyle: "italic" }}>{brl(price + bumpsTotal)}</span>
      </div>
      <button style={{ width: "100%", marginTop: 12, padding: 14, background: t.text, color: t.bg, border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", cursor: "pointer", boxShadow: "3px 3px 0 0 " + t.accent }}>
          Confirmar e pagar →
      </button>
    </div>
  );
}

function Field({ label, value, onChange, prefix }) {
  return (
    <label style={{ display: "block", marginTop: 4 }}>
      <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>{label.toUpperCase()}</span>
      <div style={{ marginTop: 6, display: "flex", border: "1.5px solid var(--kp-ink)" }}>
        {prefix && <span style={{ padding: "10px 12px", background: "var(--kp-soft)", borderRight: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 12, color: "var(--kp-muted)" }}>{prefix}</span>}
        <input className="kp-input" value={value} onChange={(e)=>onChange(e.target.value)} style={{ border: "none", flex: 1 }}/>
      </div>
    </label>
  );
}
function NumField({ label, value, onChange }) {
  return (
    <label>
      <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>{label.toUpperCase()}</span>
      <input className="kp-input" type="number" value={value} onChange={(e)=>onChange(parseFloat(e.target.value)||0)} style={{ marginTop: 6 }}/>
    </label>
  );
}
function SelectField({ label, value, onChange, options }) {
  return (
    <label>
      <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>{label.toUpperCase()}</span>
      <select className="kp-input" value={value} onChange={(e)=>onChange(e.target.value)} style={{ marginTop: 6 }}>
        {options.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
      </select>
    </label>
  );
}
function Toggle({ on, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: 44, height: 24, padding: 0,
      border: "1.5px solid var(--kp-ink)",
      background: on ? "var(--kp-green)" : "var(--kp-white)",
      cursor: "pointer", position: "relative",
    }}>
      <span style={{ position: "absolute", top: 1, left: on ? 21 : 1, width: 18, height: 18, background: "var(--kp-ink)", transition: "left .15s ease" }}/>
    </button>
  );
}

window.SEQ_CKBUILDER = CheckoutBuilder;