/* Wood OS — Catálogo de Templates (produtos padrão da marcenaria) */
const { useState: useStateCat, useMemo: useMemoCat } = React;

/* ============================================================
   Category meta
   ============================================================ */
const CATALOG_CATEGORY_META = {
  paineis:   { label: "Painéis",     color: "#34D399", icon: "layers",   bg: "linear-gradient(135deg, rgba(52,211,153,0.18), rgba(2,44,34,0.4))"   },
  closets:   { label: "Closets",     color: "#38BDF8", icon: "boxes",    bg: "linear-gradient(135deg, rgba(56,189,248,0.18), rgba(11,10,7,0.6))"   },
  cozinhas:  { label: "Cozinhas",    color: "#F59E0B", icon: "package",  bg: "linear-gradient(135deg, rgba(245,158,11,0.18), rgba(11,10,7,0.6))"   },
  salas:     { label: "Salas",       color: "#A78BFA", icon: "layers",   bg: "linear-gradient(135deg, rgba(167,139,250,0.18), rgba(11,10,7,0.6))"  },
  quartos:   { label: "Quartos",     color: "#F472B6", icon: "feature",  bg: "linear-gradient(135deg, rgba(244,114,182,0.18), rgba(11,10,7,0.6))"  },
  banheiros: { label: "Banheiros",   color: "#22D3EE", icon: "ruler",    bg: "linear-gradient(135deg, rgba(34,211,238,0.18), rgba(11,10,7,0.6))"   },
  comercial: { label: "Comercial",   color: "#FB923C", icon: "building", bg: "linear-gradient(135deg, rgba(251,146,60,0.18), rgba(11,10,7,0.6))"   },
  externas:  { label: "Áreas externas", color: "#86EFAC", icon: "globe", bg: "linear-gradient(135deg, rgba(134,239,172,0.18), rgba(2,44,34,0.4))"  },
};

const itemTemplateTotal = (it) => it.itemsTemplate.reduce((s, i) => s + i.qty * i.unitPrice, 0);

/* ============================================================
   CatalogPage
   ============================================================ */
