/* ============================================================
   LF CONCEITO — VITRINE parte 2: categoria, produto, carrinho
   ============================================================ */

function CategoryPage({ slug }){
  const { nav, products, categories } = window.useStore();
  const P = products || PRODUCTS;
  const cats = categories || CATEGORIES;
  const isAll = slug==="todos";
  const isNew = slug==="lancamentos";
  const cat = isAll ? { name:"Todos os produtos", slug:"todos", subs:[] }
    : isNew ? { name:"Lançamentos", slug:"lancamentos", subs:[] }
    : cats.find(c=>c.slug===slug);
  const all = isAll ? P.filter(p=>p.active)
    : isNew ? P.filter(p=>p.active && p.tag==="NOVO")
    : P.filter(p=>p.cat===slug && p.active);
  const [sub,setSub] = useState("Todos");
  const [sort,setSort] = useState("relevancia");
  const [maxP,setMaxP] = useState(600);

  let list = all.filter(p=>(sub==="Todos"||p.sub===sub) && p.price<=maxP);
  if(sort==="menor") list=[...list].sort((a,b)=>a.price-b.price);
  if(sort==="maior") list=[...list].sort((a,b)=>b.price-a.price);
  if(sort==="desconto") list=[...list].sort((a,b)=>(b.compareAt-b.price)-(a.compareAt-a.price));

  if(!cat) return (
    <div className="wrap" style={{padding:"80px 0",textAlign:"center"}}>
      <h2 className="serif">Categoria não encontrada</h2>
      <Btn variant="gold" onClick={()=>nav("#/")} style={{marginTop:20}}>Voltar à loja</Btn>
    </div>
  );

  return (
    <div className="fade-in">
      <div className="cat-hero">
        <div className="wrap">
          <div className="bc">
            <a onClick={()=>nav("#/")}>Início</a> / <span>{cat.name}</span>
          </div>
          <h1 className="serif cat-title">{cat.name}</h1>
          <p>{all.length} peças · streetwear premium LF</p>
        </div>
      </div>
      <div className="wrap cat-body">
        <aside className="cat-side">
          <div className="filt">
            <h4 className="label-caps">Linha</h4>
            <button className={"filt-i "+(sub==="Todos"?"on":"")} onClick={()=>setSub("Todos")}>Todos</button>
            {cat.subs.map(s=>
              <button key={s} className={"filt-i "+(sub===s?"on":"")} onClick={()=>setSub(s)}>{s}</button>)}
          </div>
          <div className="filt">
            <h4 className="label-caps">Preço até {fmt(maxP)}</h4>
            <input type="range" min="50" max="600" step="10" value={maxP}
              onChange={e=>setMaxP(+e.target.value)} className="filt-range"/>
          </div>
        </aside>
        <div className="cat-main">
          <div className="cat-tools">
            <span className="cat-count">{list.length} resultado{list.length!==1?"s":""}</span>
            <label className="cat-sort">
              Ordenar:
              <select value={sort} onChange={e=>setSort(e.target.value)}>
                <option value="relevancia">Relevância</option>
                <option value="menor">Menor preço</option>
                <option value="maior">Maior preço</option>
                <option value="desconto">Maior desconto</option>
              </select>
            </label>
          </div>
          <div className="pgrid pgrid-cat">
            {list.map(p=><ProductCard key={p.id} p={p}/>)}
          </div>
          {list.length===0 &&
            <div className="cat-empty">
              <p>Nenhuma peça nesse filtro.</p>
              <Btn variant="ghost" onClick={()=>{setSub("Todos");setMaxP(600);}}>Limpar filtros</Btn>
            </div>}
        </div>
      </div>
    </div>
  );
}

