/* ============================================================
   LF CONCEITO — PAINEL ADMIN parte 2
   ============================================================ */

/* ---------- Clientes ---------- */
function CustomersAdmin(){
  const { fetchCustomers, deleteCustomer } = window.useStore();
  const [customers,setCustomers] = useState([]);
  const [q,setQ] = useState("");
  const [loading,setLoading] = useState(true);

  useEffect(()=>{
    fetchCustomers()
      .then(c=>{ setCustomers(c||[]); setLoading(false); })
      .catch(()=>setLoading(false));
  },[]);

  const list = customers.filter(c=>
    (c.name||"").toLowerCase().includes(q.toLowerCase())||
    (c.email||"").toLowerCase().includes(q.toLowerCase()));

  const top = customers[0];
  const vips = customers.filter(c=>c.spent>1500).length;

  const exportCSV = ()=>{
    const rows = [
      ["Nome","E-mail","Cidade","Pedidos","Total gasto","Último pedido"],
      ...customers.map(c=>[
        c.name||"", c.email||"", c.city||"",
        c.orders||c.total_orders||0, c.spent||c.total_spent||0,
        (c.last||c.last_order) ? new Date(c.last||c.last_order).toLocaleDateString("pt-BR") : ""
      ])
    ];
    const csv = rows.map(r=>r.join(";")).join("\n");
    const blob = new Blob(["\ufeff"+csv],{type:"text/csv;charset=utf-8"});
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement("a");
    a.href=url; a.download="lf-conceito-clientes.csv"; a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <div className="ad-stats ad-stats-3">
        <div className="stat">
          <div className="stat-top"><span className="label-caps">Total clientes</span><Icon name="users" size={16}/></div>
          <div className="stat-val serif">{customers.length}</div>
          <div className="stat-delta">cadastrados</div>
        </div>
        <div className="stat">
          <div className="stat-top"><span className="label-caps">Clientes VIP</span><Icon name="star" size={16}/></div>
          <div className="stat-val serif">{vips}</div>
          <div className="stat-delta">acima de R$ 1.500</div>
        </div>
        <div className="stat">
          <div className="stat-top"><span className="label-caps">Maior comprador</span><Icon name="heart" size={16}/></div>
          <div className="stat-val serif" style={{fontSize:20}}>{top?.name||"—"}</div>
          <div className="stat-delta up mono">{top?fmt(top.spent):"—"}</div>
        </div>
      </div>

      <div className="ad-toolbar">
        <div className="ad-search ad-search-lg">
          <Icon name="search" size={16}/>
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Buscar por nome ou e-mail"/>
        </div>
        <Btn variant="ghost" icon="download" onClick={exportCSV} disabled={customers.length===0}>Exportar CSV</Btn>
      </div>

      {loading
        ? <div style={{padding:24,color:"var(--muted)"}}>Carregando clientes...</div>
        : <>
            <div className="card no-pad tbl-desktop-only">
              <table className="tbl tbl-pad">
                <thead><tr><th>Cliente</th><th>Cidade</th><th className="ta-c">Pedidos</th><th className="ta-r">Total gasto</th><th className="ta-c">Nível</th><th>Último pedido</th><th></th></tr></thead>
                <tbody>
                  {list.map((c,i)=>{
                    const tier = c.spent>1500?"VIP":c.spent>500?"Gold":"Regular";
                    return (
                      <tr key={c.id||i}>
                        <td>
                          <div className="cell-cust">
                            <div className="cell-av">
                              {(c.name||"?").split(" ").map(x=>x[0]).slice(0,2).join("")}
                            </div>
                            <div>
                              <b>{c.name}</b>
                              <small className="cell-dim">{c.email||"—"}</small>
                            </div>
                          </div>
                        </td>
                        <td className="cell-dim">{c.city||"—"}</td>
                        <td className="ta-c mono">{c.orders||c.total_orders||0}</td>
                        <td className="ta-r mono">{fmt(c.spent||c.total_spent||0)}</td>
                        <td className="ta-c">
                          <span className={"tier tier-"+(tier.toLowerCase())}>{tier}</span>
                        </td>
                        <td className="cell-dim">
                          {c.last||c.last_order
                            ? new Date(c.last||c.last_order).toLocaleDateString("pt-BR")
                            : "—"}
                        </td>
                        <td className="ta-c">
                          <button title="Excluir cliente"
                            style={{background:"none",border:"none",cursor:"pointer",color:"var(--red)",fontSize:16,padding:"2px 6px"}}
                            onClick={async()=>{
                              if(!confirm(`Excluir cliente ${c.name}? Esta ação não pode ser desfeita.`)) return;
                              await deleteCustomer(c.id);
                              setCustomers(prev=>prev.filter(x=>x.id!==c.id));
                            }}>🗑</button>
                        </td>
                      </tr>
                    );
                  })}
                  {list.length===0&&!loading&&
                    <tr><td colSpan="6" style={{textAlign:"center",color:"var(--muted)",padding:24}}>
                      Nenhum cliente encontrado
                    </td></tr>}
                </tbody>
              </table>
            </div>
            <div className="cust-cards-mobile">
              {list.length===0
                ? <div style={{textAlign:"center",color:"var(--muted)",padding:24}}>Nenhum cliente encontrado</div>
                : list.map((c,i)=>{
                  const tier = c.spent>1500?"VIP":c.spent>500?"Gold":"Regular";
                  return (
                    <div key={c.id||i} className="cust-card">
                      <div className="cust-card-top">
                        <div className="cell-av">{(c.name||"?").split(" ").map(x=>x[0]).slice(0,2).join("")}</div>
                        <div className="cust-card-info">
                          <b>{c.name}</b>
                          <small className="cell-dim">{c.email||"—"}</small>
                        </div>
                        <span className={"tier tier-"+(tier.toLowerCase())}>{tier}</span>
                      </div>
                      <div className="cust-card-stats">
                        <div><small>Cidade</small><span>{c.city||"—"}</span></div>
                        <div><small>Pedidos</small><span className="mono">{c.orders||c.total_orders||0}</span></div>
                        <div><small>Total gasto</small><span className="mono">{fmt(c.spent||c.total_spent||0)}</span></div>
                      </div>
                    </div>
                  );
                })}
            </div>
          </>}
    </div>
  );
}

