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

const adminSections = [
  { key:"dashboard", icon:"chart",  label:"Dashboard"    },
  { key:"produtos",  icon:"box",    label:"Produtos"     },
  { key:"pedidos",   icon:"bag",    label:"Pedidos"      },
  { key:"clientes",  icon:"users",  label:"Clientes"     },
  { key:"cupons",    icon:"tag",    label:"Cupons"       },
  { key:"financeiro",icon:"chart", label:"Financeiro"   },
  { key:"config",    icon:"settings",   label:"Configurações"},
];

function AdminLayout({ section }){
  const { nav, products, fetchOrders, fetchCustomers, fetchFinancials, signOut, userName, session } = window.useStore();
  const sec = section||"dashboard";
  const [menuOpen,setMenuOpen] = useState(false);

  return (
    <div className="ad">
      {/* Sidebar */}
      <aside className={"ad-side "+(menuOpen?"open":"")}>
        <div className="ad-logo" onClick={()=>nav("#/")}>
          <span className="serif gold-text" style={{fontSize:26}}>LF</span>
          <div><b>Conceito</b><small>Painel do lojista</small></div>
        </div>
        <nav className="ad-nav">
          {adminSections.map(s=>
            <button key={s.key}
              className={"ad-nav-i "+(sec===s.key?"on":"")}
              onClick={()=>{ nav("#/admin/"+s.key); setMenuOpen(false); }}>
              <Icon name={s.icon} size={18}/> {s.label}
            </button>)}
        </nav>
        <div className="ad-side-foot">
          <button className="ad-nav-i" onClick={()=>nav("#/")}>
            <Icon name="eye" size={18}/> Ver loja
          </button>
          <button className="ad-nav-i" style={{color:"var(--red)"}}
            onClick={()=>{ signOut(); nav("#/"); }}>
            <Icon name="logout" size={18}/> Sair
          </button>
        </div>
      </aside>

      {/* Main */}
      <div className="ad-body">
        {/* Top bar */}
        <div className="ad-top">
          <button className="sh-ic ad-burger" onClick={()=>setMenuOpen(!menuOpen)}>
            <Icon name="menu" size={20}/>
          </button>
          <div className="ad-top-title">
            <div className="label-caps">Painel</div>
            <h1>{adminSections.find(s=>s.key===sec)?.label||"Dashboard"}</h1>
          </div>
          <div style={{flex:1}}></div>
          <div className="ad-user">
            <div className="ad-avatar">LF</div>
            <div className="ad-user-i">
              <b>{userName || "Admin"}</b>
              <small>{session?.user?.email || ""}</small>
            </div>
          </div>
        </div>

        <div className="ad-content">
          {sec==="dashboard"  && <Dashboard/>}
          {sec==="produtos"   && <ProductsAdmin/>}
          {sec==="pedidos"    && <OrdersAdmin/>}
          {sec==="clientes"   && <CustomersAdmin/>}
          {sec==="cupons"     && <CouponsAdmin/>}
          {sec==="financeiro" && <FinanceAdmin/>}
          {sec==="config"     && <SettingsAdmin/>}
        </div>
      </div>
    </div>
  );
}

/* ---------- Dashboard ---------- */
function isLowStock(p) {
  const colorEntries = (p.images||[]).filter(it => it && it.color);
  // 1. Cores esgotadas pela flag manual (metade ou mais)
  if (colorEntries.length > 0) {
    const soldOutCount = colorEntries.filter(it => it.soldOut).length;
    if (soldOutCount >= Math.ceil(colorEntries.length/2)) return true;
  }
  // 2. Estoque numérico: zero OU baixo (<=5) — ambos são críticos
  const stock = parseInt(p.stock) || 0;
  if (stock <= 5) return true; // inclui zero
  return false;
}
function isOutOfStock(p) {
  const stock = parseInt(p.stock) || 0;
  if (stock === 0) return true;
  // todas as cores esgotadas pela flag manual
  const colorEntries = (p.images||[]).filter(it => it && it.color);
  if (colorEntries.length > 0 && colorEntries.every(it => it.soldOut)) return true;
  return false;
}
function soldOutSummary(p) {
  const stock = parseInt(p.stock) || 0;
  const colorEntries = (p.images||[]).filter(it => it && it.color);
  const soldOutCount = colorEntries.filter(it => it.soldOut).length;
  if (stock === 0) return "Esgotado";
  if (soldOutCount > 0) return `${soldOutCount}/${colorEntries.length} cores esgotadas`;
  return `Apenas ${stock} em estoque`;
}