function ProductPage({ id }){
  const { nav, addToCart, openCart, products, categories, storeConfig, isFavorite, toggleFavorite, fetchVariants } = window.useStore();
  const cfg = storeConfig || {};
  const P = products || PRODUCTS;
  const cats = categories || CATEGORIES;
  const p = P.find(x=>x.id===id);
  const [size,setSize] = useState(null);
  const [color,setColor] = useState(null);
  const [qty,setQty] = useState(1);
  const [err,setErr] = useState(false);
  const [acc,setAcc] = useState("desc");
  const [imgIdx,setImgIdx] = useState(0);
  const [variants,setVariants] = useState([]); // [{color,size,stock}]

  useEffect(()=>{
    window.scrollTo(0,0);
    if(p){ setSize(null); setColor(p.colors[0]||null); setQty(1); setErr(false); setImgIdx(0); }
    if(id) fetchVariants(id).then(vs=>{
      setVariants(vs);
      // Corrigir qty se já excede o estoque da variante inicial
      if(vs.length > 0 && p){
        const c = p.colors[0] || "";
        const v = vs.find(v => v.color.toLowerCase()===c.toLowerCase() && v.size==="_");
        if(v && v.stock < 99) setQty(q => Math.min(q, Math.max(1, v.stock)));
      }
    });
  },[id]);

  // Estoque da combinacao cor+tamanho atualmente selecionada (null = produto nao usa esse controle)
  const variantStock = (c, s) => {
    if (variants.length === 0) return null;
    const sizeKey = s || "_";
    // Para acessórios (size="_"): aceita só "_"
    // Para produtos com tamanho: busca exato, não aceita "_" como fallback
    const v = sizeKey === "_"
      ? variants.find(v => v.color.toLowerCase()===(c||"").toLowerCase() && v.size==="_")
      : variants.find(v => v.color.toLowerCase()===(c||"").toLowerCase() && v.size===sizeKey);
    return v ? v.stock : 0;
  };

  // Para acessorios sem tamanho: verifica estoque da cor direto (usando size="_")
  const colorVariantStock = (c) => {
    if (variants.length === 0) return null;
    const v = variants.find(v => v.color.toLowerCase()===(c||"").toLowerCase() && v.size==="_");
    return v ? v.stock : null;
  };

  if(!p) return (
    <div className="wrap" style={{padding:"80px 0",textAlign:"center"}}>
      <h2 className="serif">Produto não encontrado</h2>
      <Btn variant="gold" onClick={()=>nav("#/")} style={{marginTop:20}}>Voltar à loja</Btn>
    </div>
  );

  const catName = (cats.find(c=>c.slug===p.cat)||{}).name || p.cat;
  const related = P.filter(x=>x.cat===p.cat && x.id!==p.id && x.active).slice(0,4);
  const discount = p.compareAt>0 ? Math.round((1-p.price/p.compareAt)*100) : 0;

  // Avaliação — por produto, com fallback para o padrão da loja
  const rating = (p.rating!=null) ? p.rating : (cfg.default_rating!=null ? parseFloat(cfg.default_rating) : 4.9);
  const reviewsCount = (p.reviewsCount!=null) ? p.reviewsCount : (cfg.default_reviews_count!=null ? parseInt(cfg.default_reviews_count) : 218);

  // Pix e parcelamento — configuráveis no admin

  const gallery = ((p.images && p.images.length>0) ? p.images : (p.image_url ? [{url:p.image_url,color:""}] : []))
    .map(it => typeof it === "string" ? { url: it, color: "" } : it);
  const imgSrc = (gallery[imgIdx] && gallery[imgIdx].url) || null;

  // Tamanhos disponiveis para a cor selecionada (se a cor nao tiver restricao especifica, usa todos do produto)
  const colorEntry = gallery.find(g => g.color && color && g.color.toLowerCase()===color.toLowerCase());
  // Tamanhos: sempre usa p.sizes como fonte de verdade
  // colorEntry.sizes só é usado se p.sizes estiver vazio (produto sem tamanhos gerais)
  const rawSizes = (p.sizes && p.sizes.length > 0)
    ? p.sizes
    : (colorEntry && colorEntry.sizes && colorEntry.sizes.length > 0 ? colorEntry.sizes : []);
  // Ordenar tamanhos: numéricos crescente; roupas na ordem padrão P→M→G→GG→XG
  const SIZE_ORDER = ["PP","P","M","G","GG","XG","XGG","EG","EGG"];
  const availableSizes = [...rawSizes].sort((a,b)=>{
    const na = parseFloat(a), nb = parseFloat(b);
    // ambos numéricos → crescente
    if(!isNaN(na) && !isNaN(nb)) return na - nb;
    // ambos texto → pela ordem padrão de roupa, ou alfabético
    const ia = SIZE_ORDER.indexOf(a.toUpperCase());
    const ib = SIZE_ORDER.indexOf(b.toUpperCase());
    if(ia !== -1 && ib !== -1) return ia - ib;
    if(ia !== -1) return -1;
    if(ib !== -1) return 1;
    return a.localeCompare(b);
  });
  // Cor esgotada = flag manual (soldOut na foto) OU estoque total da cor nas variantes === 0
  const isColorSoldOut = (c) => {
    // Sem cor → usa p.stock como referência
    if (!c) return p.stock <= 0;
    // Fallback imediato: se p.stock=0 e variantes ainda não carregaram, tudo esgotado
    if (p.stock <= 0 && variants.length === 0) return true;
    const entry = gallery.find(g => g.color && g.color.toLowerCase()===c.toLowerCase());
    if (entry && entry.soldOut) return true;
    if (variants.length > 0) {
      const colorVariants = variants.filter(v => v.color.toLowerCase()===c.toLowerCase());
      if (colorVariants.length > 0) {
        const totalStock = colorVariants.reduce((sum, v) => sum + (v.stock||0), 0);
        if (totalStock <= 0) return true;
      }
    }
    return false;
  };
  const colorSoldOut = isColorSoldOut(color||"");

  const buy = ()=>{
    if(colorSoldOut) return; // segunda camada de seguranca: nunca finaliza compra de cor esgotada
    if(p.sizes && p.sizes.length>0 && !size){ setErr(true); return; }
    const sizeForCheck = size || (p.sizes && p.sizes.length > 0 ? null : "_");
    const stockHere = variantStock(color, sizeForCheck);
    if(stockHere !== null && stockHere <= 0) return; // combinacao especifica sem estoque
    addToCart(p, size||"Único", color||p.colors[0]||"Padrão", qty);
    openCart();
  };

  // Troca de cor sincroniza a foto (se existir uma foto cadastrada para aquela cor) e ajusta os tamanhos
  const selectColor = (c) => {
    if (isColorSoldOut(c)) return; // bloqueia cor esgotada (flag ou estoque zero)
    setColor(c);
    setQty(1);
    const entry = gallery.find(g => g.color && g.color.toLowerCase()===c.toLowerCase());
    const idx = gallery.findIndex(g => g.color && g.color.toLowerCase()===c.toLowerCase());
    if (idx >= 0) setImgIdx(idx);
    const sizesForColor = (entry && entry.sizes && entry.sizes.length>0) ? entry.sizes : (p.sizes||[]);
    if (size && !sizesForColor.includes(size)) setSize(null);
  };
  const selectThumb = (i) => {
    const g = gallery[i];
    if (g && g.color && isColorSoldOut(g.color)) return; // bloqueia miniatura de cor esgotada
    setImgIdx(i);
    if (g && g.color) selectColor(g.color);
  };

  return (
    <div className="fade-in">
      <div className="wrap pp">
        <div className="bc">
          <a onClick={()=>nav("#/")}>Início</a> /&nbsp;
          <a onClick={()=>nav("#/c/"+p.cat)}>{catName}</a> /&nbsp;
          <span>{p.name}</span>
        </div>
        <div className="pp-grid">
          <div className="pp-gallery">
            <div className="pp-main">
              {imgSrc
                ? <img src={imgSrc} alt={p.name} style={{width:"100%",height:"100%",borderRadius:4,objectFit:"contain"}}/>
                : <ProductImage p={p} ratio="118%"/>}
            </div>
            <div className="pp-thumbs">
              {gallery.length>0
                ? gallery.map((g,i)=>
                    <div key={i} className={"pp-thumb"+(i===imgIdx?" on":"")+(g.color && isColorSoldOut(g.color)?" soldout":"")} onClick={()=>selectThumb(i)}>
                      <img src={g.url} alt={p.name+" "+(i+1)} style={{width:"100%",height:"100%",objectFit:"contain"}}/>
                    </div>)
                : <div className="pp-thumb on">
                    <ProductImage p={p} ratio="100%" showMeta={false}/>
                  </div>}
            </div>
          </div>
          <div className="pp-info">
            <div className="pp-brand mono">{p.brandline}</div>
            <h1 className="serif pp-name">{p.name}</h1>
            <div className="pp-rate">
              <Stars n={Math.round(rating)} size={14}/><span>{rating.toFixed(1)} · {reviewsCount} avaliações</span>
            </div>
            <div className="pp-price">
              <Money v={p.price} old={p.compareAt} className="pp-money"/>
              {discount>0 && <Tag kind="gold">-{discount}%</Tag>}
            </div>

            {p.colors.length>0 && (
              <div className="pp-block">
                <div className="pp-block-head">
                  <span className="label-caps">Cor</span>
                </div>
                <div className="pp-colors">
                  {p.colors.map(c=>{
                    const soldOut = isColorSoldOut(c);
                    return (
                      <button key={c} className={"pp-color "+(color===c?"on":"")+(soldOut?" soldout":"")}
                        disabled={soldOut}
                        onClick={()=>!soldOut && selectColor(c)}>{c}{soldOut && <small> · Esgotado</small>}</button>
                    );
                  })}
                </div>
              </div>
            )}

            {availableSizes && availableSizes.length>0 && (
              <div className="pp-block">
                <div className="pp-block-head">
                  <span className="label-caps">Tamanho</span>
                  <a className="pp-guide">Guia de medidas</a>
                </div>
                <div className={"pp-sizes "+(err?"err":"")}>
                  {availableSizes.map(s=>{
                    const stockHere = variantStock(color, s);
                    const outOfStock = stockHere !== null && stockHere <= 0;
                    return (
                      <button key={s} className={"pp-size "+(size===s?"on":"")+(outOfStock?" soldout":"")}
                        disabled={outOfStock}
                        onClick={()=>{ if(!outOfStock){ setSize(s); setErr(false); setQty(1); } }}>{s}</button>
                    );
                  })}
                </div>
                {err && <span className="pp-err">Selecione um tamanho</span>}
              </div>
            )}

            {(()=>{
              // maxQty: só limita pela variante se variants já carregou E cor+tamanho estão selecionados
              const hasSizes = p.sizes && p.sizes.length > 0;
              const variantsLoaded = variants.length > 0;
              let maxQty = (hasSizes && !size) ? 1 : 99;
              if (variantsLoaded && color) {
                if (!hasSizes) {
                  const v = variants.find(v => v.color.toLowerCase() === color.toLowerCase() && v.size === "_");
                  if (v) maxQty = v.stock;
                  else maxQty = 0;
                } else if (size) {
                  const v = variants.find(v => v.color.toLowerCase() === color.toLowerCase() && v.size === size);
                  if (v) maxQty = v.stock;
                }
              } else if (!variantsLoaded && !hasSizes) {
                maxQty = qty; // ainda carregando — trava
              }
              // Fallback: se variants não carregou mas p.stock=0 → esgotado
              // Também: sem cor selecionada (produto sem cores) e p.stock=0 → esgotado
              // Também: variantsLoaded mas color=null → sem cor para buscar → usa p.stock
              const outOfStockVariant =
                (variantsLoaded && color && maxQty <= 0) ||
                (!variantsLoaded && p.stock <= 0) ||
                (p.stock <= 0 && !color);
              return (
                <>
                  <div className="pp-buy">
                    <div className="qty">
                      <button onClick={()=>setQty(Math.max(1,qty-1))} disabled={hasSizes && !size}><Icon name="minus" size={15}/></button>
                      <span className="mono">{qty}</span>
                      <button onClick={()=>setQty(Math.min(maxQty,qty+1))} disabled={outOfStockVariant || (hasSizes && !size)}><Icon name="plus" size={15}/></button>
                    </div>
                    {outOfStockVariant
                      ? <Btn variant="ghost" size="lg" full disabled>Esgotado</Btn>
                      : <Btn variant="gold" size="lg" full icon="cart" onClick={buy}>Adicionar à sacola</Btn>}
                    <button className={"pp-fav "+(isFavorite(p.id)?"on":"")} title="Favoritar" onClick={()=>toggleFavorite(p.id)}>
                      <Icon name="heart" size={20} fill={isFavorite(p.id)?"currentColor":"none"}/>
                    </button>
                  </div>
                  <div className={"pp-stock"+(outOfStockVariant?" out":"")}>
                    {outOfStockVariant
                      ? <><Icon name="x" size={14}/> Esgotado</>
                      : <><Icon name="check" size={14}/> {(!hasSizes || size) && maxQty<99 && maxQty<=5 ? `Apenas ${maxQty} em estoque` : "Em estoque"}</>}
                  </div>
                </>
              );
            })()}

            <div className="pp-acc">
              {[["desc","Descrição"],["medidas","Composição & medidas"],["entrega","Entrega & trocas"]].map(([k,t])=>
                <div key={k} className="acc">
                  <button className="acc-head" onClick={()=>setAcc(acc===k?"":k)}>
                    {t}<Icon name={acc===k?"minus":"plus"} size={16}/>
                  </button>
                  {acc===k && <div className="acc-body">
                    {k==="desc" && (p.description || `${p.name} da linha ${p.brandline}. Peça streetwear de luxo com modelagem autoral LF, costura reforçada e etiqueta numerada.`)}
                    {k==="medidas" && (p.composition || cfg.default_composition || "Algodão premium 220g/m² · acabamento ribana · lavar à mão ou ciclo delicado.")}
                    {k==="entrega" && (cfg.shipping_text || "Frete grátis para toda a região. 3 dias para troca ou devolução.")}
                  </div>}
                </div>)}
            </div>
          </div>
        </div>

        {related.length>0 && (
          <section className="sec">
            <div className="sec-head"><h2 className="serif sec-title">Combina com</h2></div>
            <div className="pgrid pgrid-cat">
              {related.map(r=><ProductCard key={r.id} p={r}/>)}
            </div>
          </section>
        )}
      </div>
    </div>
  );
}

