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

const KIND_LABEL = { subscription: "Assinatura", proposal: "Proposta", infoproduct: "Infoproduto", avulso: "Avulso", bundle: "Bundle" };
const KIND_FROM_LABEL = { "Assinatura": "subscription", "Proposta": "proposal", "Infoproduto": "infoproduct", "Avulso": "avulso", "Bundle": "bundle" };
const CYCLE_LABEL = { monthly: "/mês", yearly: "/ano", quarterly: "/trim", weekly: "/sem", once: "único" };
const COLOR_BY_KIND = { subscription: "var(--kp-pink)", proposal: "var(--kp-green)", infoproduct: "var(--kp-cold)", avulso: "var(--kp-warm)", bundle: "var(--kp-pink-soft)" };

const PRODUTOS_FALLBACK = [
  { id: "p1", nome: "Mentoria 1:1 mensal", tipo: "Assinatura", preco: 1200, ciclo: "/mês", vendas: 18, mrr: 21600, status: "ativo", color: "var(--kp-pink)", emoji: "◉" },
  { id: "p2", nome: "Setup IA personalizado", tipo: "Proposta", preco: 4000, ciclo: "único", vendas: 7, mrr: 0, status: "ativo", color: "var(--kp-green)", emoji: "◐" },
  { id: "p3", nome: "Curso Sequência Viral", tipo: "Infoproduto", preco: 290, ciclo: "único", vendas: 42, mrr: 0, status: "ativo", color: "var(--kp-cold)", emoji: "◓" },
];

function transformProduct(r) {
  return {
    id: r.id,
    nome: r.name,
    tipo: KIND_LABEL[r.kind] || r.kind,
    preco: (r.price ?? 0) / 100,
    ciclo: CYCLE_LABEL[r.billingCycle] || "único",
    vendas: r.salesCount ?? 0,
    mrr: (r.mrr ?? 0) / 100,
    status: r.status === "active" ? "ativo" : r.status,
    color: r.coverColor || COLOR_BY_KIND[r.kind] || "var(--kp-soft)",
    emoji: r.emoji || "◌",
    raw: {
      id: r.id,
      name: r.name,
      kind: r.kind,
      price: r.price ?? 0,
      billingCycle: r.billingCycle || "once",
      status: r.status || "active",
      coverColor: r.coverColor || COLOR_BY_KIND[r.kind] || "var(--kp-soft)",
      emoji: r.emoji || "◌",
    },
  };
}

const TIPOS = ["Tudo", "Assinatura", "Proposta", "Infoproduto", "Avulso", "Bundle"];

