// ========= ModoLar — Views: Category, Product, Cart =========
/* global React, MODOLAR_DATA, Icon, Stars, fmtBRL, ProductCard */
const { useState: useSt, useEffect: useEf, useMemo: useMe } = React;

// ========== CATEGORY ==========
function CategoryView({ catId, navigate, onAdd, cardStyle }) {
  const cat = MODOLAR_DATA.getCategory(catId);
  const products = MODOLAR_DATA.getByCategory(catId);
  const [sort, setSort] = useSt('relevance');
  const [filter, setFilter] = useSt('all');

  const sorted = useMe(() => {
    let list = [...products];
    if (filter === 'promo') list = list.filter(p => p.discount > 0);
    if (filter === 'new') list = list.filter(p => p.badges.some(b => /novidade|lançamento/i.test(b.label)));
    if (sort === 'price-asc') list.sort((a, b) => a.price - b.price);
    if (sort === 'price-desc') list.sort((a, b) => b.price - a.price);
    if (sort === 'rating') list.sort((a, b) => b.rating - a.rating);
    return list;
  }, [sort, filter, catId]);

  if (!cat) return null;

  return (
    <div className="shell" style={{paddingTop: 32, paddingBottom: 60}}>
      <div style={{fontSize: 13, color:'var(--ink-500)', marginBottom: 16}}>
        <a onClick={() => navigate({view:'home'})} style={{cursor:'pointer'}}>Início</a>
        <span style={{margin:'0 8px'}}>/</span>
        <span style={{color:'var(--ink)'}}>{cat.name}</span>
      </div>

      <div className="cat-hero fade-up">
        <div>
          <span className="section-eyebrow"><span className="capsule"/> {cat.tag}</span>
          <h1 style={{marginTop: 10}}>{cat.name}</h1>
          <p style={{fontSize: 18, color:'var(--ink-500)', maxWidth: 440, lineHeight: 1.5, marginTop: 12}}>{cat.tagline}</p>
          <div className="meta">
            <span><strong>{products.length}</strong> modelos</span>
            <span><strong>Frete grátis</strong> Campinas</span>
            <span><strong>1 ano</strong> de garantia</span>
          </div>
        </div>
        <div style={{position:'relative', aspectRatio:'4/3', borderRadius: 'var(--radius)', overflow:'hidden'}}>
          <img src={cat.cover} style={{width:'100%', height:'100%', objectFit:'cover'}} alt=""/>
        </div>
      </div>

      <div className="filter-bar">
        <div className="filter-chips">
          <button className={`chip ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>Todos</button>
          <button className={`chip ${filter === 'promo' ? 'active' : ''}`} onClick={() => setFilter('promo')}>
            <span className="capsule" style={{background:'var(--wa)'}}/> Em promoção
          </button>
          <button className={`chip ${filter === 'new' ? 'active' : ''}`} onClick={() => setFilter('new')}>
            <span className="capsule"/> Novidades
          </button>
        </div>
        <select className="sort-select" value={sort} onChange={e => setSort(e.target.value)}>
          <option value="relevance">Mais relevantes</option>
          <option value="price-asc">Menor preço</option>
          <option value="price-desc">Maior preço</option>
          <option value="rating">Melhor avaliados</option>
        </select>
      </div>

      <div className="products-grid">
        {sorted.map(p => (
          <ProductCard key={p.id} product={p} cardStyle={cardStyle}
            onClick={() => navigate({view:'product', productId: p.id})} onAdd={onAdd}/>
        ))}
      </div>
    </div>
  );
}

// ========== PRODUCT (PDP) ==========
function ProductView({ productId, navigate, onAdd }) {
  const p = MODOLAR_DATA.getById(productId);
  const [imgIdx, setImgIdx] = useSt(0);
  const [color, setColor] = useSt(p?.colors[0]);
  const [size, setSize] = useSt(p?.defaultSize);
  const [qty, setQty] = useSt(1);

  useEf(() => { window.scrollTo(0, 0); setImgIdx(0); setColor(p?.colors[0]); setSize(p?.defaultSize); setQty(1); }, [productId]);

  if (!p) return null;

  const add = () => onAdd({...p, _color: color?.name, _size: size, _qty: qty});

  return (
    <div className="shell" style={{paddingTop: 24, paddingBottom: 60}}>
      <div style={{fontSize: 13, color:'var(--ink-500)', marginBottom: 20}}>
        <a onClick={() => navigate({view:'home'})} style={{cursor:'pointer'}}>Início</a>
        <span style={{margin:'0 8px'}}>/</span>
        <a onClick={() => navigate({view:'category', catId: p.cat})} style={{cursor:'pointer'}}>{MODOLAR_DATA.getCategory(p.cat).name}</a>
        <span style={{margin:'0 8px'}}>/</span>
        <span style={{color:'var(--ink)'}}>{p.shortName}</span>
      </div>

      <div className="pdp">
        <div className="pdp-gallery">
          <div className="pdp-thumbs">
            {p.images.map((img, i) => (
              <div key={i} className={`pdp-thumb ${i === imgIdx ? 'active' : ''}`} onClick={() => setImgIdx(i)}>
                <img src={img} alt=""/>
              </div>
            ))}
          </div>
          <div className="pdp-main-img fade-up" key={imgIdx}>
            {p.discount > 0 && <span className="tag tag-green">{p.discount}% OFF</span>}
            <img src={p.images[imgIdx]} alt={p.name}/>
          </div>
        </div>

        <div className="pdp-info fade-up d1">
          <div style={{display:'flex', gap: 6, marginBottom: 10}}>
            {p.badges.map((b, i) => <span key={i} className={`tag tag-${b.type}`}>{b.label}</span>)}
          </div>
          <h1>{p.name}</h1>
          <div className="pdp-rating">
            <Stars value={p.rating} size={14}/>
            <span>{p.rating} • {p.reviews} avaliações</span>
          </div>
          <p style={{fontSize: 16, color:'var(--ink-500)', marginTop: 16, lineHeight: 1.5}}>{p.tagline}</p>

          <div className="pdp-price-block">
            {p.priceOld && <div className="pdp-strike">De R$ {fmtBRL(p.priceOld)}</div>}
            <div className="pdp-price">R$ {fmtBRL(p.price)}</div>
            <div className="pdp-install">
              ou <strong>{p.installments}x de R$ {fmtBRL(p.installmentValue)}</strong> sem juros
            </div>
          </div>

          <div className="pdp-selector-group">
            <div className="label"><span>Cor</span><strong>{color?.name}</strong></div>
            <div className="color-swatches">
              {p.colors.map((c, i) => (
                <div key={i} className={`color-swatch ${color?.name === c.name ? 'active' : ''}`}
                     style={{background: c.hex}} onClick={() => setColor(c)} title={c.name}/>
              ))}
            </div>
          </div>

          {p.sizes.length > 1 && (
            <div className="pdp-selector-group">
              <div className="label"><span>Tamanho</span><strong>{size}</strong></div>
              <div className="size-options">
                {p.sizes.map((s, i) => (
                  <button key={i} className={`size-chip ${size === s ? 'active' : ''}`} onClick={() => setSize(s)}>{s}</button>
                ))}
              </div>
            </div>
          )}

          <div className="pdp-cta-row">
            <div className="qty-picker">
              <button onClick={() => setQty(q => Math.max(1, q - 1))}><Icon.Minus size={14}/></button>
              <span className="qty">{qty}</span>
              <button onClick={() => setQty(q => q + 1)}><Icon.Plus size={14}/></button>
            </div>
            <button className="btn btn-wa btn-lg" onClick={add}>
              <Icon.Cart size={18}/> Adicionar ao carrinho
            </button>
          </div>

          <div className="pdp-features">
            {p.features.map((f, i) => (
              <div key={i} className="pdp-feature">
                <div className="ico"><Icon.Check size={16}/></div>
                <div><strong>{f}</strong><span>Incluso no produto</span></div>
              </div>
            ))}
            <div className="pdp-feature">
              <div className="ico"><Icon.Truck size={16}/></div>
              <div><strong>Frete grátis Campinas</strong><span>Até 3 dias úteis</span></div>
            </div>
            <div className="pdp-feature">
              <div className="ico"><Icon.Wallet size={16}/></div>
              <div><strong>Pague na entrega</strong><span>Pix, cartão ou dinheiro</span></div>
            </div>
          </div>
        </div>
      </div>

      {/* Relacionados */}
      <section style={{marginTop: 80}}>
        <div className="section-head">
          <div>
            <span className="section-eyebrow"><span className="capsule"/> Você também vai amar</span>
            <h2 className="section-title">Combinações <em>perfeitas</em></h2>
          </div>
        </div>
        <div className="products-grid">
          {MODOLAR_DATA.products.filter(x => x.id !== p.id).slice(0, 4).map(rp => (
            <ProductCard key={rp.id} product={rp} cardStyle="complete"
              onClick={() => navigate({view:'product', productId: rp.id})} onAdd={onAdd}/>
          ))}
        </div>
      </section>
    </div>
  );
}

// ========== CART DRAWER ==========
function CartDrawer({ open, onClose, cart, updateQty, removeItem, phone, goCheckout }) {
  const total = cart.reduce((s, it) => s + it.price * it._qty, 0);

  const sendWhatsApp = () => {
    if (!cart.length) return;
    let msg = `*Olá, ModoLar!* 🧡\n\nGostaria de finalizar meu pedido:\n\n`;
    cart.forEach((it, i) => {
      msg += `${i+1}. *${it.shortName}*\n`;
      msg += `   • Cor: ${it._color}\n`;
      if (it._size) msg += `   • Tamanho: ${it._size}\n`;
      msg += `   • Qtd: ${it._qty}\n`;
      msg += `   • Subtotal: R$ ${fmtBRL(it.price * it._qty)}\n\n`;
    });
    msg += `*Total: R$ ${fmtBRL(total)}*\n\n`;
    msg += `Pagamento na entrega — aguardo confirmação de disponibilidade e data. Obrigado!`;
    const url = `https://wa.me/55${phone.replace(/\D/g,'')}?text=${encodeURIComponent(msg)}`;
    window.open(url, '_blank');
  };

  return (
    <>
      <div className={`cart-overlay ${open ? 'open' : ''}`} onClick={onClose}/>
      <aside className={`cart-drawer ${open ? 'open' : ''}`}>
        <div className="cart-head">
          <h3>Seu carrinho <span style={{color:'var(--ink-400)', fontWeight: 500, fontSize: 15}}>({cart.length})</span></h3>
          <button className="icon-btn" onClick={onClose}><Icon.Close/></button>
        </div>

        {cart.length === 0 ? (
          <div className="cart-empty">
            <div className="emo"><Icon.Cart size={32}/></div>
            <h4 style={{fontSize: 18, marginBottom: 6}}>Seu carrinho está vazio</h4>
            <p style={{fontSize: 14, marginTop: 4}}>Que tal começar pelos nossos best sellers?</p>
            <button className="btn btn-orange" style={{marginTop: 20}} onClick={onClose}>Ver catálogo</button>
          </div>
        ) : (
          <>
            <div className="cart-items">
              {cart.map((it, i) => (
                <div key={i} className="cart-item">
                  <img src={it.images[0]} alt=""/>
                  <div>
                    <div className="cart-item-title">{it.shortName}</div>
                    <div className="cart-item-meta">
                      {it._color}{it._size ? ` • ${it._size}` : ''}
                    </div>
                    <div className="cart-item-price">R$ {fmtBRL(it.price * it._qty)}</div>
                    <div className="cart-qty">
                      <button onClick={() => updateQty(i, -1)}><Icon.Minus size={12}/></button>
                      <span>{it._qty}</span>
                      <button onClick={() => updateQty(i, 1)}><Icon.Plus size={12}/></button>
                    </div>
                  </div>
                  <button className="cart-remove" onClick={() => removeItem(i)}>Remover</button>
                </div>
              ))}
            </div>
            <div className="cart-foot">
              <div style={{display:'flex', alignItems:'center', gap: 8, padding: 12, background:'var(--orange-50)', borderRadius: 10, fontSize: 13, color:'var(--orange-600)'}}>
                <Icon.Truck size={16}/>
                <span>Frete grátis para Campinas em até 3 dias úteis</span>
              </div>
              <div className="cart-total">
                <div>
                  <div className="lbl">Total</div>
                  <div className="val">R$ {fmtBRL(total)}</div>
                </div>
                <div style={{textAlign:'right', fontSize: 12, color:'var(--ink-500)'}}>
                  12x de R$ {fmtBRL(total/12)}<br/>sem juros
                </div>
              </div>
              <button className="btn btn-orange btn-lg" onClick={goCheckout}>
                Finalizar pedido <Icon.ArrowRight size={16}/>
              </button>
              <button className="btn btn-ghost" onClick={sendWhatsApp} style={{fontSize: 13}}>
                <Icon.WhatsApp size={16}/> Enviar direto no WhatsApp
              </button>
              <p style={{fontSize: 12, color:'var(--ink-500)', textAlign:'center', margin: 0, lineHeight: 1.4}}>
                No checkout você confere CEP, cupom e forma de pagamento antes de enviar.
              </p>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { CategoryView, ProductView, CartDrawer });