function CartDrawer(){
  const { cart, drawerOpen, closeCart, setQty, removeFromCart, cartTotal, nav, products } = window.useStore();
  const P = products || PRODUCTS;
  const freight = 0;
  const [variantStocks, setVariantStocks] = useState({});
  const cartRef = useRef(cart);
  useEffect(()=>{ cartRef.current = cart; }, [cart]);

  // Buscar estoque ao abrir E sempre que o carrinho mudar enquanto drawer está aberto
  useEffect(()=>{
    if(!drawerOpen || !window.DB) return;
    const currentCart = cartRef.current;
    if(currentCart.length===0) return;

    const ids = [...new Set(currentCart.map(i=>i.id))];
    Promise.all(ids.map(id=>window.DB.fetchVariants(id).then(vs=>({id,vs})))).then(results=>{
      const map = {};
      for(const {id,vs} of results){
        for(const v of (vs||[])){
          // normaliza cor para lowercase na chave
          map[`${id}|${v.color.toLowerCase()}|${v.size}`] = v.stock;
        }
      }
      setVariantStocks(map);
      // Corrigir itens que excedem o estoque real — de trás para frente para índices corretos
      const currentItems = [...cartRef.current];
      for(let idx = currentItems.length - 1; idx >= 0; idx--){
        const item = currentItems[idx];
        const sizeKey = (!item.size || item.size==="Único") ? "_" : item.size;
        const key = `${item.id}|${(item.color||"").toLowerCase()}|${sizeKey}`;
        const stock = map[key];
        if(stock !== undefined && item.qty > stock){
          if(stock <= 0) removeFromCart(idx);
          else setQty(idx, stock);
        }
      }
    }).catch(()=>{});
  },[drawerOpen, cart.length]); // re-executa quando drawer abre OU quando item é adicionado
  return (
    <div className={"drawer "+(drawerOpen?"open":"")}>
      <div className="drawer-ov" onClick={closeCart}></div>
      <div className="drawer-panel">
        <div className="drawer-head">
          <h3 className="serif">Sua sacola <span className="mono drawer-n">({cart.length})</span></h3>
          <button className="sh-ic" onClick={closeCart}><Icon name="x" size={20}/></button>
        </div>

        {cart.length===0
          ? <div className="drawer-empty">
              <Icon name="bag" size={40}/>
              <p>Sua sacola está vazia</p>
              <Btn variant="gold" onClick={()=>{closeCart();nav("#/c/tenis");}}>Começar a comprar</Btn>
            </div>
          : <>
              <div className="drawer-items">
                {cart.map((it,idx)=>{
                  const p = P.find(x=>x.id===it.id);
                  if(!p) return null;
                  return (
                    <div key={idx} className="drawer-item">
                      <div className="drawer-item-img">
                        {p.image_url
                          ? <img src={p.image_url} alt={p.name} style={{width:"100%",height:"100%",objectFit:"contain",borderRadius:4}}/>
                          : <ProductImage p={p} ratio="100%" showMeta={false}/>}
                      </div>
                      <div className="drawer-item-info">
                        <h4>{p.name}</h4>
                        <span className="drawer-item-meta">{it.color} · Tam {it.size}</span>
                        <div className="drawer-item-foot">
                          <div className="qty qty-sm">
                            {(()=>{
                              const sizeKey = (!it.size || it.size==="Único") ? "_" : it.size;
                              const key = `${it.id}|${(it.color||"").toLowerCase()}|${sizeKey}`;
                              const maxQty = variantStocks[key] !== undefined ? variantStocks[key] : 99;
                              const atMax = maxQty <= 0 || it.qty >= maxQty;
                              return (<>
                                <button onClick={()=>setQty(idx,Math.max(1,it.qty-1))}><Icon name="minus" size={13}/></button>
                                <span className="mono">{it.qty}</span>
                                <button onClick={()=>!atMax && setQty(idx,it.qty+1)} disabled={atMax} title={atMax?`Máximo: ${maxQty} em estoque`:""}><Icon name="plus" size={13}/></button>
                              </>);
                            })()}
                          </div>
                          <span className="mono drawer-item-price">{fmt(p.price*it.qty)}</span>
                        </div>
                      </div>
                      <button className="drawer-item-del" onClick={()=>removeFromCart(idx)}>
                        <Icon name="trash" size={15}/>
                      </button>
                    </div>
                  );
                })}
              </div>
              <div className="drawer-foot">
                <div className="drawer-row"><span>Subtotal</span><span className="mono">{fmt(cartTotal)}</span></div>
                <div className="drawer-row"><span>Frete</span><span className="mono" style={{color:"var(--green)",fontWeight:600}}>Grátis</span></div>
                <div className="drawer-row drawer-total"><span>Total</span><span className="mono gold-text">{fmt(cartTotal)}</span></div>
                <Btn variant="gold" size="lg" full iconR="arrowR"
                  onClick={()=>{closeCart();nav("#/checkout");}}>Finalizar compra</Btn>
                <button className="drawer-cont" onClick={closeCart}>Continuar comprando</button>
              </div>
            </>}
      </div>
    </div>
  );
}

Object.assign(window, { CategoryPage, ProductPage, CartDrawer });