/* ---------- Cupons ---------- */
const emptyCouponForm = { code:"", type:"percent", value:"", min_order:"", max_uses:100 };

function CouponsAdmin(){
  const { fetchCoupons } = window.useStore();
  const [coupons,setCoupons] = useState([]);
  const [loading,setLoading] = useState(true);
  const [showForm,setShowForm] = useState(false);
  const [editing,setEditing] = useState(null); // null = criando, objeto = editando
  const [form,setForm] = useState(emptyCouponForm);
  const [saving,setSaving] = useState(false);
  const [msg,setMsg] = useState("");

  const load = ()=>{
    return fetchCoupons()
      .then(c=>{ setCoupons(c||[]); setLoading(false); })
      .catch(()=>setLoading(false));
  };
  useEffect(()=>{ load(); },[]);

  const openNew = ()=>{
    setEditing(null);
    setForm(emptyCouponForm);
    setMsg("");
    setShowForm(true);
  };

  const openEdit = (c)=>{
    setEditing(c);
    setForm({
      code: c.code||"",
      type: c.type||"percent",
      value: c.value??"",
      min_order: c.min_order??"",
      max_uses: c.max_uses??100,
    });
    setMsg("");
    setShowForm(true);
  };

  const closeForm = ()=>{
    setShowForm(false);
    setEditing(null);
    setForm(emptyCouponForm);
    setMsg("");
  };

  const handleSave = async()=>{
    if(!form.code||!form.value){ setMsg("⚠ Código e valor são obrigatórios"); return; }
    setSaving(true); setMsg("");
    try{
      if(window.DB){
        const payload = {
          code: form.code.toUpperCase(),
          type: form.type,
          value: parseFloat(form.value),
          min_order: parseFloat(form.min_order)||0,
          max_uses: parseInt(form.max_uses)||100,
          active: editing ? (editing.active!==false) : true,
        };
        if(editing?.id) payload.id = editing.id;
        await window.DB.saveCoupon(payload);
        await load();
        closeForm();
        setMsg("");
      }
    }catch(e){ setMsg("❌ "+e.message); }
    finally{ setSaving(false); }
  };

  const handleDelete = async(c)=>{
    if(!confirm("Excluir o cupom "+c.code+"?")) return;
    try{
      if(window.DB) await window.DB.deleteCoupon(c.id);
      await load();
    }catch(e){ alert("Erro ao excluir: "+e.message); }
  };

  return (
    <div>
      <div className="ad-toolbar">
        <div className="ad-toolbar-title">
          <h3 className="serif">Cupons & promoções</h3>
          <span className="cell-dim">{coupons.filter(c=>c.active).length} ativos</span>
        </div>
        <Btn variant="gold" icon={showForm?"x":"plus"} onClick={()=>showForm?closeForm():openNew()}>
          {showForm?"Cancelar":"Criar cupom"}
        </Btn>
      </div>

      {showForm&&(
        <div className="card" style={{marginBottom:20}}>
          <div className="card-head"><h3>{editing?"Editar cupom "+editing.code:"Novo cupom"}</h3></div>
          <div style={{padding:"0 22px 22px"}}>
            <div className="ff-row">
              <div className="ff"><label>Código *</label>
                <input value={form.code} onChange={e=>setForm(f=>({...f,code:e.target.value.toUpperCase()}))}
                  placeholder="EX: VERAO20"/></div>
              <div className="ff"><label>Tipo</label>
                <select value={form.type} onChange={e=>setForm(f=>({...f,type:e.target.value}))}>
                  <option value="percent">Percentual (%)</option>
                  <option value="fixed">Valor fixo (R$)</option>
                </select>
              </div>
              <div className="ff"><label>Valor *</label>
                <input type="number" value={form.value}
                  onChange={e=>setForm(f=>({...f,value:e.target.value}))}
                  placeholder={form.type==="percent"?"20":"30.00"}/></div>
            </div>
            <div className="ff-row">
              <div className="ff"><label>Pedido mínimo (R$)</label>
                <input type="number" value={form.min_order}
                  onChange={e=>setForm(f=>({...f,min_order:e.target.value}))} placeholder="0"/></div>
              <div className="ff"><label>Máx usos</label>
                <input type="number" value={form.max_uses}
                  onChange={e=>setForm(f=>({...f,max_uses:e.target.value}))} placeholder="100"/></div>
            </div>
            {msg&&<div style={{fontSize:13,fontWeight:600,margin:"8px 0",
              color:msg.startsWith("✅")?"#1E8C5A":"#C0392B"}}>{msg}</div>}
            <Btn variant="gold" icon="check" onClick={handleSave} disabled={saving}>
              {saving?"Salvando...":(editing?"Salvar alterações":"Criar cupom")}
            </Btn>
          </div>
        </div>
      )}

      {loading
        ? <div style={{padding:24,color:"var(--muted)"}}>Carregando cupons...</div>
        : <div className="coupons">
            {coupons.map(c=>(
              <div key={c.id||c.code} className={"coupon "+(c.active?"":"off")}>
                <div className="coupon-l">
                  <div className="coupon-ic"><Icon name="tag" size={20}/></div>
                  <div>
                    <div className="coupon-code mono">{c.code}</div>
                    <div className="coupon-desc">
                      Mín: {fmt(c.min_order||0)} · {c.used||0}/{c.max_uses} usos
                    </div>
                  </div>
                </div>
                <div className="coupon-val serif gold-text">
                  {c.type==="percent"?c.value+"%":c.type==="fixed"?fmt(c.value):"Frete"}
                </div>
                <div className="coupon-r">
                  <div className="coupon-uses">
                    <b className="mono">{c.used||0}</b><small>usos</small>
                  </div>
                  <label className="switch">
                    <input type="checkbox" checked={c.active!==false}
                      onChange={async e=>{
                        if(window.DB) await window.DB.saveCoupon({...c, active:e.target.checked});
                        setCoupons(prev=>prev.map(x=>x.id===c.id?{...x,active:e.target.checked}:x));
                      }}/>
                    <span></span>
                  </label>
                  <button className="rowbtn" title="Editar" onClick={()=>openEdit(c)}>
                    <Icon name="edit" size={15}/>
                  </button>
                  <button className="rowbtn" title="Excluir" onClick={()=>handleDelete(c)}>
                    <Icon name="trash" size={15}/>
                  </button>
                </div>
              </div>
            ))}
            {coupons.length===0&&
              <div style={{color:"var(--muted)",padding:24,textAlign:"center"}}>Nenhum cupom cadastrado</div>}
          </div>}
    </div>
  );
}

