// Módulo PRODUTOS — Catálogo + Cadastro

const ProdutosPage = () => {
  const [view, setView] = React.useState("grid"); // grid | list
  const [selected, setSelected] = React.useState(null);

  if (selected) return <ProdutoDetail produto={selected} onClose={() => setSelected(null)}/>;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>Catálogo · {PRODUTOS.length}+ produtos</span>
          <h1 style={{marginTop:10}}>Produtos</h1>
          <p className="lead">Cadastro, estoque por tamanho, preços, fotos, etiquetas.</p>
        </div>
        <div className="actions">
          <button className="btn ghost"><Ic name="download" size={13}/> Importar/Exportar</button>
          <button className="btn ghost"><Ic name="print" size={13}/> Etiquetas</button>
          <button className="btn primary"><Ic name="plus" size={13}/> Novo produto</button>
        </div>
      </div>

      <div className="stat-grid cols-4 mb-24">
        <Stat label="Produtos ativos" value="284" hint="12 arquivados"/>
        <Stat label="Estoque total · custo" value={brlNoCents(38940)}/>
        <Stat label="Estoque · valor venda" value={brlNoCents(94280)}/>
        <Stat glow="cyan" label="Estoque crítico" value="14" hint="3 zerados · 11 baixos"/>
      </div>

      <Tabs active="catalogo" onChange={()=>{}} tabs={[
        { id: "catalogo", label: "Catálogo", count: 284 },
        { id: "categorias", label: "Categorias & marcas" },
        { id: "estoque", label: "Estoque" },
        { id: "ordens", label: "Ordens de compra", count: 6 },
        { id: "import", label: "Importar/Exportar" },
      ]}/>

      <div className="filter-row">
        <div className="input search">
          <Ic name="search" size={13} className="t-3"/>
          <input placeholder="Nome, SKU, código…"/>
        </div>
        <select className="input"><option>Todas categorias</option><option>Vestidos</option><option>Blusas</option><option>Calças</option></select>
        <select className="input"><option>Todas marcas</option><option>Aurora Studio</option><option>Mia&Co</option></select>
        <select className="input"><option>Todos estoques</option><option>Normal</option><option>Baixo</option><option>Zerado</option></select>
        <select className="input"><option>Verão 26</option><option>Inverno 25</option></select>
        <div style={{marginLeft:'auto'}} className="row gap-6">
          <span className="t-3" style={{fontSize:11.5, marginRight:6}}>{PRODUTOS.length} produtos</span>
          <div className="mode-switch">
            <button className={view === 'grid' ? "active" : ""} onClick={() => setView('grid')}><Ic name="grid" size={12}/></button>
            <button className={view === 'list' ? "active" : ""} onClick={() => setView('list')}><Ic name="list" size={12}/></button>
          </div>
        </div>
      </div>

      {view === "grid" && (
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(220px, 1fr))', gap:12}}>
          {PRODUTOS.map(p => (
            <div key={p.id} className="card tight" style={{cursor:'pointer'}} onClick={() => setSelected(p)}>
              <div style={{height:140, background:'var(--bg-3)', borderRadius:8, display:'flex', alignItems:'center', justifyContent:'center', fontSize:48, marginBottom:10, position:'relative'}}>
                {p.foto}
                {p.estoqueTotal < 10 && <Badge kind={p.estoqueTotal === 0 ? "red" : "amber"} style={{position:'absolute', top:8, left:8}}>{p.estoqueTotal === 0 ? "sem estoque" : "estoque baixo"}</Badge>}
              </div>
              <div className="t-mono-label" style={{fontSize:9, letterSpacing:'0.14em', marginBottom:2}}>{p.id} · {p.marca}</div>
              <div style={{fontSize:13, fontWeight:500, marginBottom:6, lineHeight:1.3, minHeight:34}}>{p.nome}</div>
              <div className="row" style={{justifyContent:'space-between'}}>
                <div className="t-green mono" style={{fontSize:14, fontWeight:600}}>{brl(p.preco)}</div>
                <div className="t-3" style={{fontSize:11}}>{p.estoqueTotal} un</div>
              </div>
            </div>
          ))}
        </div>
      )}

      {view === "list" && (
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{width:30}}></th>
                <th>Produto</th><th>Marca</th><th>Categoria</th><th>Coleção</th><th>Estoque</th><th style={{textAlign:'right'}}>Custo</th><th style={{textAlign:'right'}}>Preço</th><th>Vendas 30d</th><th></th>
              </tr>
            </thead>
            <tbody>
              {PRODUTOS.map(p => (
                <tr key={p.id} onClick={() => setSelected(p)} style={{cursor:'pointer'}}>
                  <td className="row gap-8" style={{padding:'4px 12px'}}><div className="product-thumb">{p.foto}</div></td>
                  <td>
                    <div className="strong">{p.nome}</div>
                    <div className="t-3 mono" style={{fontSize:10.5}}>{p.id} · {p.sku}</div>
                  </td>
                  <td className="t-3">{p.marca}</td>
                  <td className="t-3">{p.categoria}</td>
                  <td className="t-3" style={{fontSize:11.5}}>{p.colecao}</td>
                  <td>
                    {p.estoqueTotal === 0
                      ? <Badge kind="red">zerado</Badge>
                      : p.estoqueTotal < 6
                        ? <Badge kind="amber">{p.estoqueTotal} baixo</Badge>
                        : <span className="num strong">{p.estoqueTotal}</span>}
                  </td>
                  <td className="num">{brl(p.custo)}</td>
                  <td className="num strong">{brl(p.preco)}</td>
                  <td className="num t-green">{p.vendas30d}</td>
                  <td className="row-action"><div className="menu-dot">⋯</div></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

const ProdutoDetail = ({ produto, onClose }) => {
  const [tab, setTab] = React.useState("info");
  const markup = ((produto.preco / produto.custo - 1) * 100).toFixed(0);
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>Produto · {produto.id} · {produto.sku}</span>
          <h1 style={{marginTop:10, display:'flex', alignItems:'center', gap:10}}>
            <span style={{fontSize:32}}>{produto.foto}</span>
            {produto.nome}
            <Badge kind="green" dot>Ativo</Badge>
          </h1>
          <p className="lead">{produto.marca} · {produto.categoria} · Coleção {produto.colecao}</p>
        </div>
        <div className="actions">
          <button className="btn ghost" onClick={onClose}><Ic name="x" size={13}/> Voltar</button>
          <button className="btn ghost"><Ic name="package" size={13}/> Duplicar</button>
          <button className="btn ghost"><Ic name="print" size={13}/> Etiqueta</button>
          <button className="btn primary"><Ic name="edit" size={13}/> Editar</button>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "info", label: "Informações" },
        { id: "estoque", label: "Estoque & grade" },
        { id: "precos", label: "Preços" },
        { id: "fotos", label: "Fotos & descrição" },
        { id: "site", label: "Loja virtual" },
        { id: "historico", label: "Histórico" },
      ]}/>

      <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:24}}>
        <div className="stack">
          <div className="card">
            <div className="card-head"><h3>Identificação</h3></div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
              <Field label="Nº Item" value={produto.id} mono/>
              <Field label="SKU" value={produto.sku} mono/>
              <Field label="Nome" value={produto.nome}/>
              <Field label="Marca" value={produto.marca}/>
              <Field label="Categoria" value={produto.categoria}/>
              <Field label="Coleção" value={produto.colecao}/>
              <Field label="Cor" value={produto.cor}/>
              <Field label="NCM" value="6204.42.00" mono/>
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <h3>Grade · tamanhos & estoque</h3>
              <div className="row gap-6">
                <Badge kind="muted">Total: {produto.estoqueTotal} un</Badge>
                <button className="btn sm"><Ic name="plus" size={11}/> Ajuste</button>
              </div>
            </div>
            <table className="tbl">
              <thead>
                <tr><th>Tamanho</th><th>Estoque atual</th><th>Estoque mínimo</th><th style={{textAlign:'right'}}>Preço</th><th style={{textAlign:'right'}}>Preço live</th><th>Status</th></tr>
              </thead>
              <tbody>
                {Object.entries(produto.tamanhos).map(([t, q]) => (
                  <tr key={t}>
                    <td className="mono strong">{t}</td>
                    <td className="num">{q}</td>
                    <td className="num t-3">2</td>
                    <td className="num">{brl(produto.preco)}</td>
                    <td className="num t-green">{brl(produto.precoLive)}</td>
                    <td>
                      {q === 0 ? <Badge kind="red">zerado</Badge>
                        : q <= 2 ? <Badge kind="amber">baixo</Badge>
                        : <Badge kind="green" dot>OK</Badge>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="card">
            <div className="card-head"><h3>Preços</h3><button className="btn sm ghost">Histórico de alterações</button></div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
              <Stat label="Preço de custo" value={brl(produto.custo)}/>
              <Stat label="MarkUp" value={markup + "%"} glow/>
              <Stat label="Preço de venda" value={brl(produto.preco)} glow="green"/>
              <Stat label="Preço de live" value={brl(produto.precoLive)} glow/>
            </div>
            <div className="mt-16 t-3" style={{fontSize:12, padding:10, background:'var(--bg-3)', borderRadius:6}}>
              💡 Margem bruta por unidade: <b className="t-green">{brl(produto.preco - produto.custo)}</b> · margem live: <b>{brl(produto.precoLive - produto.custo)}</b>
            </div>
          </div>
        </div>

        <div className="stack">
          <div className="card">
            <div className="card-head"><h3>Performance</h3></div>
            <div className="stack-tight">
              <Stat label="Vendas · 30 dias" value={produto.vendas30d} glow="green"/>
              <Stat label="Receita · 30 dias" value={brl(produto.preco * produto.vendas30d * 0.7)}/>
              <Stat label="Posição ranking" value="#3" hint="categoria Vestidos"/>
              <Stat label="Giro estoque" value="14 dias" hint="cobertura atual"/>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Foto principal</h3><button className="btn sm ghost"><Ic name="plus" size={11}/></button></div>
            <div style={{height:200, background:'var(--bg-3)', border:'1px dashed var(--line-2)', borderRadius:10, display:'flex', alignItems:'center', justifyContent:'center', fontSize:80}}>
              {produto.foto}
            </div>
            <div className="row gap-6 mt-12">
              {[1,2,3,4].map(i => (
                <div key={i} style={{flex:1, height:48, background:'var(--bg-3)', border:'1px dashed var(--line-2)', borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', color:'var(--text-4)', fontSize:18}}>+</div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Loja virtual</h3><Toggle on/></div>
            <dl className="kv">
              <dt>URL</dt><dd className="mono" style={{fontSize:11}}>/p/vestido-luna-midi</dd>
              <dt>Destaque</dt><dd><Toggle/></dd>
              <dt>Avaliações</dt><dd><Toggle on/></dd>
              <dt>Tags SEO</dt><dd className="t-3" style={{fontSize:11}}>vestido, midi, festa</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  );
};

const Field = ({ label, value, mono }) => (
  <div>
    <div className="t-mono-label" style={{fontSize:9.5, letterSpacing:'0.14em', marginBottom:4}}>{label}</div>
    <div className={(mono ? "mono " : "") + "t-2"} style={{fontSize:13, padding:'7px 10px', background:'var(--bg-3)', border:'1px solid var(--line)', borderRadius:6}}>{value}</div>
  </div>
);

Object.assign(window, { ProdutosPage, ProdutoDetail });