/* ============================================================
   LF CONCEITO — VITRINE parte 1
   ============================================================ */

function ProductCard({ p }){
  const { nav, addToCart, openCart, products, storeConfig, isFavorite, toggleFavorite } = window.useStore();
  const cfg = storeConfig || {};
  const installments = cfg.installments_max!=null ? parseInt(cfg.installments_max) : 12;
  const prod = p || {};
  const [hover,setHover] = useState(false);
  const discount = prod.compareAt>0 ? Math.round((1-prod.price/prod.compareAt)*100) : 0;
  const fav = isFavorite(prod.id);
  if(!prod.id) return null;
  return (
    <article className="pcard"
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      onClick={()=>nav("#/p/"+prod.id)}>
      <div className="pcard-media">
        <ProductImage p={prod} ratio="120%" showMeta={false} />
        <button className={"pcard-fav "+(fav?"on":"")} title={fav?"Remover dos favoritos":"Adicionar aos favoritos"}
          onClick={e=>{ e.stopPropagation(); toggleFavorite(prod.id); }}>
          <Icon name="heart" size={16} fill={fav?"currentColor":"none"}/>
        </button>
        <div className="pcard-tags">
          {prod.tag && <Tag kind={prod.tag==="NOVO"?"new":"gold"}>{prod.tag}</Tag>}
          {discount>0 && !prod.tag && <Tag kind="gold">-{discount}%</Tag>}
          {cfgBool(cfg.show_low_stock_badge) && prod.stock>0 && prod.stock<=5 && <Tag kind="dark">Últimas {prod.stock}</Tag>}
          {prod.stock===0 && <Tag kind="dark">Esgotado</Tag>}
        </div>
        {prod.stock>0 && (
          <button
            className={"pcard-quick "+(hover?"show":"")}
            onClick={e=>{
              e.stopPropagation();
              addToCart(prod, prod.sizes[0]||"Único", prod.colors[0]||"Padrão", 1);
              openCart();
            }}>
            <Icon name="cart" size={15}/> Compra rápida
          </button>
        )}
      </div>
      <div className="pcard-body">
        <div className="pcard-brand mono">{prod.brandline}</div>
        <h3 className="pcard-name">{prod.name}</h3>
        <div className="pcard-foot">
          <Money v={prod.price} old={prod.compareAt}/>
        </div>
      </div>
    </article>
  );
}