function Dashboard(){
  const { nav, products, fetchOrders, fetchFinancials } = window.useStore();
  const P = products || PRODUCTS;
  const [orders,setOrders] = useState([]);
  const [fin,setFin] = useState(null);
  const [loading,setLoading] = useState(true);

  useEffect(()=>{
    Promise.all([fetchOrders({limit:20}), fetchFinancials()])
      .then(([ords,f])=>{ setOrders(ords||[]); setFin(f); })
      .catch(()=>{})
      .finally(()=>setLoading(false));
  },[]);

  const revenue   = fin?.revenue || orders.reduce((s,o)=>s+o.total,0);
  const lowStock  = P.filter(p=>p.active&&isLowStock(p)).length;
  const pending   = orders.filter(o=>o.status==="Pendente").length;
  const aov       = orders.length>0 ? revenue/orders.length : 0;

  return (
    <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">Pedidos</span><Icon name="bag" size={16}/></div>
          <div className="stat-val serif">{orders.length}</div>
          <div className="stat-delta">{pending} pendente{pending!==1?"s":""}</div>
        </div>
        <div className="stat">
          <div className="stat-top"><span className="label-caps">Produtos ativos</span><Icon name="box" size={16}/></div>
          <div className="stat-val serif">{P.filter(p=>p.active).length}</div>
          <div className="stat-delta" style={{color:lowStock>0?"var(--red)":""}}>
            {lowStock>0?`⚠ ${lowStock} com estoque baixo`:"Estoque OK"}
          </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">
        {fin?.byDay && (
          <div className="card dash-chart">
            <div className="card-head">
              <h3>Faturamento · esta semana</h3>
            </div>
            <BarChart data={fin.byDay.map(d=>{
              const [y,m,dd] = d.date.split("-");
              return {label:dd+"/"+m, val:d.val};
            })} h={160}/>
          </div>
        )}
        <div className="card">
          <div className="card-head"><h3>Estoque baixo</h3>
            <button className="card-link" onClick={()=>nav("#/admin/produtos")}>Ver todos</button>
          </div>
          {P.filter(p=>p.active&&isLowStock(p)).slice(0,5).map(p=>
            <div key={p.id} className="toprow">
              <div className="toprow-img"><ProductImage p={p} ratio="100%" showMeta={false}/></div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13,fontWeight:600,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{p.name}</div>
                <div style={{fontSize:12,color:"var(--red)",fontWeight:600}}>{soldOutSummary(p)}</div>
              </div>
            </div>)}
          {P.filter(p=>p.active&&isLowStock(p)).length===0 &&
            <div style={{color:"var(--muted)",fontSize:13,padding:"8px 0"}}>Nenhum produto com estoque baixo ✓</div>}
        </div>
      </div>

      <div className="card no-pad">
        <div className="card-head card-head-pad">
          <h3>Últimos pedidos</h3>
          <button className="card-link" onClick={()=>nav("#/admin/pedidos")}>Ver todos</button>
        </div>
        {loading
          ? <div style={{padding:24,color:"var(--muted)"}}>Carregando...</div>
          : <table className="tbl tbl-pad">
              <thead><tr><th>Pedido</th><th>Cliente</th><th>Data</th><th>Pgto</th><th>Status</th><th className="ta-r">Total</th></tr></thead>
              <tbody>
                {orders.slice(0,8).map(o=>
                  <tr key={o.code||o.id}>
                    <td className="mono">#{o.code}</td>
                    <td>{o.customer||o.customer_name}</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">{fmt(o.total)}</td>
                  </tr>)}
                {orders.length===0&&<tr><td colSpan="6" style={{textAlign:"center",color:"var(--muted)",padding:24}}>Nenhum pedido ainda</td></tr>}
              </tbody>
            </table>}
      </div>
    </div>
  );
}

