/* global React, PRODUCTS, STORE, brl, productGradient, Icon, SALES_7D, STATUS_LABEL, stockState */
const { useState: useSv } = React;

/* ============================================================ DASHBOARD */
function Dashboard({ products, stock, orders, reminders, setReminders, sales, go }) {
  const [novo, setNovo] = useSv("");
  const nav = go || (() => {}); // fallback se não receber navegação
  const fatHoje = SALES_7D[SALES_7D.length - 1][1];
  const fatMes = 68420;
  const low = products.map((p) => ({ p, q: stock[p.id] })).filter((x) => x.q <= 8).sort((a, b) => a.q - b.q);
  const maxSale = Math.max(...SALES_7D.map((d) => d[1]));
  const recent = orders.slice(0, 5);

  const kpis = [
    { ic: "trend", label: "Faturamento hoje", val: brl(fatHoje), delta: "+18%", up: true, to: "vendas" },
    { ic: "receipt", label: "Pedidos hoje", val: 23, delta: "+5", up: true, to: "pedidos" },
    { ic: "tag", label: "Ticket médio", val: brl(fatMes / 412), delta: "+4%", up: true, to: "vendas" },
    { ic: "box", label: "Estoque baixo", val: low.length, delta: low.filter((l) => l.q === 0).length + " zerados", up: false, to: "produtos" },
  ];
  const addRem = () => { if (!novo.trim()) return; setReminders((r) => [{ id: "r" + Date.now(), text: novo.trim(), done: false }, ...r]); setNovo(""); };
  const toggleRem = (id) => setReminders((r) => r.map((x) => x.id === id ? { ...x, done: !x.done } : x));
  const delRem = (id) => setReminders((r) => r.filter((x) => x.id !== id));

  return (
    <>
      <div className="kpi-grid">
        {kpis.map((k) => (
          <div className="kpi clickable" key={k.label} onClick={() => nav(k.to)} title={"Ir para " + k.to}>
            <div className="k-top"><span className="k-ic"><Icon k={k.ic} size={20} /></span><span className="k-go"><Icon k="arrow" size={16} /></span></div>
            <div className="k-label">{k.label}</div>
            <div className="k-val">{k.val}</div>
            <div className={"k-delta " + (k.up ? "up" : "down")}>{k.up ? "▲" : "▼"} {k.delta}</div>
          </div>
        ))}
      </div>

      <div className="adm-cols">
        <div className="panel">
          <div className="panel-h"><h3>Vendas · 7 dias</h3><span style={{ color: "var(--dim)", fontWeight: 700, fontSize: 13 }}>Total {brl(SALES_7D.reduce((s, d) => s + d[1], 0))}</span></div>
          <div className="chart">
            {SALES_7D.map((d) => (
              <div className="bar-col" key={d[0]}>
                <span className="bar-val">{(d[1] / 1000).toFixed(1)}k</span>
                <div className="bar" style={{ height: (d[1] / maxSale * 100) + "%" }} />
                <span className="bar-lbl">{d[0]}</span>
              </div>
            ))}
          </div>
        </div>

        {/* QUADRO DE LEMBRETES */}
        <div className="panel">
          <div className="panel-h"><h3>Lembretes</h3><span style={{ color: "var(--dim)", fontSize: 12, fontWeight: 700 }}>{reminders.filter((r) => !r.done).length} abertos</span></div>
          <div className="rem-add">
            <input value={novo} onChange={(e) => setNovo(e.target.value)} onKeyDown={(e) => e.key === "Enter" && addRem()} placeholder="Novo lembrete…" />
            <button className="btn btn-yellow" onClick={addRem}><Icon k="plus" size={16} /></button>
          </div>
          <div className="rem-list">
            {reminders.map((r) => (
              <div className={"rem-item" + (r.done ? " done" : "")} key={r.id}>
                <button className="rem-check" onClick={() => toggleRem(r.id)}>{r.done && <Icon k="check" size={13} />}</button>
                <span className="rem-text">{r.text}</span>
                <button className="rem-del" onClick={() => delRem(r.id)}><Icon k="trash" size={14} /></button>
              </div>
            ))}
            {reminders.length === 0 && <p style={{ color: "var(--dim)", fontSize: 13, padding: "8px 2px" }}>Sem lembretes. Tudo em dia! 🎉</p>}
          </div>
        </div>
      </div>

      <div className="adm-cols">
        <div className="panel">
          <div className="panel-h"><h3>Pedidos recentes</h3><span className="see-all" onClick={() => nav("pedidos")} style={{ cursor: "pointer" }}>Ver todos <Icon k="arrow" size={14} /></span></div>
          {recent.map((o) => (
            <div className="recent-order clickable" key={o.id} onClick={() => nav("pedidos")} title="Abrir em Pedidos">
              <div style={{ fontFamily: "var(--font-display)", fontSize: 16, width: 56 }}>{o.id}</div>
              <div className="ls-info"><div className="ls-name">{o.cliente}</div><div className="ls-sub">{o.bairro} · {o.hora}</div></div>
              <span className={"pill " + o.status}><span className="d" />{STATUS_LABEL[o.status]}</span>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 17, width: 100, textAlign: "right" }}>{brl(o.total)}</div>
            </div>
          ))}
        </div>
        <div className="panel">
          <div className="panel-h"><h3>Estoque baixo</h3><span className="see-all" onClick={() => nav("produtos")} style={{ cursor: "pointer" }}>Gerenciar <Icon k="arrow" size={14} /></span></div>
          {low.slice(0, 5).map(({ p, q }) => (
            <div className="lowstock-item clickable" key={p.id} onClick={() => nav("produtos")} title="Gerenciar em Produtos">
              <div className="ls-thumb" style={{ background: productGradient(p) }}><div className="device" /></div>
              <div className="ls-info"><div className="ls-name">{p.brand} {p.model}</div><div className="ls-sub">{q === 0 ? "Sem estoque" : "Repor logo"}</div></div>
              <div className={"ls-qty " + (q === 0 ? "crit" : "warn")}>{q}</div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

/* ============================================================ VENDAS */
const TODAY = "2026-06-10";
function daysAgo(n) { const d = new Date(TODAY); d.setDate(d.getDate() - n); return d.toISOString().slice(0, 10); }
function fmtData(s) { const [y, m, d] = s.split("-"); return `${d}/${m}`; }

function Vendas({ products, sales, setSales }) {
  const P = products || PRODUCTS;
  const [periodo, setPeriodo] = useSv("7d");
  const [pgto, setPgto] = useSv("todos");
  const [form, setForm] = useSv(false);
  const [editId, setEditId] = useSv(null);
  const [draft, setDraft] = useSv({ produto: (P[0].brand + " " + P[0].model).trim(), qty: 1, valor: P[0].price, pgto: "Pix", canal: "WhatsApp", data: TODAY });

  const min = periodo === "hoje" ? TODAY : periodo === "7d" ? daysAgo(7) : periodo === "30d" ? daysAgo(30) : "0000";
  const list = sales.filter((s) => s.data >= min && (pgto === "todos" || s.pgto === pgto));
  const total = list.reduce((s, x) => s + x.valor, 0);
  const qtd = list.reduce((s, x) => s + x.qty, 0);

  const addSale = () => {
    const v = parseFloat(draft.valor) || 0;
    const qty = parseInt(draft.qty, 10) || 1;
    if (editId) {
      setSales((s) => s.map((x) => x.id === editId ? { ...x, ...draft, qty, valor: v } : x));
    } else {
      setSales((s) => [{ id: "V-" + Math.floor(3000 + Math.random() * 9000), ...draft, qty, valor: v }, ...s]);
    }
    setForm(false); setEditId(null);
  };
  const openNew = () => { setEditId(null); setDraft({ produto: (P[0].brand + " " + P[0].model).trim(), qty: 1, valor: P[0].price, pgto: "Pix", canal: "WhatsApp", data: TODAY }); setForm(true); };
  const openEdit = (s) => { setEditId(s.id); setDraft({ produto: s.produto, qty: s.qty, valor: s.valor, pgto: s.pgto, canal: s.canal, data: s.data }); setForm(true); };
  const closeForm = () => { setForm(false); setEditId(null); };
  const delSale = (id) => setSales((s) => s.filter((x) => x.id !== id));
  const pickProduto = (name) => {
    const p = P.find((x) => (x.brand + " " + x.model).trim() === name);
    setDraft((d) => ({ ...d, produto: name, valor: p ? (p.price * (parseInt(d.qty, 10) || 1)).toFixed(2) : d.valor }));
  };

  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(3,1fr)", marginBottom: 18 }}>
        <div className="kpi"><div className="k-label">Faturamento ({periodo})</div><div className="k-val">{brl(total)}</div></div>
        <div className="kpi"><div className="k-label">Vendas</div><div className="k-val">{list.length}</div></div>
        <div className="kpi"><div className="k-label">Itens vendidos</div><div className="k-val">{qtd}</div></div>
      </div>

      <div className="adm-toolbar">
        <div className="tabs">
          {[["hoje", "Hoje"], ["7d", "7 dias"], ["30d", "30 dias"], ["tudo", "Tudo"]].map(([k, l]) => (
            <button key={k} className={"tab" + (periodo === k ? " on" : "")} onClick={() => setPeriodo(k)}>{l}</button>
          ))}
        </div>
        <select className="adm-select" value={pgto} onChange={(e) => setPgto(e.target.value)}>
          <option value="todos">Pagamento: todos</option><option>Pix</option><option>Dinheiro</option><option>Cartão</option>
        </select>
        <button className="btn btn-yellow" style={{ marginLeft: "auto" }} onClick={() => form ? closeForm() : openNew()}>
          <Icon k="plus" size={18} /> Registrar venda
        </button>
      </div>

      {form && (
        <div className="panel sale-form">
          <div className="cfg-grid" style={{ gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", maxWidth: "none", alignItems: "end" }}>
            <div className="field"><label>Produto</label>
              <select value={draft.produto} onChange={(e) => pickProduto(e.target.value)}>
                {P.map((p) => <option key={p.id}>{(p.brand + " " + p.model).trim()}</option>)}
              </select></div>
            <div className="field"><label>Qtd</label><input type="number" min="1" value={draft.qty}
              onChange={(e) => setDraft((d) => ({ ...d, qty: e.target.value }))} /></div>
            <div className="field"><label>Valor (R$)</label><input type="number" step="0.01" value={draft.valor}
              onChange={(e) => setDraft((d) => ({ ...d, valor: e.target.value }))} /></div>
            <div className="field"><label>Pagamento</label>
              <select value={draft.pgto} onChange={(e) => setDraft((d) => ({ ...d, pgto: e.target.value }))}><option>Pix</option><option>Dinheiro</option><option>Cartão</option></select></div>
            <div className="field"><label>Canal</label>
              <select value={draft.canal} onChange={(e) => setDraft((d) => ({ ...d, canal: e.target.value }))}><option>WhatsApp</option><option>Balcão</option><option>Loja</option></select></div>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
            <button className="btn btn-yellow" onClick={addSale}><Icon k="check" size={18} /> {editId ? "Salvar alterações" : "Salvar venda"}</button>
            <button className="btn btn-ghost" onClick={closeForm}>Cancelar</button>
          </div>
        </div>
      )}

      <div className="tbl-wrap" style={{ marginTop: 16 }}>
        <table className="tbl">
          <thead><tr><th>Venda</th><th>Data</th><th>Produto</th><th>Qtd</th><th>Valor</th><th>Pagamento</th><th>Canal</th><th></th></tr></thead>
          <tbody>
            {list.map((s) => (
              <tr key={s.id}>
                <td className="t-name cell-head" data-label="Venda"><span className="cell-head-id">{s.id}</span><span className="cell-head-x">{s.produto}</span></td>
                <td data-label="Data" style={{ color: "var(--dim)", fontWeight: 700 }}>{fmtData(s.data)}</td>
                <td className="t-name cell-hide-m" data-label="Produto">{s.produto}</td>
                <td data-label="Qtd">{s.qty}</td>
                <td data-label="Valor" style={{ fontFamily: "var(--font-display)", fontSize: 17 }}>{brl(s.valor)}</td>
                <td data-label="Pagamento"><span className="paytag">{s.pgto}</span></td>
                <td data-label="Canal" style={{ color: "var(--dim)", fontWeight: 700 }}>{s.canal}</td>
                <td data-label="Ações"><div className="row-actions">
                  <button className="icon-btn edit" onClick={() => openEdit(s)} title="Editar venda"><Icon k="edit" size={15} /></button>
                  <button className="icon-btn danger" onClick={() => delSale(s.id)} title="Excluir venda"><Icon k="trash" size={15} /></button>
                </div></td>
              </tr>
            ))}
            {list.length === 0 && <tr><td colSpan="8" style={{ textAlign: "center", color: "var(--dim)", padding: 40 }}>Nenhuma venda no período.</td></tr>}
          </tbody>
        </table>
      </div>
    </>
  );
}

Object.assign(window, { Dashboard, Vendas });