function StoreHeader(){
  const { nav, cartCount, openCart, user, route, categories, storeConfig, products, mob, setMob } = window.useStore();
  const cfg = storeConfig || {};
  const cats = categories || CATEGORIES;
  const installments = cfg.installments_max!=null ? parseInt(cfg.installments_max) : 12;
  const pixDiscount  = cfg.pix_discount_pct!=null ? parseFloat(cfg.pix_discount_pct) : 5;
  const [showSearch, setShowSearch] = useState(false);
  const [query, setQuery] = useState("");
  const inputRef = useRef(null);

  useEffect(()=>{ setShowSearch(false); setQuery(""); setMob(false); },[route]);
  useEffect(()=>{ if(showSearch && inputRef.current) inputRef.current.focus(); },[showSearch]);

  const P = (products||[]).filter(p=>p.active);
  const results = query.trim().length>1
    ? P.filter(p=>(p.name||"").toLowerCase().includes(query.toLowerCase()) ||
                  (p.cat||"").toLowerCase().includes(query.toLowerCase()) ||
                  (p.brandline||"").toLowerCase().includes(query.toLowerCase())).slice(0,8)
    : [];
  const [scrolled,setScrolled] = useState(false);
  useEffect(()=>{
    const fn=()=>setScrolled(window.scrollY>20);
    window.addEventListener("scroll",fn);
    return ()=>window.removeEventListener("scroll",fn);
  },[]);
  return (
    <>
    <header className={"sh "+(scrolled?"sh-sm":"")}>
      {cfgBool(cfg.show_freight_banner) && (
        <div className="sh-bar">
          <div className="sh-bar-in">
            <span><Icon name="truck" size={13}/> Frete grátis</span>
            {(installments>1 || pixDiscount>0) && (
              <span className="sh-bar-mid">
                {installments>1 && `PARCELE EM ATÉ ${installments}×`}
                {installments>1 && pixDiscount>0 && " • "}
                {pixDiscount>0 && `${pixDiscount}% OFF NO PIX`}
              </span>
            )}
            <span><Icon name="shield" size={13}/> Compra 100% segura</span>
          </div>
        </div>
      )}
      <div className="sh-main">
        <button className="sh-burger" onClick={()=>setMob(true)}><Icon name="menu" size={22}/></button>
        <a className="sh-logo" onClick={()=>nav("#/")}>
          <span className="serif gold-text">LF</span>
          <span className="sh-logo-sub">CONCEITO</span>
        </a>
        <nav className="sh-nav">
          {cats.map(c=>
            <a key={c.slug}
              className={"sh-nav-i "+(route==="#/c/"+c.slug?"on":"")}
              onClick={()=>nav("#/c/"+c.slug)}>{c.name}</a>)}
        </nav>
        <div className="sh-actions">
          <button className="sh-ic" title="Buscar" onClick={()=>setShowSearch(s=>!s)}>
            <Icon name={showSearch?"x":"search"} size={19}/>
          </button>
          <button className="sh-ic" title="Minha conta"
            onClick={()=>nav(user?"#/conta":"#/login")}>
            <Icon name="user" size={19}/>
          </button>
          <button className="sh-ic sh-cart" onClick={openCart} title="Sacola">
            <Icon name="cart" size={19}/>
            {cartCount>0 && <span className="sh-cartn">{cartCount}</span>}
          </button>
        </div>
      </div>
    </header>
    {showSearch && (
      <div className="sh-search-overlay" onClick={e=>{ if(e.target===e.currentTarget) setShowSearch(false); }}>
        <div className="sh-search-box">
          <div className="sh-search-input-row">
            <Icon name="search" size={18}/>
            <input ref={inputRef} className="sh-search-input" value={query}
              onChange={e=>setQuery(e.target.value)}
              placeholder="Buscar produtos..."
              onKeyDown={e=>{ if(e.key==="Escape") setShowSearch(false); }}/>
            {query && <button className="sh-search-clear" onClick={()=>setQuery("")}>
              <Icon name="x" size={15}/>
            </button>}
          </div>
          {query.trim().length>1 && (
            <div className="sh-search-results">
              {results.length===0
                ? <div className="sh-search-empty">
                    <Icon name="search" size={32}/>
                    <p>Nenhum produto encontrado para <b>"{query}"</b></p>
                    <span>Tente buscar por categoria, nome ou linha</span>
                  </div>
                : <>
                    <div className="sh-search-label">
                      {results.length} resultado{results.length!==1?"s":""} para "{query}"
                    </div>
                    {results.map(p=>{
                      const disc = p.compareAt>0 ? Math.round((1-p.price/p.compareAt)*100) : 0;
                      return (
                        <div key={p.id} className="sh-search-item" onClick={()=>{ nav("#/p/"+p.id); setShowSearch(false); }}>
                          <div className="sh-search-thumb">
                            {p.image_url
                              ? <img src={p.image_url} alt={p.name} style={{width:"100%",height:"100%",objectFit:"cover"}}/>
                              : <div className="sh-search-thumb-icon"><Icon name="tag" size={20}/></div>}
                          </div>
                          <div className="sh-search-info">
                            <b>{p.name}</b>
                            <span className="sh-search-cat">{(p.brandline||"") + (p.brandline&&p.cat?" · ":"") + (p.cat||"")}</span>
                            <div className="sh-search-price-row">
                              <span className="sh-search-price mono">{fmt(p.price)}</span>
                              {disc>0 && <span className="sh-search-disc">-{disc}%</span>}
                              {p.compareAt>0 && <span className="sh-search-old mono">{fmt(p.compareAt)}</span>}
                            </div>
                          </div>
                          <Icon name="chevR" size={16} style={{color:"var(--muted)",flexShrink:0}}/>
                        </div>);
                    })}
                    <div className="sh-search-footer" onClick={()=>{ nav("#/c/"+results[0]?.cat); setShowSearch(false); }}>
                      Ver todos os resultados <Icon name="arrowR" size={14}/>
                    </div>
                  </>}
            </div>)}
        </div>
      </div>
    )}
    </>
  );
}