/* ---------- Produtos ---------- */
function ProductsAdmin(){
  const { nav, products, deleteProduct, saveProduct } = window.useStore();
  const P = products || PRODUCTS;
  const [q,setQ] = useState("");
  const [view,setView] = useState(()=> window.innerWidth<=760 ? "grid" : "table");
  const [editing,setEditing] = useState(null); // null=list, "new"=new, produto=edit
  const [saving,setSaving] = useState(false);

  const list = P.filter(p=>
    p.name.toLowerCase().includes(q.toLowerCase()));

  const handleDelete = async (id)=>{
    if(!confirm("Excluir produto?")) return;
    try{
      await deleteProduct(id);
    }catch(e){
      alert("Erro ao excluir: " + (e.message||"Verifique sua conexão e tente novamente."));
    }
  };

  const handleToggleActive = async (p)=>{
    try{
      await saveProduct({...p, active:!p.active});
    }catch(e){
      alert("Erro ao atualizar: " + (e.message||"Tente novamente."));
    }
  };

  if(editing==="new"||editing?.id){
    return <ProductForm
      product={editing==="new"?null:editing}
      onSave={()=>setEditing(null)}
      onCancel={()=>setEditing(null)}/>;
  }

  return (
    <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 produto"/>
        </div>
        <div style={{display:"flex",gap:8}}>
          <button className={"ad-view-btn "+(view==="table"?"on":"")} onClick={()=>setView("table")} title="Tabela">☰</button>
          <button className={"ad-view-btn "+(view==="grid"?"on":"")} onClick={()=>setView("grid")} title="Grade">⊞</button>
        </div>
        <Btn variant="gold" icon="plus" onClick={()=>setEditing("new")}>Novo produto</Btn>
      </div>

      {view==="table"
        ? <div className="card no-pad">
            <table className="tbl tbl-pad">
              <thead><tr><th>Produto</th><th>Categoria</th><th className="ta-r">Preço</th><th className="ta-c">Estoque</th><th className="ta-c">Status</th><th></th></tr></thead>
              <tbody>
                {list.map(p=>
                  <tr key={p.id}>
                    <td>
                      <div className="cell-prod">
                        <div className="cell-prod-img"><ProductImage p={p} ratio="100%" showMeta={false}/></div>
                        <div><b>{p.name}</b><small className="mono cell-dim">{p.brandline}</small></div>
                      </div>
                    </td>
                    <td>{p.cat}</td>
                    <td className="ta-r mono">{fmt(p.price)}</td>
                    <td className="ta-c">
                      <span className={"stock "+(isOutOfStock(p)?"out":isLowStock(p)?"low":"")} title={isLowStock(p)?soldOutSummary(p):""}>{p.stock}</span>
                    </td>
                    <td className="ta-c">
                      <span className={"dotbadge "+(p.active?"on":"off")} style={{cursor:"pointer"}}
                        onClick={()=>handleToggleActive(p)}>
                        {p.active?"Ativo":"Inativo"}
                      </span>
                    </td>
                    <td className="ta-r" style={{display:"flex",gap:4,justifyContent:"flex-end"}}>
                      <button className="rowbtn" title="Editar" onClick={()=>setEditing(p)}>
                        <Icon name="edit" size={15}/>
                      </button>
                      <button className="rowbtn" title="Excluir" onClick={()=>handleDelete(p.id)}>
                        <Icon name="trash" size={15}/>
                      </button>
                    </td>
                  </tr>)}
              </tbody>
            </table>
          </div>
        : <div className="padmin-grid">
            {list.map(p=>
              <div key={p.id} className="padmin-card" onClick={()=>setEditing(p)}>
                <div className="padmin-img">
                  <ProductImage p={p} ratio="100%" showMeta={false}/>
                  <span className={"dotbadge abs "+(p.active?"on":"off")}>{p.active?"Ativo":"Inativo"}</span>
                </div>
                <div className="padmin-body">
                  <b>{p.name}</b>
                  <div className="padmin-foot">
                    <span className="mono">{fmt(p.price)}</span>
                    <span className={"stock "+(isOutOfStock(p)?"out":isLowStock(p)?"low":"")} title={isLowStock(p)?soldOutSummary(p):""}>{p.stock} un.</span>
                  </div>
                </div>
              </div>)}
          </div>}
    </div>
  );
}