/* ---------- Financeiro ---------- */
const MONTH_NAMES = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];

function FinanceAdmin(){
  const { fetchOrders, fetchFinancials, fetchFinancialsByRange } = window.useStore();
  const [orders,setOrders] = useState([]);
  const [fin,setFin] = useState(null);
  const [loading,setLoading] = useState(true);
  const [selMonth,setSelMonth] = useState(null); // null = todos; senao, indice 0-11 do ano atual

  useEffect(()=>{
    fetchOrders({limit:200}).then(ords=>setOrders(ords||[])).catch(()=>{});
  },[]);

  useEffect(()=>{
    setLoading(true);
    const year = new Date().getFullYear();
    const req = selMonth==null
      ? fetchFinancials()
      : fetchFinancialsByRange(new Date(year,selMonth,1), new Date(year,selMonth+1,0,23,59,59));
    req.then(f=>setFin(f)).catch(()=>{}).finally(()=>setLoading(false));
  },[selMonth]);

  const revenue    = fin ? (fin.revenue||0) : orders.filter(o=>o.status!=="Cancelado").reduce((s,o)=>s+o.total,0);
  const fees       = revenue*0.029;
  const net        = revenue-fees;
  const orderCount = fin?.orderCount ?? orders.length;
  const aov         = orderCount>0?revenue/orderCount:0;
  const byPay   = fin?.byPayment || {};
  if(!fin?.byPayment){
    orders.filter(o=>o.status!=="Cancelado").forEach(o=>{
      byPay[o.payment]=(byPay[o.payment]||0)+o.total;
    });
  }
  const payTotal = Object.values(byPay).reduce((a,b)=>a+b,0)||1;

  const exportCSV = ()=>{
    const rows = [
      ["Pedido","Data","Cliente","Pagamento","Status","Total"],
      ...orders.map(o=>[
        o.code, new Date(o.date||o.created_at).toLocaleDateString("pt-BR"),
        o.customer||o.customer_name, o.payment, o.status, o.total
      ])
    ];
    const csv = rows.map(r=>r.join(";")).join("\n");
    const blob = new Blob(["\ufeff"+csv],{type:"text/csv;charset=utf-8"});
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement("a");
    a.href=url; a.download="lf-conceito-pedidos.csv"; a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div>
      <div className="fin-month-filter">
        <button className={selMonth==null?"on":""} onClick={()=>setSelMonth(null)}>Todos</button>
        {MONTH_NAMES.map((m,i)=>
          <button key={m} className={selMonth===i?"on":""} onClick={()=>setSelMonth(i)}>{m}</button>)}
      </div>
      <div className="ad-stats">
        <div className="stat stat-hl">
          <div className="stat-top"><span className="label-caps">Faturamento bruto</span><Icon name="chart" size={16}/></div>
          <div className="stat-val serif gold-text">{fmt(revenue)}</div>
          <div className="stat-delta up">▲ acumulado total</div>
        </div>
        <div className="stat">
          <div className="stat-top"><span className="label-caps">Taxas (2,9%)</span><Icon name="download" size={16}/></div>
          <div className="stat-val serif">-{fmt(fees)}</div>
          <div className="stat-delta">gateway + adquirente</div>
        </div>
        <div className="stat">
          <div className="stat-top"><span className="label-caps">Receita líquida</span><Icon name="shield" size={16}/></div>
          <div className="stat-val serif">{fmt(net)}</div>
          <div className="stat-delta">após taxas estimadas</div>
        </div>
        <div className="stat">
          <div className="stat-top"><span className="label-caps">Ticket médio</span><Icon name="tag" size={16}/></div>
          <div className="stat-val serif">{fmt(aov)}</div>
          <div className="stat-delta">por pedido</div>
        </div>
      </div>

      <div className="dash-grid">
        <div className="card dash-chart">
          <div className="card-head">
            <h3>Faturamento · {selMonth==null?"todos os períodos":MONTH_NAMES[selMonth]}</h3>
            <button className="card-link" onClick={exportCSV}>
              <Icon name="download" size={14}/> Exportar CSV
            </button>
          </div>
          {fin?.byDay
            ? <BarChart data={fin.byDay.map(d=>{
                const [y,m,dd] = d.date.split("-");
                return {label:dd+"/"+m, val:d.val};
              })} h={200}/>
            : <div style={{height:200,display:"flex",alignItems:"center",justifyContent:"center",color:"var(--muted)"}}>
                {loading?"Carregando...":"Sem dados de período"}
              </div>}
        </div>
        <div className="card dash-side">
          <div className="card-head"><h3>Por forma de pagamento</h3></div>
          <div className="paybars">
            {Object.entries(byPay).map(([k,v])=>(
              <div key={k} className="paybar">
                <div className="paybar-top"><span>{k}</span><b className="mono">{fmt(v)}</b></div>
                <div className="paybar-track">
                  <div style={{width:(v/payTotal*100)+"%"}}></div>
                </div>
                <small className="cell-dim">{Math.round(v/payTotal*100)}% do total</small>
              </div>
            ))}
            {Object.keys(byPay).length===0&&
              <div style={{color:"var(--muted)",fontSize:13}}>Sem movimentações</div>}
          </div>
        </div>
      </div>

      <div className="card no-pad">
        <div className="card-head card-head-pad">
          <h3>Movimentações recentes</h3>
          <span className="label-caps">Entradas</span>
        </div>
        {loading
          ? <div style={{padding:24,color:"var(--muted)"}}>Carregando...</div>
          : <table className="tbl tbl-pad">
              <thead><tr><th>Pedido</th><th>Data</th><th>Forma</th><th>Status</th><th className="ta-r">Valor</th></tr></thead>
              <tbody>
                {orders.filter(o=>o.status!=="Cancelado").slice(0,10).map(o=>(
                  <tr key={o.code||o.id}>
                    <td className="mono">#{o.code}</td>
                    <td className="cell-dim">{new Date(o.date||o.created_at).toLocaleDateString("pt-BR")}</td>
                    <td>{o.payment}</td>
                    <td><span className={"badge st-"+(o.status||"pendente").toLowerCase()}>{o.status}</span></td>
                    <td className="ta-r mono" style={{color:"var(--green)"}}>+{fmt(o.total)}</td>
                  </tr>
                ))}
                {orders.length===0&&
                  <tr><td colSpan="5" style={{textAlign:"center",color:"var(--muted)",padding:24}}>Sem movimentações</td></tr>}
              </tbody>
            </table>}
      </div>
    </div>
  );
}