function MobileMenu({ cats, close, nav }){
  const { isAdmin } = window.useStore();
  return (
    <div className="mm" onClick={close}>
      <div className="mm-panel" onClick={e=>e.stopPropagation()}>
        <div className="mm-top">
          <span className="serif gold-text" style={{fontSize:28}}>LF</span>
          <button className="sh-ic" onClick={close}><Icon name="x" size={22}/></button>
        </div>
        {cats.map(c=>
          <a key={c.slug} className="mm-i" onClick={()=>{nav("#/c/"+c.slug);close();}}>
            {c.name}<Icon name="chevR" size={16}/>
          </a>)}
        <button className="mm-login" onClick={()=>{nav("#/login");close();}}>
          <Icon name="user" size={17}/> Entrar / Cadastrar
        </button>
        {isAdmin &&
          <button className="mm-login" style={{marginTop:8,background:"var(--gold-soft)",color:"var(--gold-2)"}}
            onClick={()=>{nav("#/admin");close();}}>
            <Icon name="shield" size={17}/> Painel do lojista
          </button>}
      </div>
    </div>
  );
}

function StoreFooter(){
  const { nav, categories, isAdmin } = window.useStore();
  const cats = categories || CATEGORIES;
  return (
    <footer className="sf">
      <div className="sf-grid">
        <div className="sf-col sf-brand">
          <div className="sf-logo">
            <span className="serif gold-text">LF</span>
            <span>CONCEITO</span>
          </div>
          <a className="sf-whats" href={"https://wa.me/5585921495164?text="+encodeURIComponent("Olá, vim pelo site, pode tirar algumas dúvidas?")} target="_blank" rel="noopener noreferrer">
            <Icon name="whats" size={16}/> (85) 92149-5164
          </a>
          <a href="https://instagram.com/lf_conceito9" target="_blank" rel="noopener noreferrer"
            style={{display:"flex",alignItems:"center",gap:8,marginTop:8,color:"var(--muted)",fontSize:13}}>
            📸 @lf_conceito9
          </a>
          <div style={{display:"flex",alignItems:"center",gap:8,marginTop:8,color:"var(--muted)",fontSize:13}}>
            📍 Rua Euclides Barroso, 1171 — Canindé, CE
          </div>
        </div>
        <div className="sf-col">
          <h4>Categorias</h4>
          {cats.map(c=>
            <a key={c.slug} onClick={()=>nav("#/c/"+c.slug)}>{c.name}</a>)}
        </div>
        <div className="sf-col">
          <h4>Ajuda</h4>
          <a onClick={()=>nav("#/info/trocas")}>Trocas e devoluções</a>
          <a onClick={()=>nav("#/info/pagamento")}>Formas de pagamento</a>
          <a href={"https://wa.me/5585921495164?text="+encodeURIComponent("Olá, vim pelo site, pode tirar algumas dúvidas?")} target="_blank" rel="noopener noreferrer">
            Falar com atendimento
          </a>
        </div>
        <div className="sf-col">
          <h4>Institucional</h4>
          <a onClick={()=>nav("#/info/privacidade")}>Política de privacidade</a>
          <a onClick={()=>nav("#/info/termos")}>Termos de uso</a>
          <a href="mailto:lfconceito2030@gmail.com">lfconceito2030@gmail.com</a>
          {isAdmin &&
            <a onClick={()=>nav("#/admin")} style={{color:"var(--gold-2)",marginTop:8}}>
              Painel do lojista →
            </a>}
        </div>
      </div>
      <div className="sf-bottom">
        <span>© 2026 LF Conceito · Canindé, CE</span>
        <div className="sf-pay">
          {["Pix","Visa","Master","Elo"].map(x=>
            <span key={x} className="sf-paychip">{x}</span>)}
        </div>
      </div>
    </footer>
  );
}