/* ---------- Formulário de Produto ---------- */
function ProductForm({ product=null, onSave, onCancel }){
  const { saveProduct, saveVariants, fetchVariants, categories } = window.useStore();
  const cats = categories || CATEGORIES;
  const isEdit = !!product;
  const [saving,setSaving] = useState(false);
  const [msg,setMsg] = useState("");
  const [variants,setVariants] = useState({}); // { "Cor|Tamanho": stock }

  useEffect(()=>{
    if(isEdit && product?.id){
      fetchVariants(product.id).then(list=>{
        const map = {};
        list.forEach(v=>{ map[v.color+"|"+v.size] = v.stock; });
        setVariants(map);
      });
    }
  },[product?.id]);
  const [form,setForm] = useState({
    id:        product?.id||"",
    name:      product?.name||"",
    cat:       product?.cat||"tenis",
    sub:       product?.sub||"",
    price:     product?.price||"",
    compareAt: product?.compareAt||"",
    sizes:     (product?.sizes||[]).join(", "),
    colors:    (product?.colors||[]).join(", "),
    stock:     product?.stock??"",
    sku:       product?.sku||"",
    brandline: product?.brandline||"",
    tag:       product?.tag||"",
    featured:  product?.featured||false,
    active:    product?.active!==false,
    image_url: product?.image_url||"",
    images:    (product?.images && product.images.length>0) ? product.images : (product?.image_url?[{url:product.image_url,color:""}]:[]),
    description: product?.description||"",
    composition: product?.composition||"",
    rating:      product?.rating??"",
    reviewsCount: product?.reviewsCount??"",
  });

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

  const handleSave=async()=>{
    if(!form.name.trim()){setMsg("⚠ Informe o nome");return;}
    if(!form.price){setMsg("⚠ Informe o preço");return;}
    setSaving(true); setMsg("");
    try{
      const savedId = form.id||("prod-"+Date.now());
      await saveProduct({
        ...form,
        id:       savedId,
        price:    parseFloat(form.price),
        compareAt:parseFloat(form.compareAt)||0,
        sizes:    form.sizes.split(",").map(s=>s.trim()).filter(Boolean),
        colors:   [...new Set(form.images.map(it=>(it.color||"").trim()).filter(Boolean))],
        images:   form.images,
        image_url:(form.images[0] && form.images[0].url)||form.image_url||"",
        description: form.description||"",
        composition: form.composition||"",
        rating:      form.rating===""?null:parseFloat(form.rating),
        reviewsCount: form.reviewsCount===""?null:parseInt(form.reviewsCount),
      });
      const variantList = Object.entries(variants)
        .map(([key,stock])=>{ const [color,size] = key.split("|"); return {color,size,stock}; })
        .filter(v=>v.color && v.size);
      // Atualiza campo stock do produto com total real das variantes (UPDATE cirurgico, nao sobrescreve o produto)
      const variantTotal = variantList.reduce((s,v)=>s+(parseInt(v.stock)||0),0);
      await saveVariants(savedId, variantList);
      if (variantList.length > 0 && window.DB) {
        await window.DB.updateStock(savedId, variantTotal);
        // Atualiza a lista em memoria para refletir o novo estoque sem precisar recarregar a pagina
        await window.refreshProducts?.();
      }
      setMsg("✅ Produto salvo!");
      setTimeout(()=>onSave?.(),1200);
    }catch(e){setMsg("❌ "+e.message);}
    finally{setSaving(false);}
  };

  return (
    <div className="card" style={{maxWidth:720}}>
      <div className="card-head">
        <h3>{isEdit?"Editar Produto":"Novo Produto"}</h3>
        {onCancel&&<button className="sh-ic" onClick={onCancel}><Icon name="x" size={18}/></button>}
      </div>
      <div style={{padding:"0 22px 22px"}}>
        <MultiImageUploader value={form.images} onChange={imgs=>set("images",imgs)} max={5}
          allSizes={form.sizes.split(",").map(s=>s.trim()).filter(Boolean)}/>
        <div className="ff">
          <label>Nome do produto *</label>
          <input value={form.name} onChange={e=>set("name",e.target.value)} placeholder="Ex: Runner Twist Full Black"/>
        </div>
        <div className="ff-row">
          <div className="ff"><label>Categoria *</label>
            <select value={form.cat} onChange={e=>set("cat",e.target.value)}>
              {cats.map(c=><option key={c.slug} value={c.slug}>{c.name}</option>)}
            </select>
          </div>
          <div className="ff"><label>Subcategoria</label>
            <input value={form.sub} onChange={e=>set("sub",e.target.value)} placeholder="Ex: Masculino"/>
          </div>
          <div className="ff"><label>Linha</label>
            <input value={form.brandline} onChange={e=>set("brandline",e.target.value)} placeholder="LF ATHLETIC"/>
          </div>
        </div>
        <div className="ff-row">
          <div className="ff"><label>Preço (R$) *</label>
            <input type="number" step="0.01" value={form.price} onChange={e=>set("price",e.target.value)} placeholder="199.90"/>
          </div>
          <div className="ff"><label>Preço original (R$)</label>
            <input type="number" step="0.01" value={form.compareAt} onChange={e=>set("compareAt",e.target.value)} placeholder="249.90"/>
          </div>
          {(()=>{
            const hasColors = [...new Set(form.images.map(it=>(it.color||"").trim()).filter(Boolean))].length > 0;
            return (
              <div className="ff">
                <label>Estoque {hasColors && <span className="stock-auto-badge">calculado automaticamente</span>}</label>
                <input type="number" value={form.stock} onChange={e=>set("stock",e.target.value)}
                  placeholder="10" disabled={hasColors}
                  title={hasColors?"Preenchido automaticamente pela soma das variantes de cor":"Controle manual de estoque"}
                  style={hasColors?{background:"var(--ink-2)",color:"var(--muted)",cursor:"not-allowed"}:{}}/>
                {hasColors && <small className="cell-dim" style={{fontSize:11,marginTop:3,display:"block"}}>Soma das variantes · edite na grade abaixo</small>}
              </div>
            );
          })()}
        </div>

        {/* Calculadora de preço com juros Pix */}
        {(()=>{
          const MP_PIX = 0.99;
          const preco = parseFloat(form.price) || 0;
          if(!preco) return null;
          const precoPix = (preco / (1 - MP_PIX/100)).toFixed(2);
          const fmt2 = v => "R$ "+parseFloat(v).toFixed(2).replace(".",",");
          return (
            <div style={{background:"#f0fdf4",border:"1px solid #bbf7d0",borderRadius:8,
              padding:"12px 16px",marginBottom:16,fontSize:13}}>
              <div style={{fontWeight:700,color:"#166534",marginBottom:8}}>
                💡 Para receber <b>{fmt2(preco)}</b> líquido no Pix:
              </div>
              <div style={{display:"flex",alignItems:"center",gap:16,flexWrap:"wrap"}}>
                <div>
                  <span style={{color:"#555"}}>Cobrar: </span>
                  <b style={{color:"#166534",fontSize:16}}>{fmt2(precoPix)}</b>
                  <span style={{color:"#888",fontSize:11}}> (taxa Pix {MP_PIX}%)</span>
                </div>
                <button style={{fontSize:12,background:"#16a34a",border:"none",color:"#fff",
                  borderRadius:6,padding:"6px 14px",cursor:"pointer",fontWeight:700}}
                  onClick={()=>set("price", precoPix)}>
                  Aplicar esse preço
                </button>
              </div>
              <div style={{color:"#888",fontSize:11,marginTop:6}}>
                ℹ️ Cartão: o MP exibe os juros de parcelamento automaticamente para o cliente.
              </div>
            </div>
          );
        })()}
        <div className="ff-row">
          <div className="ff"><label>Tamanhos (separados por vírgula)</label>
            <input value={form.sizes} onChange={e=>set("sizes",e.target.value)} placeholder="P, M, G, GG ou 38, 39, 40"/>
          </div>
          <div className="ff"><label>Cores</label>
            <div className="ff-static cell-dim" style={{fontSize:13,padding:"10px 0"}}>
              {[...new Set(form.images.map(it=>(it.color||"").trim()).filter(Boolean))].join(", ") || "Preencha a cor de cada foto abaixo"}
            </div>
          </div>
        </div>

        {(() => {
          const gridColors = [...new Set(form.images.map(it=>(it.color||"").trim()).filter(Boolean))];
          const gridSizes  = form.sizes.split(",").map(s=>s.trim()).filter(Boolean);
          const noSizes = gridSizes.length === 0; // acessorios sem tamanho
          if (gridColors.length === 0) return null;
          // Se nao ha tamanhos, usa "_" como tamanho unico interno
          const effectiveSizes = noSizes ? ["_"] : gridSizes;
          return (
            <div className="ff">
              <label>{noSizes ? "Estoque por cor" : "Estoque por cor e tamanho"}</label>
              <div className="variant-grid-wrap">
                <table className="variant-grid">
                  <thead>
                    <tr>
                      <th>Cor</th>
                      {noSizes
                        ? <th>Estoque</th>
                        : gridSizes.map(sz=><th key={sz}>{sz}</th>)}
                    </tr>
                  </thead>
                  <tbody>
                    {gridColors.map(c=>
                      <tr key={c}>
                        <td className="variant-grid-color">{c}</td>
                        {effectiveSizes.map(sz=>{
                          const key = c+"|"+sz;
                          return (
                            <td key={sz}>
                              <input type="number" min="0" value={variants[key]??""}
                                placeholder="0"
                                onChange={e=>setVariants(v=>({...v, [key]: e.target.value}))}/>
                            </td>
                          );
                        })}
                      </tr>)}
                  </tbody>
                </table>
              </div>
              <p className="cell-dim" style={{fontSize:12,marginTop:6}}>
                Total: {Object.values(variants).reduce((s,v)=>s+(parseInt(v)||0),0)} unidades
              </p>
            </div>
          );
        })()}
        <div className="ff-row">
          <div className="ff"><label>Tag / Promoção</label>
            <input value={form.tag} onChange={e=>set("tag",e.target.value)} placeholder="-20%, NOVO, 2 por R$350"/>
          </div>
          <div className="ff" style={{display:"flex",alignItems:"center",gap:20,paddingTop:24}}>
            <label style={{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:13,fontWeight:500}}>
              <input type="checkbox" checked={form.featured} onChange={e=>set("featured",e.target.checked)}/> Destaque
            </label>
            <label style={{display:"flex",alignItems:"center",gap:8,cursor:"pointer",fontSize:13,fontWeight:500}}>
              <input type="checkbox" checked={form.active} onChange={e=>set("active",e.target.checked)}/> Ativo
            </label>
          </div>
        </div>

        <div className="ff">
          <label>Descrição (opcional — se vazio, usa o texto padrão)</label>
          <textarea rows={3} value={form.description} onChange={e=>set("description",e.target.value)}
            placeholder={`${form.name||"Produto"} da linha ${form.brandline||"LF"}. Peça streetwear de luxo com modelagem autoral LF, costura reforçada e etiqueta numerada.`}/>
        </div>
        <div className="ff">
          <label>Composição & medidas (opcional — se vazio, usa o padrão da loja)</label>
          <textarea rows={2} value={form.composition} onChange={e=>set("composition",e.target.value)}
            placeholder="Ex: Algodão premium 220g/m² · acabamento ribana · lavar à mão ou ciclo delicado."/>
        </div>
        <div className="ff-row">
          <div className="ff"><label>Avaliação (0 a 5, opcional)</label>
            <input type="number" step="0.1" min="0" max="5" value={form.rating}
              onChange={e=>set("rating",e.target.value)} placeholder="Padrão da loja"/>
          </div>
          <div className="ff"><label>Nº de avaliações (opcional)</label>
            <input type="number" min="0" value={form.reviewsCount}
              onChange={e=>set("reviewsCount",e.target.value)} placeholder="Padrão da loja"/>
          </div>
        </div>
        {msg&&<div style={{margin:"10px 0",fontSize:13,fontWeight:600,
          color:msg.startsWith("✅")?"#1E8C5A":msg.startsWith("❌")?"#C0392B":"#9B6E1A"}}>{msg}</div>}
        <div style={{display:"flex",gap:10,marginTop:20}}>
          <Btn variant="gold" icon="check" onClick={handleSave} disabled={saving}>
            {saving?"Salvando...":(isEdit?"Salvar alterações":"Criar produto")}
          </Btn>
          {onCancel&&<Btn variant="ghost" onClick={onCancel}>Cancelar</Btn>}
        </div>
      </div>
    </div>
  );
}