/* ---------- Configurações ---------- */
function SettingsAdmin(){
  const { fetchConfig, saveConfig } = window.useStore();
  const [tab,setTab] = useState("loja");
  const [cfg,setCfg] = useState({});
  const [saving,setSaving] = useState(false);
  const [msg,setMsg] = useState("");

  useEffect(()=>{
    fetchConfig().then(c=>setCfg(c||{})).catch(()=>{});
  },[]);

  const set=(k,v)=>setCfg(f=>({...f,[k]:v}));

  const handleSave=async()=>{
    setSaving(true); setMsg("");
    try{
      await Promise.all(Object.entries(cfg).map(([k,v])=>saveConfig(k,v)));
      setMsg("✅ Configurações salvas!");
    }catch(e){ setMsg("❌ "+e.message); }
    finally{ setSaving(false); setTimeout(()=>setMsg(""),3000); }
  };

  return (
    <div className="settings">
      <div className="set-tabs">
        {[["loja","Loja"],["pagamentos","Pagamentos"],["envio","Envio"],["produto","Produto"],["aparencia","Aparência"]].map(([k,t])=>
          <button key={k} className={tab===k?"on":""} onClick={()=>setTab(k)}>{t}</button>)}
      </div>
      <div className="set-body">
        {tab==="loja"&&(
          <div className="card set-card">
            <h3>Informações da loja</h3>
            <div className="ff"><label>Nome da loja</label>
              <input value={cfg.store_name??"LF Conceito"} onChange={e=>set("store_name",e.target.value)}/></div>
            <div className="ff"><label>WhatsApp</label>
              <input value={cfg.store_whatsapp??"5585921495164"} onChange={e=>set("store_whatsapp",e.target.value)} placeholder="Com DDD e código do país, ex: 5585921495164"/></div>
            {msg&&<div style={{fontSize:13,fontWeight:600,margin:"8px 0",color:msg.startsWith("✅")?"#1E8C5A":"#C0392B"}}>{msg}</div>}
            <div className="set-actions">
              <Btn variant="gold" icon="check" onClick={handleSave} disabled={saving}>
                {saving?"Salvando...":"Salvar alterações"}
              </Btn>
            </div>
          </div>
        )}
        {tab==="pagamentos"&&(
          <div className="card set-card">
            <h3>Chave Pix</h3>
            <div className="ff"><label>Chave Pix</label>
              <input value={cfg.pix_key??""} placeholder="Ex: sua-chave@email.com ou CPF" onChange={e=>set("pix_key",e.target.value)}/></div>
            <div className="ff"><label>Titular</label>
              <input value={cfg.pix_name??"Luis Fernando"} onChange={e=>set("pix_name",e.target.value)}/></div>
            <h3 style={{marginTop:20}}>Condições de pagamento</h3>
            <div className="ff-row">
              <div className="ff"><label>Desconto no Pix (%)</label>
                <input type="number" step="0.5" min="0" max="100" value={cfg.pix_discount_pct??"5"} onChange={e=>set("pix_discount_pct",e.target.value)}/></div>
              <div className="ff"><label>Parcelamento máximo</label>
                <input type="number" min="1" max="24" value={cfg.installments_max??"12"} onChange={e=>set("installments_max",e.target.value)}/></div>
            </div>
            <h3 style={{marginTop:20}}>Formas de pagamento</h3>
            {[["Pix","payment_pix","Desconto configurável · aprovação imediata"],
              ["Cartão de crédito","payment_card","Parcelamento configurável"]].map(([t,k,d])=>(
              <div key={t} className="set-toggle">
                <div><b>{t}</b><small>{d}</small></div>
                <label className="switch">
                  <input type="checkbox" checked={cfgBool(cfg[k])} onChange={e=>set(k,e.target.checked)}/>
                  <span></span>
                </label>
              </div>
            ))}
            {msg&&<div style={{fontSize:13,fontWeight:600,margin:"8px 0",color:msg.startsWith("✅")?"#1E8C5A":"#C0392B"}}>{msg}</div>}
            <div className="set-actions">
              <Btn variant="gold" icon="check" onClick={handleSave} disabled={saving}>
                {saving?"Salvando...":"Salvar"}
              </Btn>
            </div>
          </div>
        )}
        {tab==="envio"&&(
          <div className="card set-card">
            <h3>Regras de frete</h3>
            <p className="cell-dim" style={{marginTop:-6,marginBottom:10}}>
              Toda compra com entrega tem frete grátis para toda a região.
            </p>
            <div className="ff"><label>Prazo de despacho</label>
              <input value={cfg.dispatch_time??"48h úteis"} onChange={e=>set("dispatch_time",e.target.value)}/></div>
            <div className="ff" style={{marginTop:12}}>
              <label>Texto de "Entrega & trocas" (página do produto)</label>
              <textarea rows={3} value={cfg.shipping_text||""} onChange={e=>set("shipping_text",e.target.value)}
                placeholder="Frete grátis para toda a região. 3 dias para troca ou devolução."/>
              <small className="cell-dim">Se vazio, é gerado automaticamente.</small>
            </div>
            {msg&&<div style={{fontSize:13,fontWeight:600,margin:"8px 0",color:msg.startsWith("✅")?"#1E8C5A":"#C0392B"}}>{msg}</div>}
            <div className="set-actions">
              <Btn variant="gold" icon="check" onClick={handleSave} disabled={saving}>
                {saving?"Salvando...":"Salvar"}
              </Btn>
            </div>
          </div>
        )}
        {tab==="produto"&&(
          <div className="card set-card">
            <h3>Avaliação padrão</h3>
            <p className="cell-dim" style={{marginTop:-6,marginBottom:10}}>
              Usada em produtos que não têm avaliação própria definida.
            </p>
            <div className="ff-row">
              <div className="ff"><label>Nota (0 a 5)</label>
                <input type="number" step="0.1" min="0" max="5" value={cfg.default_rating??"4.9"} onChange={e=>set("default_rating",e.target.value)}/></div>
              <div className="ff"><label>Nº de avaliações</label>
                <input type="number" min="0" value={cfg.default_reviews_count??"218"} onChange={e=>set("default_reviews_count",e.target.value)}/></div>
            </div>
            <h3 style={{marginTop:20}}>Composição & medidas (padrão)</h3>
            <p className="cell-dim" style={{marginTop:-6,marginBottom:10}}>
              Usada em produtos que não têm composição própria definida.
            </p>
            <div className="ff">
              <textarea rows={2} value={cfg.default_composition||""} onChange={e=>set("default_composition",e.target.value)}
                placeholder="Algodão premium 220g/m² · acabamento ribana · lavar à mão ou ciclo delicado."/>
            </div>
            {msg&&<div style={{fontSize:13,fontWeight:600,margin:"8px 0",color:msg.startsWith("✅")?"#1E8C5A":"#C0392B"}}>{msg}</div>}
            <div className="set-actions">
              <Btn variant="gold" icon="check" onClick={handleSave} disabled={saving}>
                {saving?"Salvando...":"Salvar"}
              </Btn>
            </div>
          </div>
        )}
        {tab==="aparencia"&&(
          <div className="card set-card">
            <h3>Identidade visual</h3>
            <div className="set-brand">
              <div className="set-swatches">
                <div><span className="sw" style={{background:"var(--ink)"}}></span><small>Preto base</small></div>
                <div><span className="sw" style={{background:"var(--gold-grad)"}}></span><small>Dourado LF</small></div>
                <div><span className="sw" style={{background:"var(--text)"}}></span><small>Off-white</small></div>
              </div>
              <p className="cell-dim">Paleta oficial LF Conceito — preto profundo com dourado metálico.</p>
            </div>
            <div className="set-toggle">
              <div><b>Mostrar selo "últimas peças"</b><small>Cria urgência em estoque baixo</small></div>
              <label className="switch">
                <input type="checkbox" checked={cfgBool(cfg.show_low_stock_badge)} onChange={e=>set("show_low_stock_badge",e.target.checked)}/>
                <span></span>
              </label>
            </div>
            <div className="set-toggle">
              <div><b>Banner de frete grátis</b><small>Barra fixa no topo</small></div>
              <label className="switch">
                <input type="checkbox" checked={cfgBool(cfg.show_freight_banner)} onChange={e=>set("show_freight_banner",e.target.checked)}/>
                <span></span>
              </label>
            </div>
            <div className="set-toggle">
              <div><b>Botão flutuante do WhatsApp</b><small>Aparece na loja</small></div>
              <label className="switch">
                <input type="checkbox" checked={cfgBool(cfg.show_whatsapp_float)} onChange={e=>set("show_whatsapp_float",e.target.checked)}/>
                <span></span>
              </label>
            </div>
            {msg&&<div style={{fontSize:13,fontWeight:600,margin:"8px 0",color:msg.startsWith("✅")?"#1E8C5A":"#C0392B"}}>{msg}</div>}
            <div className="set-actions">
              <Btn variant="gold" icon="check" onClick={handleSave} disabled={saving}>
                {saving?"Salvando...":"Salvar"}
              </Btn>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { CustomersAdmin, CouponsAdmin, FinanceAdmin, SettingsAdmin });