function Produtos() {
  const [filter, setFilter] = React.useState("Tudo");
  const [view, setView] = React.useState("grid");
  const [modal, setModal] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [items, setItems] = React.useState(PRODUTOS_FALLBACK);

  React.useEffect(() => {
    window.SEQ_API.listProducts()
      .then(d => {
        if (d.products?.length) setItems(d.products.map(transformProduct));
      })
      .catch(() => {});
  }, []);

  const list = filter === "Tudo" ? items : items.filter(p => p.tipo === filter);

  return (
    <div style={{ minHeight: "100vh", background: "var(--kp-paper)" }}>
      <PageHead
        num="08"
        label="CATÁLOGO"
        title="O que você"
        em="vende."
        actions={(<>
          <button className="kp-btn kp-btn-sm" onClick={()=>setView(view==="grid"?"list":"grid")}>{view === "grid" ? "Lista" : "Grade"}</button>
          <button className="kp-btn kp-btn-sm" onClick={()=>setModal(true)}>+ Novo produto</button>
          <button className="kp-btn kp-btn-sm kp-btn-ink">Importar</button>
        </>)}
      />

      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 28px 80px" }}>
        {/* KPIs do catálogo */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginBottom: 22 }}>
          <KPI label="Produtos ativos" value="6" sub="1 em rascunho"/>
          <KPI label="MRR do catálogo" value={brl(43480)} sub="3 produtos recorrentes" bg="var(--kp-green)" trend="up" pulse/>
          <KPI label="Receita avulsa 30d" value={brl(15240)} sub="11 vendas avulsas" bg="var(--kp-cold)"/>
          <KPI label="Ticket médio" value={brl(580)} sub="+R$42 vs. mês anterior" trend="up"/>
        </div>

        {/* Filtros */}
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18, flexWrap: "wrap" }}>
          {TIPOS.map(t => (
            <button key={t} onClick={()=>setFilter(t)} style={{
              padding: "7px 14px", border: "1.5px solid var(--kp-ink)", cursor: "pointer",
              background: filter === t ? "var(--kp-ink)" : "var(--kp-white)",
              color: filter === t ? "var(--kp-paper)" : "var(--kp-ink)",
              fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase",
              boxShadow: filter === t ? "3px 3px 0 0 var(--kp-pink)" : "none",
            }}>{t}</button>
          ))}
          <span style={{ flex: 1 }}/>
          <input className="kp-input" placeholder="buscar produto…" style={{ maxWidth: 260, padding: "8px 12px", fontSize: 12 }}/>
        </div>

        {/* Grid de produtos */}
        {view === "grid" ? (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px,1fr))", gap: 16 }}>
            {list.map(p => (
              <div key={p.id} className="kp-card" style={{ padding: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
                <div style={{ background: p.color, padding: "20px 18px", borderBottom: "1.5px solid var(--kp-ink)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                  <div style={{ fontFamily: "var(--kp-display)", fontSize: 44, lineHeight: 1, fontStyle: "italic" }}>{p.emoji}</div>
                  <Pill>{p.tipo.toUpperCase()}</Pill>
                </div>
                <div style={{ padding: 18, flex: 1, display: "flex", flexDirection: "column" }}>
                  <h3 className="kp-display" style={{ fontSize: 22, lineHeight: 1.1, margin: 0 }}>{p.nome}</h3>
                  <div style={{ marginTop: "auto", paddingTop: 18, display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <div>
                      <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-muted)" }}>{p.vendas} VENDAS</div>
                      {p.mrr > 0 && <div className="kp-mono" style={{ fontSize: 9, letterSpacing: "0.16em", color: "var(--kp-pink)", marginTop: 2 }}>MRR {brl(p.mrr)}</div>}
                    </div>
                    <div style={{ textAlign: "right" }}>
                      <span className="kp-display" style={{ fontSize: 28, fontStyle: "italic" }}>{brl(p.preco)}</span>
                      {p.ciclo !== "único" && <span style={{ fontSize: 11, color: "var(--kp-muted)" }}>{p.ciclo}</span>}
                    </div>
                  </div>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderTop: "1.5px solid var(--kp-ink)" }}>
                  <button onClick={() => setEditing(p.raw || {
                    id: p.id,
                    name: p.nome,
                    kind: KIND_FROM_LABEL[p.tipo] || "avulso",
                    price: Math.round((p.preco || 0) * 100),
                    billingCycle: p.ciclo === "/mês" ? "monthly" : p.ciclo === "/ano" ? "yearly" : p.ciclo === "/trim" ? "quarterly" : p.ciclo === "/sem" ? "weekly" : "once",
                    status: p.status === "ativo" ? "active" : p.status,
                    coverColor: p.color,
                    emoji: p.emoji,
                  })} className="kp-btn kp-btn-ghost" style={{ borderRadius: 0, boxShadow: "none", borderRight: "1px solid rgba(10,10,10,0.1)" }}>Editar</button>
                  <a href="#/checkout-builder" className="kp-btn kp-btn-ghost" style={{ borderRadius: 0, boxShadow: "none" }}>Gerar link →</a>
                </div>
              </div>
            ))}

            {/* Card "novo" */}
            <button onClick={()=>setModal(true)} style={{
              border: "1.5px dashed var(--kp-ink)", background: "transparent",
              padding: "32px 18px", cursor: "pointer", display: "flex", flexDirection: "column",
              alignItems: "center", justifyContent: "center", gap: 8, minHeight: 220,
            }}>
              <span className="kp-display" style={{ fontSize: 56, fontStyle: "italic", color: "var(--kp-pink)", lineHeight: 1 }}>+</span>
              <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>NOVO PRODUTO</span>
            </button>
          </div>
        ) : (
          <div className="kp-card" style={{ padding: 0 }}>
            <div style={{ display: "grid", gridTemplateColumns: "auto 2fr 1fr 1fr 1fr 1fr auto", padding: "12px 18px", borderBottom: "1.5px solid var(--kp-ink)", background: "var(--kp-soft)", fontFamily: "var(--kp-mono)", fontSize: 9, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--kp-muted)", gap: 14 }}>
              <div></div><div>Produto</div><div>Tipo</div><div>Preço</div><div>Vendas</div><div>MRR</div><div></div>
            </div>
            {list.map((p,i) => (
              <div key={p.id} style={{ display: "grid", gridTemplateColumns: "auto 2fr 1fr 1fr 1fr 1fr auto", gap: 14, padding: "12px 18px", alignItems: "center", borderBottom: i === list.length-1 ? "none" : "1px solid rgba(10,10,10,0.08)", background: i % 2 === 1 ? "var(--kp-soft)" : "var(--kp-white)" }}>
                <span style={{ width: 32, height: 32, background: p.color, border: "1.5px solid var(--kp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--kp-display)", fontSize: 18 }}>{p.emoji}</span>
                <span style={{ fontSize: 13.5, fontWeight: 500 }}>{p.nome}</span>
                <Pill bg={p.color}>{p.tipo}</Pill>
                <span className="kp-display" style={{ fontSize: 18, fontStyle: "italic" }}>{brl(p.preco)}<span style={{ fontSize: 10, fontStyle: "normal", color: "var(--kp-muted)" }}>{p.ciclo === "único" ? "" : p.ciclo}</span></span>
                <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>{p.vendas}</span>
                <span className="kp-mono" style={{ fontSize: 10, letterSpacing: "0.14em", color: p.mrr > 0 ? "var(--kp-pink)" : "var(--kp-muted)" }}>{p.mrr > 0 ? brl(p.mrr) : "—"}</span>
                <button className="kp-btn kp-btn-sm">···</button>
              </div>
            ))}
          </div>
        )}

        {modal && <NewProductModal onClose={() => setModal(false)} onCreated={() => { setModal(false); window.location.reload(); }} />}
        {editing && <EditProductModal product={editing} onClose={() => setEditing(null)} onSaved={() => { setEditing(null); window.location.reload(); }} />}
      </div>
    </div>
  );
}