/* ---------- Pedidos ---------- */
function OrdersAdmin(){
  const { fetchOrders, updateOrderStatus, cancelOrder, deleteOrder } = window.useStore();
  const [orders,setOrders] = useState([]);
  const [filter,setFilter] = useState("Todos");
  const [sel,setSel] = useState(null);
  const [loading,setLoading] = useState(true);
  const [lastUpdate,setLastUpdate] = useState(null);

  const load=(silent=false)=>{
    if(!silent) setLoading(true);
    fetchOrders().then(o=>{
      setOrders(o||[]);
      setLoading(false);
      setLastUpdate(new Date());
    }).catch(()=>setLoading(false));
  };

  const cancelExpired = ()=>{
    if(window._ANON_KEY) {
      fetch("https://gwbiccrzoeppvfzpaqji.supabase.co/functions/v1/cancel-expired-orders", {
        method: "POST",
        headers: { "apikey": window._ANON_KEY, "Authorization": `Bearer ${window._ANON_KEY}` },
      }).then(r=>r.json()).then(data=>{
        if(data.cancelled > 0 && window.refreshProducts) window.refreshProducts();
      }).catch(()=>{});
    }
  };

  useEffect(()=>{
    load();
    cancelExpired();
    const interval = setInterval(()=>{ load(true); cancelExpired(); }, 15000);
    return ()=>clearInterval(interval);
  },[]);

  const statuses=["Todos","Pendente","Pago","Enviado","Entregue","Cancelado"];
  const counts={}; statuses.slice(1).forEach(s=>counts[s]=(orders.filter(o=>o.status===s)).length);
  const list=filter==="Todos"?orders:orders.filter(o=>o.status===filter);

  const handleStatus=async(id,status)=>{
    if(status==="Cancelado"){
      await cancelOrder(id);
    } else {
      await updateOrderStatus(id,status);
    }
    setOrders(prev=>prev.map(o=>(o.id===id||o.code===id)?{...o,status}:o));
  };

  return (
    <div>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4}}>
        <div className="ad-tabs" style={{margin:0}}>
          {statuses.map(s=>
            <button key={s} className={"ad-tab "+(filter===s?"on":"")} onClick={()=>setFilter(s)}>
              {s} {s!=="Todos"&&counts[s]>0&&<span className="ad-tab-n">{counts[s]}</span>}
            </button>)}
        </div>
        <div style={{display:"flex",alignItems:"center",gap:8,fontSize:12,color:"var(--muted)"}}>
          {lastUpdate&&<span>Atualizado às {lastUpdate.toLocaleTimeString("pt-BR",{hour:"2-digit",minute:"2-digit",second:"2-digit"})}</span>}
          <button onClick={()=>load()} style={{background:"none",border:"1px solid var(--line)",borderRadius:6,padding:"4px 10px",cursor:"pointer",fontSize:12,color:"var(--muted)"}}>
            ↻ Atualizar
          </button>
        </div>
      </div>
      {loading
        ? <div style={{padding:24,color:"var(--muted)"}}>Carregando pedidos...</div>
        : <>
            <div className="card no-pad tbl-desktop-only">
              <table className="tbl tbl-pad">
                <thead><tr><th>Pedido</th><th>Cliente</th><th>Data</th><th>Pgto</th><th>Status</th><th className="ta-r">Total</th><th></th></tr></thead>
                <tbody>
                  {list.map(o=>
                    <tr key={o.code||o.id} onClick={()=>setSel(o)} style={{cursor:"pointer"}}>
                      <td className="mono">#{o.code}</td>
                      <td>
                        <div className="cell-cust">
                          <div className="cell-av">{(o.customer||o.customer_name||"?").split(" ").map(x=>x[0]).slice(0,2).join("")}</div>
                          {o.customer||o.customer_name}
                        </div>
                      </td>
                      <td className="cell-dim">{new Date(o.date||o.created_at).toLocaleDateString("pt-BR")}</td>
                      <td>{o.payment}</td>
                      <td onClick={e=>e.stopPropagation()}>
                        <select className="ad-select sm" value={o.status}
                          onChange={e=>handleStatus(o.id||o.code,e.target.value)}>
                          {["Pendente","Pago","Enviado","Entregue","Cancelado"].map(s=>
                            <option key={s}>{s}</option>)}
                        </select>
                      </td>
                      <td className="ta-r mono">{fmt(o.total)}</td>
                      <td className="ta-r"><Icon name="chevR" size={15}/></td>
                    </tr>)}
                  {list.length===0&&<tr><td colSpan="7" style={{textAlign:"center",color:"var(--muted)",padding:24}}>Nenhum pedido</td></tr>}
                </tbody>
              </table>
            </div>
            <div className="ord-cards-mobile">
              {list.length===0
                ? <div style={{textAlign:"center",color:"var(--muted)",padding:24}}>Nenhum pedido</div>
                : list.map(o=>
                  <div key={o.code||o.id} className="ord-card" onClick={()=>setSel(o)}>
                    <div className="ord-card-top">
                      <span className="mono ord-card-code">#{o.code}</span>
                      <span className="ta-r mono ord-card-total">{fmt(o.total)}</span>
                    </div>
                    <div className="ord-card-cust">
                      <div className="cell-av">{(o.customer||o.customer_name||"?").split(" ").map(x=>x[0]).slice(0,2).join("")}</div>
                      <div>
                        <b>{o.customer||o.customer_name}</b>
                        <small className="cell-dim">{new Date(o.date||o.created_at).toLocaleDateString("pt-BR")} · {o.payment}</small>
                      </div>
                    </div>
                    <div className="ord-card-bottom" onClick={e=>e.stopPropagation()}>
                      <select className="ad-select sm" value={o.status}
                        onChange={e=>handleStatus(o.id||o.code,e.target.value)}>
                        {["Pendente","Pago","Enviado","Entregue","Cancelado"].map(s=>
                          <option key={s}>{s}</option>)}
                      </select>
                      <Icon name="chevR" size={15}/>
                    </div>
                  </div>)}
            </div>
          </>}
      {sel&&<OrderDrawer o={sel} close={()=>setSel(null)} onStatusChange={handleStatus}
        onDelete={async(id)=>{ await deleteOrder(id); setOrders(prev=>prev.filter(x=>x.id!==id)); setSel(null); if(window.refreshProducts) window.refreshProducts(); }}
      />}
    </div>
  );
}