const CatalogPage = ({ navigate }) => {
  const [category, setCategory] = useStateCat("todas");
  const [q, setQ] = useStateCat("");
  const [view, setView] = useStateCat("cards");
  const [drawer, setDrawer] = useStateCat(null);
  const [creating, setCreating] = useStateCat(false);
  const [sort, setSort] = useStateCat("popularidade");

  const items = MOCK.catalog;

  const filtered = useMemoCat(() => {
    let list = items.filter(i => {
      if (category !== "todas" && i.category !== category) return false;
      if (q) {
        const hay = `${i.name} ${i.description} ${i.tags.join(" ")}`.toLowerCase();
        if (!hay.includes(q.toLowerCase())) return false;
      }
      return true;
    });
    if (sort === "popularidade") list.sort((a, b) => b.popularity - a.popularity);
    else if (sort === "nome") list.sort((a, b) => a.name.localeCompare(b.name));
    else if (sort === "preco_asc") list.sort((a, b) => a.priceMin - b.priceMin);
    else if (sort === "preco_desc") list.sort((a, b) => b.priceMax - a.priceMax);
    else if (sort === "recente") list.sort((a, b) => b.lastUsed.localeCompare(a.lastUsed));
    return list;
  }, [items, category, q, sort]);

  const metrics = useMemoCat(() => {
    const totalUse = items.reduce((s, i) => s + i.popularity, 0);
    const topUsed = [...items].sort((a, b) => b.popularity - a.popularity)[0];
    const avgPrice = Math.round(items.reduce((s, i) => s + (i.priceMin + i.priceMax) / 2, 0) / items.length);
    return {
      total: items.length,
      categories: new Set(items.map(i => i.category)).size,
      topUsed: topUsed?.name,
      totalUse,
      avgPrice,
    };
  }, [items]);

  return (
    <>
      <PageHeader
        kicker="Produção"
        title="Catálogo"
        subtitle="Templates de produtos da marcenaria. Cada item pré-popula novos orçamentos e solicitações com materiais, prazos e preço médio."
        actions={
          <>
            <div className="iflex items-center" style={{ background: "var(--wood-surface-2)", border: "1px solid var(--wood-border)", borderRadius: 10, padding: 2 }}>
              <button onClick={() => setView("cards")} className="wood-btn wood-btn-ghost wood-btn-sm" style={{ background: view === "cards" ? "rgba(16,185,129,0.16)" : "transparent", color: view === "cards" ? "var(--cream)" : undefined }}>
                <Icon name="layers" size={13} /> Galeria
              </button>
              <button onClick={() => setView("list")} className="wood-btn wood-btn-ghost wood-btn-sm" style={{ background: view === "list" ? "rgba(16,185,129,0.16)" : "transparent", color: view === "list" ? "var(--cream)" : undefined }}>
                <Icon name="log" size={13} /> Lista
              </button>
            </div>
            <button className="wood-btn wood-btn-secondary"><Icon name="external" size={13} /> Importar</button>
            <button className="wood-btn wood-btn-primary" onClick={() => setCreating(true)}>
              <Icon name="plus" size={13} /> Novo template
            </button>
          </>
        }
      />

      {/* KPIs */}
      <div className="grid grid-cols-4 gap-4 mb-5">
        <MetricCard icon="boxes" label="Templates" value={metrics.total} sub={`em ${metrics.categories} categorias`} accent="amber" delay={0} />
        <MetricCard icon="trend-up" label="Mais usado" value={metrics.totalUse} sub={metrics.topUsed} accent="success" delay={60} />
        <MetricCard icon="dollar" label="Preço médio" value={fmtBRL(metrics.avgPrice)} sub="por template" accent="info" delay={120} />
        <MetricCard icon="spark" label="Aplicados em 30d" value="47" sub="orçamentos gerados" accent="warning" delay={180} />
      </div>

      {/* Filter chips */}
      <div className="wood-card p-3 mb-4 flex items-center gap-2 flex-wrap">
        <FilterChip active={category === "todas"} onClick={() => setCategory("todas")} count={items.length}>Todas</FilterChip>
        {Object.entries(CATALOG_CATEGORY_META).map(([k, m]) => {
          const c = items.filter(i => i.category === k).length;
          if (c === 0) return null;
          return (
            <FilterChip key={k} active={category === k} onClick={() => setCategory(k)} count={c}>
              <Icon name={m.icon} size={11} style={{ color: m.color, marginRight: 4 }} />
              {m.label}
            </FilterChip>
          );
        })}
        <div className="wood-divider md-hide" style={{ width: 1, height: 24, background: "var(--wood-border)" }} />
        <select className="wood-select" value={sort} onChange={e => setSort(e.target.value)} style={{ maxWidth: 180 }}>
          <option value="popularidade">Mais usados</option>
          <option value="nome">Nome (A-Z)</option>
          <option value="preco_asc">Menor preço</option>
          <option value="preco_desc">Maior preço</option>
          <option value="recente">Usado recentemente</option>
        </select>
        <div className="flex items-center gap-2 flex-1" style={{ minWidth: 200 }}>
          <Icon name="search" size={14} className="text-3" />
          <input
            className="flex-1"
            style={{ background: "transparent", border: "none", outline: "none", fontSize: 13, color: "var(--text)" }}
            placeholder="Buscar por nome, descrição, tag…"
            value={q}
            onChange={e => setQ(e.target.value)}
          />
        </div>
      </div>

      {filtered.length === 0 ? (
        <EmptyState icon="boxes" title="Nenhum template" description="Ajuste os filtros ou crie um novo template de produto." />
      ) : view === "cards" ? (
        <CatalogGallery items={filtered} onOpen={setDrawer} />
      ) : (
        <CatalogList items={filtered} onOpen={setDrawer} />
      )}

      <PremiumDrawer
        open={!!drawer}
        onClose={() => setDrawer(null)}
        title={drawer?.name}
        subtitle={drawer?.id}
        width={680}
        actions={
          <>
            <button className="wood-btn wood-btn-ghost"><Icon name="edit" size={13} /> Editar template</button>
            <div className="flex-1" />
            <button className="wood-btn wood-btn-secondary" onClick={() => setDrawer(null)}>Fechar</button>
            <button className="wood-btn wood-btn-primary" onClick={() => { navigate("new-quote"); setDrawer(null); }}>
              <Icon name="file-text" size={13} /> Usar em orçamento
            </button>
          </>
        }
      >
        {drawer && <CatalogDetail item={drawer} navigate={navigate} />}
      </PremiumDrawer>

      <NewTemplateModal open={creating} onClose={() => setCreating(false)} />
    </>
  );
};

