/* global React, VendusAtoms, VendusData */
const { I, Chip, Btn, Card, Eyebrow, SectionTitle, AreaChart, Bars, Donut, Sparkline, brl, brlShort, pct } = window.VendusAtoms;
const { STORES, REVENUE_MONTH, COSTS_MONTH, REVENUE_DAYS, TOP_PRODUCTS, RECENT_SALES, SUPPLIERS, COSTS, CASHFLOW_30D, PAYMENT_ALERTS } = window.VendusData;
const { useState, useMemo, useEffect } = React;

/* ============================= PRODUTOS ============================= */
function ProductsPage({ navigate }) {
  const [view, setView] = useState("grid");
  const [search, setSearch] = useState("");
  const [filterCat, setFilterCat] = useState("all");

  const cats = ["Acessórios","Áudio","Energia","Wearables","Iluminação","Gaming","Beauty","Moda","Casa"];

  const allProducts = useMemo(() => {
    const more = [
      { sku: "BAG-NEO-001", name: "Bolsa Tote Neoprene Premium", cat: "Moda",       units: 86,  revenue: 12_900, margin: 52.1, stock: 47,  trend:[3,5,4,7,8,10,9,11], cover:"👜" },
      { sku: "SER-VC-30",   name: "Sérum Vitamina C 30ml",        cat: "Beauty",     units: 234, revenue: 18_720, margin: 64.2, stock: 92,  trend:[8,11,13,16,18,22,24,28], cover:"💧" },
      { sku: "MUG-CER-450", name: "Caneca Cerâmica 450ml",        cat: "Casa",       units: 167, revenue:  6_680, margin: 41.8, stock: 134, trend:[5,7,6,9,11,13,12,15], cover:"☕" },
      { sku: "KEY-MEC-RGB", name: "Teclado Mecânico RGB Hot-swap", cat: "Gaming",    units: 64,  revenue: 19_200, margin: 33.4, stock: 18,  trend:[2,3,5,4,6,8,9,11], cover:"⌨" },
    ];
    return [...TOP_PRODUCTS, ...more];
  }, []);

  const filtered = allProducts.filter(p =>
    (filterCat==="all" || p.cat===filterCat) &&
    (search==="" || p.name.toLowerCase().includes(search.toLowerCase()) || p.sku.toLowerCase().includes(search.toLowerCase()))
  );

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Catálogo</Eyebrow>
          <h1 className="page-title">Produtos</h1>
          <div className="page-sub">{allProducts.length} SKUs ativos · {filtered.length} resultados</div>
        </div>
        <div style={{ display:"flex", gap: 10 }}>
          <Btn variant="outline"><I name="upload" size={14}/> Importar planilha</Btn>
          <Btn variant="secondary"><I name="zap" size={14}/> Reconhecimento IA</Btn>
          <Btn variant="primary"><I name="plus" size={14}/> Novo produto</Btn>
        </div>
      </div>

      {/* KPI strip */}
      <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap: 16, marginBottom: 20 }}>
        {[
          { l:"SKUs ativos",     v: allProducts.length, sub: "+3 esta semana", icon:"package", tone:"orange" },
          { l:"Valor em estoque",v: brl(184_320),       sub: "1.428 unidades", icon:"layers", tone:"violet" },
          { l:"Margem média",    v: "39,4%",            sub: "Meta 38%",       icon:"percent", tone:"success" },
          { l:"SKUs em ruptura", v: "3",                sub: "Repor em 7 dias",icon:"alert-triangle", tone:"danger" },
        ].map(k=>(
          <Card key={k.l} className={`kpi kpi-${k.tone}`} padding={18}>
            <div className="kpi-icon"><I name={k.icon} size={18}/></div>
            <div className="kpi-label">{k.l}</div>
            <div className="kpi-value">{k.v}</div>
            <div className="kpi-delta" style={{ color:"var(--fg-3)", fontWeight: 500 }}>{k.sub}</div>
          </Card>
        ))}
      </div>

      {/* Toolbar */}
      <Card padding={12} style={{ marginBottom: 16 }}>
        <div style={{ display:"flex", alignItems:"center", gap: 10, flexWrap:"wrap" }}>
          <div style={{ position:"relative", flex:"0 0 320px" }}>
            <I name="search" size={14} style={{ position:"absolute", left: 12, top: 11, color: "var(--fg-3)" }}/>
            <input className="input" placeholder="Buscar por nome ou SKU..." value={search} onChange={e=>setSearch(e.target.value)} style={{ paddingLeft: 34 }}/>
          </div>
          <select className="select" style={{ width: 160 }} value={filterCat} onChange={e=>setFilterCat(e.target.value)}>
            <option value="all">Todas categorias</option>
            {cats.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
          <select className="select" style={{ width: 160 }}>
            <option>Todas as lojas</option>
            {STORES.map(s=> <option key={s.id}>{s.channel}</option>)}
          </select>
          <select className="select" style={{ width: 140 }}>
            <option>Status: ativos</option><option>Inativos</option><option>Rascunho</option>
          </select>
          <div style={{ flex: 1 }}></div>
          <Chip tone="success" dot="on">3 lojas sincronizadas</Chip>
          <div className="seg">
            <button onClick={()=>setView("grid")}  className={view==="grid"?"active":""}><I name="grid-3x3" size={12}/></button>
            <button onClick={()=>setView("list")}  className={view==="list"?"active":""}><I name="list"     size={12}/></button>
          </div>
        </div>
      </Card>

      {view === "grid" ? (
        <div style={{ display:"grid", gridTemplateColumns:"repeat(auto-fill, minmax(260px,1fr))", gap: 16 }}>
          {filtered.map(p => (
            <Card key={p.sku} className="card-hover" padding={16}>
              <div style={{ display: "flex", justifyContent:"space-between", alignItems:"flex-start", marginBottom: 12 }}>
                <div className="prod-thumb" style={{ width: 56, height: 56, fontSize: 24 }}>{p.cover}</div>
                <Chip tone={p.stock < 20 ? "danger" : p.stock < 50 ? "warning" : "success"}>
                  {p.stock} em estoque
                </Chip>
              </div>
              <div className="text-faint" style={{ fontSize: 11, letterSpacing: ".06em", fontFamily:"Space Grotesk", fontWeight: 600 }}>{p.sku}</div>
              <div style={{ fontWeight: 600, fontSize: 14, marginTop: 2, lineHeight: 1.3, textWrap:"pretty" }}>{p.name}</div>
              <div className="text-muted" style={{ fontSize: 12, marginTop: 4 }}>{p.cat}</div>

              <div style={{ display:"flex", justifyContent:"space-between", marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
                <div>
                  <div className="text-faint" style={{ fontSize: 10.5, letterSpacing: ".06em", fontFamily:"Space Grotesk" }}>RECEITA</div>
                  <div className="font-display mono-numeric" style={{ fontWeight: 700, fontSize: 14 }}>{brlShort(p.revenue)}</div>
                </div>
                <div>
                  <div className="text-faint" style={{ fontSize: 10.5, letterSpacing: ".06em", fontFamily:"Space Grotesk" }}>MARGEM</div>
                  <div className="font-display mono-numeric text-success" style={{ fontWeight: 700, fontSize: 14 }}>{p.margin.toFixed(1).replace(".",",")}%</div>
                </div>
                <div>
                  <div className="text-faint" style={{ fontSize: 10.5, letterSpacing: ".06em", fontFamily:"Space Grotesk" }}>UNID</div>
                  <div className="font-display mono-numeric" style={{ fontWeight: 700, fontSize: 14 }}>{p.units}</div>
                </div>
              </div>
              <Sparkline values={p.trend} color="var(--primary)" width={224} height={28}/>
            </Card>
          ))}
        </div>
      ) : (
        <Card padding={0}>
          <table className="tbl">
            <thead>
              <tr>
                <th>Produto</th>
                <th>SKU</th>
                <th>Categoria</th>
                <th className="num">Estoque</th>
                <th className="num">Unid vend</th>
                <th className="num">Receita</th>
                <th className="num">Margem</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(p => (
                <tr key={p.sku}>
                  <td>
                    <div style={{ display:"flex", alignItems:"center", gap: 10 }}>
                      <div className="prod-thumb">{p.cover}</div>
                      <div>
                        <div style={{ fontWeight: 600 }}>{p.name}</div>
                        <div className="text-faint" style={{ fontSize: 11 }}>4 lojas · Sincronizado</div>
                      </div>
                    </div>
                  </td>
                  <td className="text-muted" style={{ fontFamily:"Space Grotesk", fontSize: 12 }}>{p.sku}</td>
                  <td><Chip>{p.cat}</Chip></td>
                  <td className="num"><Chip tone={p.stock < 20 ? "danger" : p.stock < 50 ? "warning" : "success"}>{p.stock}</Chip></td>
                  <td className="num mono-numeric">{p.units}</td>
                  <td className="num mono-numeric font-display" style={{ fontWeight: 600 }}>{brl(p.revenue)}</td>
                  <td className="num text-success" style={{ fontWeight: 600 }}>{p.margin.toFixed(1).replace(".",",")}%</td>
                  <td className="num">
                    <Btn variant="ghost" size="sm" iconOnly><I name="more-horizontal" size={14}/></Btn>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
}

/* ============================= VENDAS ============================= */
function SalesPage() {
  const [tab, setTab] = useState("all");
  const sales = useMemo(() => {
    const base = RECENT_SALES;
    const extra = Array.from({ length: 14 }, (_, i) => ({
      id: "VND-" + (2884 - i),
      store: STORES[i%4].name,
      product: TOP_PRODUCTS[i%TOP_PRODUCTS.length].name,
      qty: 1 + (i%3),
      total: TOP_PRODUCTS[i%TOP_PRODUCTS.length].revenue / TOP_PRODUCTS[i%TOP_PRODUCTS.length].units * (1+(i%3)),
      status: ["paid","shipped","paid","pending","paid","shipped"][i%6],
      payment: ["PIX","Cartão","PIX","Boleto","Cartão"][i%5],
      time: `há ${Math.floor(2 + i*0.7)} h`,
    }));
    return [...base, ...extra];
  }, []);

  const filtered = tab==="all" ? sales : sales.filter(s => s.status===tab);

  const todayRevenue = 18_460;
  const todayOrders = 142;
  const conversionRate = 3.8;
  const refundRate = 2.1;

  return (
    <div className="page fade-in">
      <div className="page-header">
        <div>
          <Eyebrow>Pedidos · Multicanal</Eyebrow>
          <h1 className="page-title">Vendas</h1>
          <div className="page-sub">Acompanhe pedidos das suas 4 lojas em tempo real</div>
        </div>
        <div style={{ display:"flex", gap: 10 }}>
          <Btn variant="outline"><I name="filter" size={14}/> Filtros</Btn>
          <Btn variant="outline"><I name="download" size={14}/> Exportar</Btn>
          <Btn variant="primary"><I name="plus" size={14}/> Lançar venda manual</Btn>
        </div>
      </div>

      <div style={{ display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap: 16, marginBottom: 20 }}>
        <Card className="kpi kpi-orange" padding={18}>
          <div className="kpi-icon"><I name="dollar-sign" size={18}/></div>
          <div className="kpi-label">Receita hoje</div>
          <div className="kpi-value">{brl(todayRevenue)}</div>
          <div className="kpi-delta up">{pct(12.3)} vs ontem</div>
        </Card>
        <Card className="kpi" padding={18}>
          <div className="kpi-icon"><I name="shopping-cart" size={18}/></div>
          <div className="kpi-label">Pedidos hoje</div>
          <div className="kpi-value">{todayOrders}</div>
          <div className="kpi-delta up">{pct(8.6)} vs ontem</div>
        </Card>
        <Card className="kpi kpi-success" padding={18}>
          <div className="kpi-icon"><I name="target" size={18}/></div>
          <div className="kpi-label">Conversão</div>
          <div className="kpi-value">{conversionRate}%</div>
          <div className="kpi-delta up">{pct(0.4)} vs média</div>
        </Card>
        <Card className="kpi kpi-danger" padding={18}>
          <div className="kpi-icon"><I name="rotate-ccw" size={18}/></div>
          <div className="kpi-label">Devoluções</div>
          <div className="kpi-value">{refundRate}%</div>
          <div className="kpi-delta down">3 abertas</div>
        </Card>
      </div>

      <Card style={{ marginBottom: 16 }}>
        <SectionTitle title="Pedidos por hora" sub="Hoje, das 00h às 23h"/>
        <Bars
          data={Array.from({length:24}, (_, h) => {
            const v = Math.round(2 + Math.sin((h-6)/24*Math.PI*2)*4 + h*0.3 + (h>=18&&h<=22?5:0) + (h % 3));
            return { label: String(h).padStart(2,"0"), value: Math.max(1,v), short: Math.max(1,v) };
          })}
          height={130}
        />
      </Card>

      <Card padding={0}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)", display:"flex", alignItems:"center", justifyContent:"space-between" }}>
          <h3 className="section-title">Todos os pedidos</h3>
          <div className="seg">
            {[["all","Todos"],["paid","Pagos"],["shipped","Enviados"],["pending","Pendentes"],["refunded","Devolvidos"]].map(([k,l]) =>
              <button key={k} onClick={()=>setTab(k)} className={tab===k?"active":""}>{l}</button>
            )}
          </div>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Pedido</th>
              <th>Produto</th>
              <th>Loja</th>
              <th>Pagamento</th>
              <th>Status</th>
              <th>Data</th>
              <th className="num">Qtd</th>
              <th className="num">Total</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(s => (
              <tr key={s.id}>
                <td className="font-display" style={{ fontWeight: 600, fontSize: 12.5 }}>{s.id}</td>
                <td style={{ maxWidth: 280, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{s.product}</td>
                <td>
                  <span style={{ display:"inline-flex", alignItems:"center", gap: 6 }}>
                    <span style={{ width:6, height:6, borderRadius:999, background: STORES.find(st=>s.store.includes(st.channel.split(" ")[0]))?.color || "#888" }}></span>
                    <span className="text-muted" style={{ fontSize: 12 }}>{s.store.split(" — ")[0]}</span>
                  </span>
                </td>
                <td>{s.payment}</td>
                <td>
                  <Chip tone={s.status==="paid"?"success":s.status==="shipped"?"info":s.status==="pending"?"warning":"danger"}>
                    {s.status==="paid"?"Pago":s.status==="shipped"?"Enviado":s.status==="pending"?"Pendente":"Devolvido"}
                  </Chip>
                </td>
                <td className="text-faint">{s.time}</td>
                <td className="num mono-numeric">{s.qty}</td>
                <td className="num mono-numeric font-display" style={{ fontWeight: 700 }}>{brl(s.total)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}

/* ============================= CALCULADORA ============================= */
function CalculatorPage() {
  // Taxas usadas só pela prévia rápida do módulo "Custo por material" (a precificação real
  // mora no PricingPanel, que puxa as faixas reais por marketplace).
  const marketplaceFee = 12, tax = 4, ads = 6, margin = 35, shipping = 8.5, packaging = 1.2;
  // Módulo "Custo por material" (peso → custo → venda)
  const [topMode, setTopMode] = useState("pricing"); // pricing | material
  const [materialCusto, setMaterialCusto] = useState(""); // custo levado do material → calculadora
  const [ppKey, setPpKey] = useState(0);                  // força o PricingPanel a re-inicializar com o novo custo
  const [espessuraMm, setEspessuraMm] = useState(3);
  const [comprimentoCm, setComprimentoCm] = useState(100);
  const [larguraCm, setLarguraCm] = useState(50);
  const [densidade, setDensidade] = useState(1.19);
  const [precoKg, setPrecoKg] = useState(45);

  // Custo por material: peso = (esp mm→cm) × comp × larg × densidade (g) ÷ 1000 = kg
  const pesoKg = (espessuraMm / 10) * comprimentoCm * larguraCm * densidade / 1000;
  const custoMaterial = pesoKg * precoKg;
  // Prévia do preço de venda reaproveitando a fórmula da precificação (custo = custoMaterial)
  const matDenom = 1 - margin / 100 - (marketplaceFee + tax + ads) / 100;
  const vendaMaterial = matDenom > 0.01 ? (custoMaterial + shipping + packaging) / matDenom : NaN;
  const vendaMaterialOk = vendaMaterial > 0 && isFinite(vendaMaterial);
  const matMargin = vendaMaterialOk ? (1 - (custoMaterial + shipping + packaging + vendaMaterial * (marketplaceFee + tax + ads) / 100) / vendaMaterial) * 100 : 0;

  return (
    <div className="page fade-in" style={{ maxWidth: 1200 }}>
      <div className="page-header">
        <div>
          <Eyebrow>Engine de Custos · Pricing</Eyebrow>
          <h1 className="page-title">Calculadora de preço</h1>
          <div className="page-sub">Defina o preço ideal por produto considerando todos os custos do canal</div>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <Btn variant="outline"><I name="bookmark" size={14}/> Salvar cenário</Btn>
          <Btn variant="primary"><I name="check" size={14}/> Aplicar a produtos</Btn>
        </div>
      </div>

      <div className="seg" style={{ marginBottom: 16 }}>
        <button onClick={()=>setTopMode("pricing")} className={topMode==="pricing"?"active":""}>Precificação</button>
        <button onClick={()=>setTopMode("material")} className={topMode==="material"?"active":""}>Custo por material</button>
      </div>

      {topMode === "pricing" && (
        <Card>
          <window.VendusPricing.PricingPanel key={ppKey} custoInicial={materialCusto} />
        </Card>
      )}

      {topMode === "material" && (
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 16 }}>
          <Card>
            <Eyebrow>Medidas da peça</Eyebrow>
            <div className="text-muted" style={{ fontSize: 12.5, margin: "6px 0 14px", lineHeight: 1.5 }}>
              Calcula o peso e o custo por medida (ex.: chapa de acrílico). A densidade do acrílico é ≈ 1,19 — edite para outros materiais (PVC, MDF…).
            </div>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap: 14 }}>
              <Field label="Espessura" value={espessuraMm} onChange={setEspessuraMm} suffix="mm"/>
              <Field label="Comprimento" value={comprimentoCm} onChange={setComprimentoCm} suffix="cm"/>
              <Field label="Largura" value={larguraCm} onChange={setLarguraCm} suffix="cm"/>
              <Field label="Densidade" value={densidade} onChange={setDensidade} suffix="g/cm³"/>
              <Field label="Preço por kg" value={precoKg} onChange={setPrecoKg} prefix="R$"/>
            </div>
            <div className="text-faint" style={{ fontSize: 11.5, marginTop: 12, lineHeight: 1.5 }}>
              Peso = espessura × comprimento × largura × densidade. Custo = peso × preço por kg.
            </div>
          </Card>

          <Card>
            <Eyebrow>Resultado</Eyebrow>
            {custoMaterial > 0 ? (
              <>
                <div style={{ textAlign:"center", margin:"10px 0 16px" }}>
                  <div style={{ color:"var(--fg-3)", fontSize:12 }}>Custo do material</div>
                  <div className="font-display" style={{ fontSize: 44, fontWeight:700, background:"var(--logo-gradient)", WebkitBackgroundClip:"text", WebkitTextFillColor:"transparent", letterSpacing:"-0.02em" }}>{brl(custoMaterial)}</div>
                  <div className="text-faint" style={{ fontSize: 12.5, marginTop: 4 }}>
                    Peso: <b className="mono-numeric">{pesoKg.toFixed(3).replace(".",",")} kg</b> · {Math.round(pesoKg*1000).toLocaleString("pt-BR")} g
                  </div>
                </div>

                <div style={{ borderTop:"1px solid var(--border)", paddingTop: 14 }}>
                  <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
                    <span className="text-muted" style={{ fontSize: 13 }}>Preço de venda sugerido</span>
                    {vendaMaterialOk
                      ? <span className="font-display" style={{ fontSize: 22, fontWeight: 800, color: "var(--primary)" }}>{brl(vendaMaterial)}</span>
                      : <span className="text-danger" style={{ fontSize: 12.5 }}>ajuste margem/taxas</span>}
                  </div>
                  {vendaMaterialOk && (
                    <div className="text-faint" style={{ fontSize: 11.5, marginTop: 4, lineHeight: 1.5 }}>
                      Margem {matMargin.toFixed(0)}% · com suas taxas atuais (marketplace {marketplaceFee}%, imposto {tax}%, anúncios {ads}%, frete {brl(shipping)}, embalagem {brl(packaging)}).
                    </div>
                  )}
                  <div style={{ marginTop: 14 }}>
                    <Btn variant="primary" onClick={() => { setMaterialCusto(Math.round(custoMaterial*100)/100); setPpKey(k => k + 1); setTopMode("pricing"); }}>
                      <I name="arrow-right" size={14}/> Ajustar na Precificação
                    </Btn>
                  </div>
                  <div className="text-faint" style={{ fontSize: 11, marginTop: 8 }}>
                    Leva este custo para a aba Precificação, com frete, embalagem e taxas, e mostra o detalhamento completo.
                  </div>
                </div>
              </>
            ) : (
              <div className="text-muted" style={{ textAlign:"center", fontSize: 13.5, padding:"30px 10px" }}>
                Preencha as medidas para ver o peso e o custo.
              </div>
            )}
          </Card>
        </div>
      )}
    </div>
  );
}

function Field({ label, value, onChange, prefix, suffix, large }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 12, color: "var(--fg-2)", fontWeight: 600, marginBottom: 6 }}>{label}</div>
      <div style={{ position: "relative" }}>
        {prefix ? <span style={{ position:"absolute", left:12, top: "50%", transform:"translateY(-50%)", color: "var(--fg-3)", fontSize: 13 }}>{prefix}</span> : null}
        <input
          type="number" step="0.01"
          className="input mono-numeric"
          value={value}
          onChange={e => onChange(+e.target.value || 0)}
          style={{ paddingLeft: prefix ? 36 : 12, paddingRight: suffix ? 36 : 12, fontSize: large ? 18 : 13, height: large ? 48 : 36, fontWeight: large ? 700 : 500, fontFamily: large ? "Space Grotesk" : "Barlow" }}
        />
        {suffix ? <span style={{ position:"absolute", right:12, top: "50%", transform:"translateY(-50%)", color: "var(--fg-3)", fontSize: 13 }}>{suffix}</span> : null}
      </div>
    </label>
  );
}

window.VendusPagesA = { ProductsPage, SalesPage, CalculatorPage };