function NewProductModal({ onClose, onCreated }) {
  const [step, setStep] = React.useState(1);
  const [kind, setKind] = React.useState(null);
  const [name, setName] = React.useState("");
  const [price, setPrice] = React.useState("");
  const [billingCycle, setBillingCycle] = React.useState("once");
  const [emoji, setEmoji] = React.useState("◌");
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const KINDS = [
    { id: "subscription", l: "Assinatura", d: "Recorrente, mensal/anual", c: "var(--kp-pink)", emoji: "◉", cycle: "monthly" },
    { id: "proposal", l: "Proposta", d: "Personalizada por cliente", c: "var(--kp-green)", emoji: "◐", cycle: "once" },
    { id: "infoproduct", l: "Infoproduto", d: "Curso, ebook, acesso digital", c: "var(--kp-cold)", emoji: "◓", cycle: "once" },
    { id: "avulso", l: "Avulso", d: "Serviço único", c: "var(--kp-warm)", emoji: "◑", cycle: "once" },
  ];

  function chooseKind(k) {
    setKind(k);
    setBillingCycle(k.cycle);
    setEmoji(k.emoji);
    setStep(2);
  }

  async function submit(e) {
    e.preventDefault();
    if (!name.trim() || !price) return;
    setSubmitting(true);
    setError(null);
    try {
      const cents = Math.round(parseFloat(price.replace(",", ".").replace(/[^0-9.]/g, "")) * 100);
      await window.SEQ_API.createProduct({
        name: name.trim(),
        kind: kind.id,
        price: cents,
        billingCycle,
        coverColor: kind.c,
        emoji,
      });
      onCreated();
    } catch (err) {
      setError(err.message || "Falha ao criar produto.");
      setSubmitting(false);
    }
  }

  return (
    <div onClick={onClose} 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: 560, width: "100%", background: "var(--kp-paper)" }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>NOVO PRODUTO {step === 2 && `· ${kind.l.toUpperCase()}`}</div>

        {step === 1 && (
          <>
            <h2 className="kp-display" style={{ fontSize: 36, lineHeight: 1.05, marginTop: 6 }}>O que <em>você quer vender</em>?</h2>
            <div style={{ marginTop: 18, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
              {KINDS.map((k) => (
                <button key={k.id} type="button" onClick={() => chooseKind(k)} className="kp-card kp-card-soft" style={{ background: k.c, padding: 16, textAlign: "left", border: "1.5px solid var(--kp-ink)", cursor: "pointer" }}>
                  <div className="kp-display" style={{ fontSize: 22 }}>{k.l}</div>
                  <div style={{ fontSize: 12, color: "var(--kp-ink)", opacity: 0.7, marginTop: 4 }}>{k.d}</div>
                </button>
              ))}
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
              <button onClick={onClose} className="kp-btn" style={{ flex: 1 }}>Cancelar</button>
            </div>
          </>
        )}

        {step === 2 && (
          <form onSubmit={submit}>
            <h2 className="kp-display" style={{ fontSize: 32, lineHeight: 1.05, marginTop: 6 }}>Detalhes do <em>{kind.l.toLowerCase()}</em></h2>
            <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 12 }}>
              <label>
                <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>NOME</span>
                <input className="kp-input" required autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="Mentoria 1:1 mensal" style={{ marginTop: 6 }} />
              </label>
              <label>
                <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>PREÇO (R$)</span>
                <input className="kp-input" required value={price} onChange={(e) => setPrice(e.target.value)} placeholder="1200,00" style={{ marginTop: 6 }} />
              </label>
              {kind.id === "subscription" && (
                <label>
                  <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>RECORRÊNCIA</span>
                  <select value={billingCycle} onChange={(e) => setBillingCycle(e.target.value)} className="kp-input" style={{ marginTop: 6 }}>
                    <option value="monthly">Mensal</option>
                    <option value="quarterly">Trimestral</option>
                    <option value="yearly">Anual</option>
                  </select>
                </label>
              )}
            </div>
            {error && <div style={{ marginTop: 10, padding: "8px 12px", background: "#FFB5B5", border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.14em" }}>⚠ {error}</div>}
            <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
              <button type="button" onClick={() => setStep(1)} className="kp-btn" style={{ flex: 1 }}>Voltar</button>
              <button type="submit" disabled={submitting} className="kp-btn kp-btn-ink" style={{ flex: 2 }}>{submitting ? "Criando..." : "Criar produto →"}</button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

function EditProductModal({ product, onClose, onSaved }) {
  const [name, setName] = React.useState(product.name || "");
  const [price, setPrice] = React.useState(((product.price || 0) / 100).toFixed(2).replace(".", ","));
  const [kind, setKind] = React.useState(product.kind || "avulso");
  const [billingCycle, setBillingCycle] = React.useState(product.billingCycle || "once");
  const [status, setStatus] = React.useState(product.status || "active");
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(null);

  const KIND_OPTIONS = [
    { id: "subscription", l: "Assinatura" },
    { id: "proposal", l: "Proposta" },
    { id: "infoproduct", l: "Infoproduto" },
    { id: "avulso", l: "Avulso" },
  ];

  function changeKind(newKind) {
    setKind(newKind);
    if (newKind !== "subscription" && billingCycle !== "once") {
      setBillingCycle("once");
    } else if (newKind === "subscription" && billingCycle === "once") {
      setBillingCycle("monthly");
    }
  }

  async function submit(e) {
    e.preventDefault();
    if (!name.trim() || !price) return;
    setSubmitting(true);
    setError(null);
    try {
      const cents = Math.round(parseFloat(String(price).replace(",", ".").replace(/[^0-9.]/g, "")) * 100);
      const res = await fetch(`/api/products/${product.id}`, {
        method: "PATCH",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: name.trim(),
          price: cents,
          kind,
          billingCycle,
          status,
          coverColor: product.coverColor,
          emoji: product.emoji,
        }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || `Falha ao salvar (${res.status})`);
      }
      onSaved();
    } catch (err) {
      setError(err.message || "Falha ao salvar produto.");
      setSubmitting(false);
    }
  }

  return (
    <div onClick={onClose} 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: 560, width: "100%", background: "var(--kp-paper)" }}>
        <div className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.2em", color: "var(--kp-muted)" }}>EDITAR PRODUTO · {(KIND_LABEL[kind] || kind).toUpperCase()}</div>
        <form onSubmit={submit}>
          <h2 className="kp-display" style={{ fontSize: 32, lineHeight: 1.05, marginTop: 6 }}>Atualizar <em>{name || "produto"}</em></h2>
          <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>NOME</span>
              <input className="kp-input" required autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="Mentoria 1:1 mensal" style={{ marginTop: 6 }} />
            </label>
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>PREÇO (R$)</span>
              <input className="kp-input" required value={price} onChange={(e) => setPrice(e.target.value)} placeholder="1200,00" style={{ marginTop: 6 }} />
            </label>
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>TIPO</span>
              <select value={kind} onChange={(e) => changeKind(e.target.value)} className="kp-input" style={{ marginTop: 6 }}>
                {KIND_OPTIONS.map((k) => <option key={k.id} value={k.id}>{k.l}</option>)}
              </select>
            </label>
            {kind === "subscription" && (
              <label>
                <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>RECORRÊNCIA</span>
                <select value={billingCycle} onChange={(e) => setBillingCycle(e.target.value)} className="kp-input" style={{ marginTop: 6 }}>
                  <option value="monthly">Mensal</option>
                  <option value="quarterly">Trimestral</option>
                  <option value="yearly">Anual</option>
                </select>
              </label>
            )}
            <label>
              <span className="kp-mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", color: "var(--kp-muted)" }}>STATUS</span>
              <select value={status} onChange={(e) => setStatus(e.target.value)} className="kp-input" style={{ marginTop: 6 }}>
                <option value="active">Ativo</option>
                <option value="draft">Rascunho</option>
                <option value="archived">Arquivado</option>
              </select>
            </label>
          </div>
          {error && <div style={{ marginTop: 10, padding: "8px 12px", background: "#FFB5B5", border: "1.5px solid var(--kp-ink)", fontFamily: "var(--kp-mono)", fontSize: 10, letterSpacing: "0.14em" }}>⚠ {error}</div>}
          <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
            <button type="button" onClick={onClose} className="kp-btn" style={{ flex: 1 }}>Cancelar</button>
            <button type="submit" disabled={submitting} className="kp-btn kp-btn-ink" style={{ flex: 2 }}>{submitting ? "Salvando..." : "Salvar alterações →"}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

window.SEQ_PRODUTOS = Produtos;