function HomePage(){
  const { nav, products, categories, storeReady } = window.useStore();
  // Nunca usa fallback hardcoded — só mostra o que veio do Supabase
  const P = storeReady ? (products || []) : [];
  const cats = categories || CATEGORIES;
  const featured = P.filter(p=>p.featured && p.active);
  const allActive = P.filter(p=>p.active);
  const hero = featured[0] || allActive[0] || null;
  if(!storeReady) return <div style={{padding:80,textAlign:"center",color:"var(--muted)"}}>Carregando...</div>;
  return (
    <div className="fade-in">
      <section className="hero">
        <div className="hero-bg"></div>
        <div className="hero-in">
          <div className="eyebrow">Coleção 2026 · Drop 01</div>
          <h1 className="serif hero-title">Vista o<br/><span className="gold-text">conceito</span></h1>
          <p className="hero-sub">Streetwear de luxo em Canindé. Peças limitadas, acabamento premium, atitude sem pedir licença.</p>
          <div className="hero-btns">
            <Btn variant="gold" size="lg" iconR="arrowR" onClick={()=>nav("#/c/lancamentos")}>Ver lançamentos</Btn>
            <Btn variant="ghost" size="lg" onClick={()=>nav("#/c/todos")}>Explorar coleção</Btn>
          </div>
        </div>
        {hero && (
          <div className="hero-card" onClick={()=>nav("#/p/"+hero.id)} style={{cursor:"pointer"}}>
            <ProductImage p={hero} ratio="132%"/>
            <div className="hero-card-tag"><Tag kind="dark">Destaque do drop</Tag></div>
            <div className="hero-card-info">
              <span className="mono">{hero.brandline}</span>
              <h3>{hero.name}</h3>
              <Money v={hero.price} old={hero.compareAt}/>
            </div>
          </div>
        )}
      </section>

      <section className="catstrip">
        {cats.map(c=>
          <button key={c.slug} className="catchip" onClick={()=>nav("#/c/"+c.slug)}>
            <span>{c.name}</span><Icon name="arrowR" size={14}/>
          </button>)}
      </section>

      <section className="sec">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Acabou de chegar</div>
            <h2 className="serif sec-title">Lançamentos</h2>
          </div>
          <button className="sec-link" onClick={()=>nav("#/c/tenis")}>
            Ver tudo <Icon name="arrowR" size={15}/>
          </button>
        </div>
        <div className="pgrid">
          {(featured.length>0
            ? [...featured, ...allActive.filter(p=>!p.featured)]
            : allActive
          ).slice(0,8).map(p=><ProductCard key={p.id} p={p}/>)}
        </div>
      </section>

      <section className="sec">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Queridinhos</div>
            <h2 className="serif sec-title">Mais vendidos</h2>
          </div>
          <button className="sec-link" onClick={()=>nav("#/c/camisetas")}>
            Ver tudo <Icon name="arrowR" size={15}/>
          </button>
        </div>
        <div className="pgrid">
          {P.filter(p=>p.active).slice(5,13).map(p=><ProductCard key={p.id} p={p}/>)}
        </div>
      </section>

      <section className="trust">
        {[["shield","Pagamento seguro","Pix e cartão"],
          ["heart","Troca facilitada","3 dias para trocar"]].map(([ic,t,s])=>
          <div key={t} className="trust-i">
            <Icon name={ic} size={22}/>
            <div><b>{t}</b><span>{s}</span></div>
          </div>)}
      </section>
    </div>
  );
}

function WhatsAppFloat(){
  const { storeConfig } = window.useStore();
  const cfg = storeConfig || {};
  if(!cfgBool(cfg.show_whatsapp_float)) return null;
  let phone = (cfg.store_whatsapp||"5585921495164").replace(/\D/g,"");
  if(phone.length<=11) phone = "55"+phone; // garante o codigo do Brasil mesmo se o numero salvo nao tiver
  return (
    <a className="wa-float" href={"https://wa.me/"+phone+"?text="+encodeURIComponent("Olá! Vim pelo site da LF Conceito.")}
      target="_blank" rel="noopener noreferrer" title="Fale com a gente no WhatsApp">
      <Icon name="whats" size={26}/>
    </a>
  );
}

Object.assign(window, { ProductCard, StoreHeader, StoreFooter, HomePage, MobileMenu, WhatsAppFloat });