function OrderDrawer({ o, close, onStatusChange, onDelete }){
  const { storeConfig } = window.useStore();
  const cfg = storeConfig || {};
  const custPhone = (o.phone||"").replace(/\D/g,"");
  const storePhone = (cfg.store_whatsapp||"5585921495164").replace(/\D/g,"");
  const waPhone = custPhone || storePhone;
  return (
    <div className="drawer open">
      <div className="drawer-ov" onClick={close}></div>
      <div className="drawer-panel ad-drawer">
        <div className="drawer-head">
          <div>
            <div className="label-caps">Pedido</div>
            <h3 className="serif mono">#{o.code}</h3>
          </div>
          <button className="sh-ic" onClick={close}><Icon name="x" size={20}/></button>
        </div>
        <div className="ad-drawer-body">
          <div className="od-status">
            <span className={"badge st-"+(o.status||"pendente").toLowerCase()}>{o.status}</span>
            <select className="ad-select sm" value={o.status}
              onChange={e=>onStatusChange(o.id||o.code,e.target.value)}>
              {["Pendente","Pago","Enviado","Entregue","Cancelado"].map(s=><option key={s}>{s}</option>)}
            </select>
          </div>
          <div className="od-block">
            <h4 className="label-caps">Cliente</h4>
            <p><b>{o.customer||o.customer_name}</b><br/>
            <span className="cell-dim">{o.payment} · {new Date(o.date||o.created_at).toLocaleString("pt-BR")}</span></p>
            {o.address && (
              <p style={{margin:"4px 0 0",fontSize:13,color:"var(--muted)"}}>
                📍 {o.address}
              </p>
            )}
          </div>
          {(o.items||[]).length>0&&(
            <div className="od-block">
              <h4 className="label-caps">Itens</h4>
              {(o.items||[]).map((it,i)=>
                <div key={i} className="od-item">
                  <div className="od-item-img"><ProductImage p={it} ratio="100%" showMeta={false}/></div>
                  <div className="od-item-info">
                    <b>{it.name}</b>
                    <small>
                      {it.color && it.color !== "" && <>{it.color}</>}
                      {it.color && it.color !== "" && it.size && it.size !== "Único" && " · "}
                      {it.size && it.size !== "Único" && <>Tam {it.size}</>}
                      {(!it.size || it.size === "Único") && (!it.color || it.color === "") && <>Tam Único</>}
                      {" · "}{it.qty}×
                    </small>
                  </div>
                  <span className="mono">{fmt(it.price*it.qty)}</span>
                </div>)}
            </div>)}
          <div className="od-totals">
            <div className="co-row"><span>Subtotal</span><span className="mono">{fmt(o.subtotal)}</span></div>
            <div className="co-row"><span>Frete</span><span className="mono">{o.freight===0?"Grátis":fmt(o.freight)}</span></div>
            <div className="co-row co-total"><span>Total</span><span className="mono gold-text">{fmt(o.total)}</span></div>
          </div>
          <div className="od-actions">
            <a href={"https://wa.me/"+waPhone+"?text=Olá "+encodeURIComponent(o.customer||"")+", seu pedido %23"+o.code+" foi enviado!"}
              target="_blank" rel="noopener noreferrer">
              <Btn variant="gold" full icon="truck">Notificar pelo WhatsApp</Btn>
            </a>
            {!custPhone && <p className="cell-dim" style={{marginTop:8,fontSize:12}}>
              ⚠ Telefone do cliente não cadastrado — abrindo o WhatsApp da loja.
            </p>}
            <Btn variant="ghost" full style={{marginTop:8,color:"var(--red)",borderColor:"var(--red)"}}
              onClick={async()=>{
                if(!confirm(`Excluir pedido #${o.code}? Esta ação não pode ser desfeita.`)) return;
                if(onDelete) await onDelete(o.id);
              }}>
              🗑 Excluir pedido
            </Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

function BarChart({ data=[], h=160 }){
  if(!data||data.length===0) return <div style={{height:h,display:"flex",alignItems:"center",justifyContent:"center",color:"var(--muted)"}}>Sem dados</div>;
  const max = Math.max(...data.map(d=>d.val||d.value||0))||1;
  return (
    <div className="bar-chart-scroll" style={{overflowX:"auto",WebkitOverflowScrolling:"touch"}}>
      <div style={{display:"flex",alignItems:"flex-end",gap:4,height:h,padding:"8px 0",minWidth:(data.length*42)+"px"}}>
        {data.map((d,i)=>{
          const v = d.val||d.value||0;
          const pct = (v/max)*100;
          return (
            <div key={i} style={{flex:1,minWidth:38,display:"flex",flexDirection:"column",alignItems:"center",gap:3,height:"100%",justifyContent:"flex-end"}}>
              <div style={{fontSize:8,color:"var(--gold-2)",fontWeight:600,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",width:"100%",textAlign:"center"}}>{v>0?fmt(v).replace("R$",""):"−"}</div>
              <div title={fmt(v)} style={{width:"100%",background:"var(--gold-grad)",borderRadius:"2px 2px 0 0",
                height:Math.max(pct,2)+"%",transition:"height .3s",minHeight:v>0?3:1}}></div>
              <div style={{fontSize:9,color:"var(--muted)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",width:"100%",textAlign:"center"}}>
                {d.label||d.date||""}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { AdminLayout, Dashboard, ProductsAdmin, ProductForm, OrdersAdmin, BarChart, OrderDrawer });