/* ============================================================
   CatalogGallery — card grid
   ============================================================ */
const CatalogGallery = ({ items, onOpen }) => (
  <div className="grid grid-cols-3 gap-4">
    {items.map((it, i) => {
      const meta = CATALOG_CATEGORY_META[it.category] || CATALOG_CATEGORY_META.paineis;
      return (
        <div key={it.id} onClick={() => onOpen(it)}
             className="wood-card wood-card-hover cursor-pointer slide-up overflow-hidden"
             style={{ animationDelay: `${i * 40}ms`, padding: 0 }}>
          {/* Visual header */}
          <div style={{ position: "relative", height: 140, background: meta.bg, display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", borderBottom: "1px solid var(--wood-border-soft)" }}>
            <Icon name={it.icon} size={56} style={{ color: meta.color, opacity: 0.55 }} />
            <div style={{ position: "absolute", top: 12, left: 12 }}>
              <span className="wood-badge" style={{ background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)", color: meta.color, padding: "3px 9px", border: `1px solid ${meta.color}55` }}>
                <Icon name={meta.icon} size={11} /> {meta.label}
              </span>
            </div>
            {it.popularity >= 30 && (
              <div style={{ position: "absolute", top: 12, right: 12 }}>
                <span className="wood-badge" style={{ background: "rgba(245,158,11,0.85)", color: "#1a1100", padding: "3px 8px", fontWeight: 700, fontSize: 10 }}>
                  <Icon name="fire" size={10} /> POPULAR
                </span>
              </div>
            )}
            <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 50, background: "linear-gradient(180deg, transparent, rgba(0,0,0,0.5))" }} />
          </div>

          <div className="p-4">
            <div className="text-md font-semibold tracking-tight mb-1 text-balance">{it.name}</div>
            <div className="text-xs text-3 mb-3 truncate">{it.description}</div>

            <div className="flex items-center justify-between mb-3">
              <div>
                <div className="text-xs text-4 uppercase tracking-widest" style={{ fontWeight: 500 }}>FAIXA</div>
                <div className="text-md font-semibold tracking-tight" style={{ color: meta.color, fontVariantNumeric: "tabular-nums" }}>
                  {fmtBRL(it.priceMin)}<span className="text-4 text-xs"> — </span>{fmtBRL(it.priceMax)}
                </div>
              </div>
              <div className="text-right">
                <div className="text-xs text-4 uppercase tracking-widest" style={{ fontWeight: 500 }}>PRAZO</div>
                <div className="text-md font-semibold" style={{ fontVariantNumeric: "tabular-nums" }}>{it.estimatedDays}d</div>
              </div>
            </div>

            <div className="flex items-center justify-between pt-3" style={{ borderTop: "1px solid var(--wood-border-soft)" }}>
              <span className="text-xs text-3 flex items-center gap-1">
                <Icon name="trend-up" size={11} /> {it.popularity} usos
              </span>
              <span className="text-xs text-4">{fmtDate(it.lastUsed)}</span>
            </div>
          </div>
        </div>
      );
    })}
  </div>
);

/* ============================================================
   CatalogList — compact table view
   ============================================================ */
const CatalogList = ({ items, onOpen }) => (
  <div className="wood-card" style={{ padding: 0, overflow: "hidden" }}>
    <table className="wood-table">
      <thead>
        <tr>
          <th>Template</th>
          <th>Categoria</th>
          <th>Faixa de preço</th>
          <th>Prazo</th>
          <th>Uso</th>
          <th>Último uso</th>
        </tr>
      </thead>
      <tbody>
        {items.map(it => {
          const meta = CATALOG_CATEGORY_META[it.category] || CATALOG_CATEGORY_META.paineis;
          return (
            <tr key={it.id} onClick={() => onOpen(it)} style={{ cursor: "pointer" }}>
              <td>
                <div className="flex items-center gap-3">
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: meta.bg, color: meta.color, border: `1px solid ${meta.color}44`, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={it.icon} size={16} />
                  </div>
                  <div className="min-w-0">
                    <div style={{ fontWeight: 600 }}>{it.name}</div>
                    <div className="text-xs text-4 truncate" style={{ maxWidth: 360 }}>{it.description}</div>
                  </div>
                </div>
              </td>
              <td>
                <span className="wood-badge" style={{ background: `${meta.color}14`, color: meta.color, padding: "2px 8px" }}>
                  <Icon name={meta.icon} size={10} /> {meta.label}
                </span>
              </td>
              <td>
                <div className="text-sm" style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{fmtBRL(it.priceMin)}</div>
                <div className="text-xs text-4" style={{ fontVariantNumeric: "tabular-nums" }}>até {fmtBRL(it.priceMax)}</div>
              </td>
              <td>
                <div className="text-sm" style={{ fontWeight: 500, fontVariantNumeric: "tabular-nums" }}>{it.estimatedDays} dias</div>
                <div className="text-xs text-4">{it.estimatedHours}h trabalho</div>
              </td>
              <td>
                <div className="flex items-center gap-2">
                  <div style={{ flex: 1, width: 60 }}>
                    <AnimatedProgress value={it.popularity} max={50} height={3} />
                  </div>
                  <span className="text-xs text-3" style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600, minWidth: 28, textAlign: "right" }}>{it.popularity}</span>
                </div>
              </td>
              <td className="text-sm text-2">{fmtDate(it.lastUsed)}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  </div>
);

/* ============================================================
   CatalogDetail — drawer content
   ============================================================ */
const CatalogDetail = ({ item, navigate }) => {
  const meta = CATALOG_CATEGORY_META[item.category] || CATALOG_CATEGORY_META.paineis;
  const templateTotal = itemTemplateTotal(item);

  return (
    <div>
      {/* Hero */}
      <div className="wood-card overflow-hidden mb-5" style={{ padding: 0 }}>
        <div style={{ position: "relative", height: 180, background: meta.bg, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name={item.icon} size={80} style={{ color: meta.color, opacity: 0.6 }} />
          <div style={{ position: "absolute", top: 16, left: 16, display: "flex", gap: 8, flexWrap: "wrap" }}>
            <span className="wood-badge" style={{ background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)", color: meta.color, padding: "3px 10px", border: `1px solid ${meta.color}55` }}>
              <Icon name={meta.icon} size={11} /> {meta.label}
            </span>
            {item.tags.map(t => (
              <span key={t} className="wood-badge" style={{ background: "rgba(0,0,0,0.55)", backdropFilter: "blur(6px)", color: "var(--text-2)", padding: "3px 10px", border: "1px solid var(--wood-border)" }}>{t}</span>
            ))}
          </div>
        </div>
        <div className="p-5">
          <p className="text-sm text-2 text-pretty">{item.description}</p>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid grid-cols-3 gap-3 mb-5">
        <div className="px-4 py-4 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
          <div className="text-xs text-4 uppercase tracking-widest mb-1.5" style={{ fontWeight: 500 }}>FAIXA DE PREÇO</div>
          <div className="text-lg font-semibold tracking-tight wood-gradient-text" style={{ fontVariantNumeric: "tabular-nums" }}>
            {fmtBRL(item.priceMin)}<span className="text-md text-4"> — </span>{fmtBRL(item.priceMax)}
          </div>
        </div>
        <div className="px-4 py-4 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
          <div className="text-xs text-4 uppercase tracking-widest mb-1.5" style={{ fontWeight: 500 }}>PRAZO PRODUÇÃO</div>
          <div className="text-lg font-semibold tracking-tight">{item.estimatedDays} dias</div>
          <div className="text-xs text-4">{item.estimatedHours}h de trabalho</div>
        </div>
        <div className="px-4 py-4 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
          <div className="text-xs text-4 uppercase tracking-widest mb-1.5" style={{ fontWeight: 500 }}>POPULARIDADE</div>
          <div className="text-lg font-semibold tracking-tight">{item.popularity} usos</div>
          <div className="text-xs text-4">último: {fmtDate(item.lastUsed)}</div>
        </div>
      </div>

      {/* Default template items */}
      <div className="mb-5">
        <div className="flex items-center justify-between mb-2">
          <div className="text-sm font-semibold">Itens padrão (pré-preenchidos no orçamento)</div>
          <span className="text-xs text-3" style={{ fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{fmtBRL(templateTotal)}</span>
        </div>
        <div className="rounded-lg overflow-hidden" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
          {item.itemsTemplate.map((t, i) => (
            <div key={i} className="flex items-center gap-3 px-4 py-3" style={{ borderBottom: i < item.itemsTemplate.length - 1 ? "1px solid var(--wood-border-soft)" : "none" }}>
              <Icon name="dot" size={10} className="text-amber" />
              <div className="flex-1">
                <div className="text-sm" style={{ fontWeight: 500 }}>{t.description}</div>
                <div className="text-xs text-4">{t.qty} {t.unit} × {fmtBRL(t.unitPrice)}</div>
              </div>
              <span className="text-sm" style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{fmtBRL(t.qty * t.unitPrice)}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Materials */}
      <div className="mb-2">
        <div className="text-sm font-semibold mb-2">Materiais necessários</div>
        <div className="flex flex-col gap-2">
          {item.materials.map((m, i) => (
            <div key={i} className="flex items-center gap-3 px-4 py-2.5 rounded-lg" style={{ background: "rgba(0,0,0,0.18)", border: "1px solid var(--wood-border-soft)" }}>
              <Icon name="package" size={13} className="text-3" />
              <div className="flex-1">
                <div className="text-sm" style={{ fontWeight: 500 }}>{m.name}</div>
              </div>
              <span className="text-xs text-3" style={{ fontVariantNumeric: "tabular-nums" }}>{m.qty} {m.unit}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ============================================================
   NewTemplateModal — placeholder
   ============================================================ */
const NewTemplateModal = ({ open, onClose }) => {
  if (!open) return null;
  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(0,0,0,0.65)", backdropFilter: "blur(8px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} className="wood-card slide-up" style={{ width: "100%", maxWidth: 540, padding: 24, maxHeight: "90vh", overflow: "auto" }}>
        <div className="flex items-center justify-between mb-5">
          <div>
            <div className="text-xs uppercase tracking-widest text-amber mb-1" style={{ fontWeight: 600 }}>NOVO TEMPLATE</div>
            <div className="text-xl font-semibold tracking-tight">Cadastrar template de produto</div>
          </div>
          <button className="wood-btn wood-btn-ghost wood-btn-icon-sm" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>

        <div className="mb-3">
          <label className="wood-label">Nome do template</label>
          <input className="wood-input" placeholder="Ex: Painel ripado sala de estar" />
        </div>

        <div className="grid grid-cols-2 gap-3 mb-3">
          <div>
            <label className="wood-label">Categoria</label>
            <select className="wood-select">
              {Object.entries(CATALOG_CATEGORY_META).map(([k, m]) => <option key={k} value={k}>{m.label}</option>)}
            </select>
          </div>
          <div>
            <label className="wood-label">Unidade padrão</label>
            <select className="wood-select">
              <option>peça</option><option>módulo</option><option>m</option><option>m²</option><option>verba</option>
            </select>
          </div>
        </div>

        <div className="mb-3">
          <label className="wood-label">Descrição</label>
          <textarea className="wood-textarea" rows={3} placeholder="Descrição comercial do produto, características, configurações disponíveis…" />
        </div>

        <div className="grid grid-cols-3 gap-3 mb-3">
          <div>
            <label className="wood-label">Preço mínimo</label>
            <input type="number" className="wood-input" placeholder="0" />
          </div>
          <div>
            <label className="wood-label">Preço máximo</label>
            <input type="number" className="wood-input" placeholder="0" />
          </div>
          <div>
            <label className="wood-label">Prazo (dias)</label>
            <input type="number" className="wood-input" placeholder="0" />
          </div>
        </div>

        <div className="mb-5">
          <label className="wood-label">Tags (separadas por vírgula)</label>
          <input className="wood-input" placeholder="Ex: popular, sala, premium" />
        </div>

        <div className="rounded-lg p-3 mb-5" style={{ background: "rgba(56,189,248,0.06)", border: "1px solid rgba(56,189,248,0.2)" }}>
          <div className="flex items-start gap-2">
            <Icon name="info" size={14} className="text-info mt-0.5" />
            <div className="text-xs text-2">
              Após criar o template, você poderá adicionar materiais e itens pré-preenchidos. Esses dados aceleram a montagem de novos orçamentos.
            </div>
          </div>
        </div>

        <div className="flex items-center justify-end gap-2 pt-4 border-t" style={{ borderColor: "var(--wood-border)" }}>
          <button className="wood-btn wood-btn-ghost" onClick={onClose}>Cancelar</button>
          <button className="wood-btn wood-btn-primary" onClick={onClose}>
            <Icon name="check" size={14} /> Criar template
          </button>
        </div>
      </div>
    </div>
  );
};

/* expose */
Object.assign(window, { CatalogPage });