/* global React, window, PAPELARIA_CATALOG, PAPELARIA_PARTNERS */
const { useState, useMemo } = React;

// ================================================================
// Step Papelaria, entra ANTES da confirmação final.
// Splittado em DOIS steps no menu lateral:
//   - StepPapelariaIntro  (Ponto de partida)
//   - StepPapelariaBuilder (Montagem da lista)
// O usuário avança naturalmente entre eles via botão "Próximo".
// ================================================================

function StepPapelariaIntro() {
  const { data, setData } = useApp();
  const mode = data.papelariaMode;
  const set = (v) => setData(d => ({ ...d, papelariaMode: v }));
  if (mode === "skip") return <PapelariaSkipped onReopen={() => set(undefined)} />;
  return <PapelariaIntro onPick={set} currentMode={mode} />;
}

function StepPapelariaBuilder() {
  const { data, setData } = useApp();
  const mode = data.papelariaMode;
  if (!mode || mode === "skip") {
    return (
      <div>
        <Heading
          eyebrow="Papelaria · Passo 1, Montagem"
          title="Volte ao passo anterior pra escolher o ponto de partida"
          subtitle="Esta etapa só é necessária se você incluir papelaria na lista." />
        <LexBubble pose="wave">Se mudar de ideia, é só voltar pro passo anterior 🌱</LexBubble>
      </div>
    );
  }
  if (mode === "past") return <PapelariaPastListReview onReset={() => setData(d => ({ ...d, papelariaMode: undefined }))} />;
  return <PapelariaBuilder mode={mode} onReset={() => setData(d => ({ ...d, papelariaMode: undefined }))} />;
}

// ================================================================
// Screen 1, intro
// ================================================================
function PapelariaIntro({ onPick, currentMode }) {
  return (
    <div>
      {/* Header compacto com Lex Papelaria à esquerda */}
      <PremiumHeader
        image="assets/lex-papelaria-bg.png"
        imageAlt="Lex na papelaria"
        eyebrow="Papelaria · Passo 1, Ponto de partida"
        title="Como você quer começar a lista de papelaria?"
        subtitle="Papelaria entra como bloco separado no PDF das famílias. Você pode pular e fazer só literatura+didáticos, ou montar agora, sem sair do Scolist."
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14, marginTop: 28 }}>
        {[
          { id: "skip",    icon: "📚", title: "Só livros", sub: "Pular esta etapa. A lista final não terá papelaria." },
          { id: "past",    icon: "🗂️", title: "Usar lista do ano passado", sub: "Puxo a papelaria do ano anterior do Scolist e você ajusta." },
          { id: "market",  icon: "📊", title: "Usar lista média do mercado", sub: "Parto da média das escolas parceiras por série, você edita." },
          { id: "scratch", icon: "✏️",  title: "Montar do zero", sub: "Busca livre por item. Você monta série a série." },
        ].map(opt => {
          const selected = opt.id === currentMode;
          return (
            <button key={opt.id} onClick={() => onPick(opt.id)}
              style={{
                padding: 20, borderRadius: 18,
                background: "#fff",
                border: `1px solid ${selected ? "var(--teal)" : "var(--border)"}`,
                boxShadow: selected ? "0 0 0 3px rgba(47,151,161,0.15)" : "var(--shadow-sm)",
                textAlign: "left",
                cursor: "pointer",
                transition: "all 0.15s",
              }}
              onMouseEnter={(e) => { if (!selected) { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "var(--shadow-md)"; e.currentTarget.style.borderColor = "var(--teal)"; } }}
              onMouseLeave={(e) => { if (!selected) { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "var(--shadow-sm)"; e.currentTarget.style.borderColor = "var(--border)"; } }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                <div style={{ fontSize: 30, marginBottom: 10 }}>{opt.icon}</div>
                {selected && <div style={{ padding: "3px 8px", background: "var(--teal)", color: "#fff", borderRadius: 8, fontSize: 10, fontWeight: 700 }}>SELECIONADO</div>}
              </div>
              <div style={{ fontSize: 15, fontWeight: 700, color: "var(--text)", marginBottom: 6 }}>{opt.title}</div>
              <div style={{ fontSize: 12, color: "var(--text-mute)", lineHeight: 1.45 }}>{opt.sub}</div>
            </button>
          );
        })}
      </div>

      {currentMode && currentMode !== "skip" && (
        <div style={{ marginTop: 24, padding: 14, background: "var(--bg-light)", borderRadius: 12, fontSize: 13, color: "var(--text-mute)", display: "flex", alignItems: "center", gap: 10 }}>
          → Avance pro próximo passo (<strong>Montagem da lista</strong>) pra começar.
        </div>
      )}

      {/* Fabricantes parceiros strip */}
      <div style={{ marginTop: 40, padding: "22px 24px", background: "#fff", borderRadius: 16, border: "1px solid var(--border)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12, gap: 12, flexWrap: "wrap" }}>
          <div style={{ fontSize: 11, color: "var(--text-mute)", fontWeight: 700, textTransform: "uppercase", letterSpacing: 1 }}>
            Fabricantes parceiros ({Object.keys(PAPELARIA_PARTNERS).length})
          </div>
          <div style={{ fontSize: 11, color: "var(--teal-dark)", fontWeight: 700, padding: "4px 10px", background: "rgba(47,151,161,0.10)", borderRadius: 999, letterSpacing: 0.3 }}>
            ⓘ As marcas são sugestões, a família escolhe na hora da compra
          </div>
        </div>
        <div style={{ display: "flex", gap: 28, flexWrap: "wrap", alignItems: "center" }}>
          {Object.values(PAPELARIA_PARTNERS).map(p => (
            <div key={p.id} style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <PartnerLogo partner={p} h={28} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--text)" }}>{p.name}</div>
                <div style={{ fontSize: 10.5, color: "var(--text-mute)" }}>{p.tag}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ================================================================
// Screen 1 alt, skipped confirmation
// ================================================================
function PapelariaSkipped({ onReopen }) {
  return (
    <div>
      <Heading
        eyebrow="Papelaria · Passo 1, Ponto de partida"
        title="Você optou por não incluir papelaria"
        subtitle="Tudo certo, a lista final terá só literatura. Pode voltar atrás a qualquer momento." />
      <LexBubble pose="wave">Beleza! Seguindo direto pra confirmação e geração do link.</LexBubble>
      <div style={{ marginTop: 24 }}>
        <BtnGhost onClick={onReopen}>← Mudei de ideia, quero incluir papelaria</BtnGhost>
      </div>
    </div>
  );
}

// ================================================================
// Past list, quando usuário escolheu "Usar lista do ano passado"
// Em produção: puxa do Scolist OU lê PDF/planilha enviado.
// Mock: lista plausível pré-preenchida que o coordenador pode editar.
// ================================================================
function PapelariaPastListReview({ onReset }) {
  const { data, setData } = useApp();
  const seeded = !!data.__papelariaPastSeeded;

  // Seed once: cada série recebe uma lista plausível DIFERENTE,
  // baseada em qty.min (sempre presente) e qty.max (séries mais avançadas)
  const activeSeries = resolveSeriesList(data);
  React.useEffect(() => {
    if (seeded) return;
    const past = {};
    activeSeries.forEach((_, i) => {
      const factor = activeSeries.length > 1 ? i / (activeSeries.length - 1) : 0; // 0..1
      past[i] = PAPELARIA_CATALOG
        .filter(it => !it.forbidden)
        .map(it => {
          const { min = 0, avg = 0, max = 0 } = it.qty || {};
          // Itens com min>0 aparecem em todas as séries; com min=0, só a partir do limiar.
          const threshold = min > 0 ? -1 : (max > 0 ? 0.25 : 1.5); // limiar pra entrar
          if (factor < threshold) return null;
          // Quantidade interpola entre min e max conforme a série avança
          const baseLo = min > 0 ? min : Math.max(1, Math.floor(avg / 2));
          const qty = Math.max(1, Math.round(baseLo + (max - baseLo) * factor));
          return { itemId: it.id, brandIdx: 0, qty };
        })
        .filter(Boolean);
    });
    setData(d => ({ ...d, papelaria: past, __papelariaPastSeeded: true }));
    // eslint-disable-next-line
  }, []);

  return <PapelariaBuilder mode="past" onReset={onReset} />;
}

// ================================================================
// Logo helper, tenta <img> e cai pra placeholder colorido se 404
// ================================================================
function PartnerLogo({ partner, h = 32 }) {
  const [failed, setFailed] = useState(false);
  if (failed || !partner.logo) {
    return (
      <div style={{
        height: h, minWidth: h * 2, padding: "0 10px",
        background: partner.color, color: "#fff",
        borderRadius: 6, display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: h * 0.38, fontWeight: 800, letterSpacing: 0.5,
      }}>{partner.name}</div>
    );
  }
  return <img src={partner.logo} alt={partner.name} onError={() => setFailed(true)}
    style={{ height: h, objectFit: "contain", maxWidth: 140 }} />;
}

// ================================================================
// Screen 2, builder (search + cart per series)
// ================================================================
function PapelariaBuilder({ mode, onReset }) {
  const { data, setData, account } = useApp();
  // Séries de verdade da escola (Passo 1), não a lista fixa de 12.
  const activeSeries = resolveSeriesList(data);
  const [seriesIdx, setSeriesIdx] = useState(0);
  const [query, setQuery] = useState("");
  const [categoryFilter, setCategoryFilter] = useState(null);
  const [liveCatalogVersion, setLiveCatalogVersion] = useState(0);

  // "Montar do zero" busca de verdade no estoque VTEX (mesmo endpoint do
  // dashboard/scolist antigo, GET /searchBySeller) em vez de só filtrar o
  // catálogo local — resultados são normalizados pro mesmo formato de
  // PAPELARIA_CATALOG e empurrados pra lá, igual o padrão já usado pra
  // busca de livros em steps-curation.jsx.
  useEffect(() => {
    if (mode !== "scratch" || query.trim().length < 2) return undefined;
    if (!window.ScolistAPI || typeof window.ScolistAPI.searchStationeryVtex !== "function") return undefined;

    let cancelled = false;
    const sellers = (account && account.school && account.school.sellerRestrictions) || [];

    const handle = setTimeout(async () => {
      try {
        const liveItems = await window.ScolistAPI.searchStationeryVtex(query, sellers);
        if (cancelled) return;
        liveItems.forEach((item) => {
          const existingIdx = PAPELARIA_CATALOG.findIndex((c) => c.id === item.id);
          if (existingIdx >= 0) PAPELARIA_CATALOG[existingIdx] = item;
          else PAPELARIA_CATALOG.push(item);
        });
        if (liveItems.length) setLiveCatalogVersion((n) => n + 1);
      } catch (err) {
        console.error("Falha ao buscar papelaria na VTEX:", err);
      }
    }, 350);

    return () => { cancelled = true; clearTimeout(handle); };
  }, [query, mode, account]);

  const papelaria = data.papelaria || {}; // { [seriesIdx]: [{itemId, brandIdx, qty}] }
  const currentCart = papelaria[seriesIdx] || [];

  const setCart = (newCart) => {
    setData(d => ({ ...d, papelaria: { ...(d.papelaria || {}), [seriesIdx]: newCart } }));
  };

  // Filter catalog: search + category, only partner-backed items
  // "Do zero": nada aparece até o usuário buscar ou filtrar por categoria
  // "Média do mercado": mostra tudo pra facilitar o ajuste
  const results = useMemo(() => {
    const norm = (s) => (s || "").toString().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
    const tokens = norm(query.trim()).split(/\s+/).filter(Boolean);
    if (mode === "scratch" && tokens.length === 0 && !categoryFilter) return [];
    return PAPELARIA_CATALOG.filter(item => {
      if (categoryFilter && item.category !== categoryFilter) return false;
      if (tokens.length === 0) return true;
      // Haystack: nome + categoria + todas as marcas/modelos
      const hay = norm([
        item.genericName,
        item.category,
        ...item.brands.flatMap(b => [PAPELARIA_PARTNERS[b.partnerId]?.name || "", b.model]),
      ].join(" "));
      // Todas as palavras têm que casar (AND)
      return tokens.every(t => hay.includes(t));
    });
  }, [query, categoryFilter, mode, liveCatalogVersion]);

  const categories = useMemo(() => {
    const s = new Set(PAPELARIA_CATALOG.map(x => x.category));
    return Array.from(s);
  }, [liveCatalogVersion]);

  const addToCart = (itemId, brandIdx = 0) => {
    const item = PAPELARIA_CATALOG.find(x => x.id === itemId);
    const defaultQty = item?.qty?.avg || 1;
    const existing = currentCart.find(c => c.itemId === itemId);
    if (existing) {
      setCart(currentCart.map(c => c.itemId === itemId ? { ...c, brandIdx } : c));
    } else {
      setCart([...currentCart, { itemId, brandIdx, qty: defaultQty }]);
    }
  };

  const removeFromCart = (itemId) => {
    setCart(currentCart.filter(c => c.itemId !== itemId));
  };

  const updateQty = (itemId, qty) => {
    setCart(currentCart.map(c => c.itemId === itemId ? { ...c, qty: Math.max(0, qty) } : c));
  };

  // "Use market avg" one-click seed for this series
  const seedMarket = () => {
    const base = PAPELARIA_CATALOG
      .filter(it => !it.forbidden && it.qty.avg > 0)
      .map(it => ({ itemId: it.id, brandIdx: 0, qty: it.qty.avg }));
    setCart(base);
  };

  // Auto-seed once if mode=market and cart empty
  React.useEffect(() => {
    if (mode === "market" && currentCart.length === 0 && !data.__papelariaSeeded?.[seriesIdx]) {
      seedMarket();
      setData(d => ({ ...d, __papelariaSeeded: { ...(d.__papelariaSeeded || {}), [seriesIdx]: true } }));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [seriesIdx, mode]);

  const totalItems = currentCart.reduce((s, c) => s + c.qty, 0);
  const totalCost = currentCart.reduce((s, c) => {
    const it = PAPELARIA_CATALOG.find(x => x.id === c.itemId);
    const br = it?.brands[c.brandIdx];
    return s + (br?.price || 0) * c.qty;
  }, 0);

  return (
    <div>
      <PremiumHeader
        image="assets/lex-papelaria-bg.png"
        imageAlt="Lex Papelaria"
        eyebrow="Papelaria · Passo 1, Montagem"
        title={mode === "market" ? "Partindo da lista média do mercado" : "Monte a papelaria"}
        subtitle="Cada série tem sua lista. As marcas mostradas aqui são sugestões parceiras, a família escolhe a marca final no momento da compra. Itens proibidos pelo CDC ou lei estadual aparecem com aviso."
      />

      <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 8, marginBottom: 16 }}>
        <BtnGhost onClick={onReset}>← Trocar modo de início</BtnGhost>
        <div style={{ fontSize: 12, color: "var(--text-mute)" }}>
          Modo: <strong style={{ color: "var(--text)" }}>
            {mode === "past" ? "Lista do ano passado" : mode === "market" ? "Média do mercado" : "Do zero"}
          </strong>
        </div>
      </div>

      {/* Aviso, marcas são sugestões */}
      <div style={{
        marginBottom: 18, padding: "12px 16px",
        background: "linear-gradient(90deg, rgba(47,151,161,0.06), rgba(44,79,252,0.04))",
        border: "1px solid var(--teal)", borderRadius: 12,
        display: "flex", gap: 12, alignItems: "center",
      }}>
        <div style={{ fontSize: 18 }}>ⓘ</div>
        <div style={{ fontSize: 13, color: "var(--text)", lineHeight: 1.5 }}>
          <strong>As marcas mostradas são sugestões.</strong> A escola não impõe marca, a família escolhe a marca preferida no momento da compra. As marcas parceiras aqui têm preço e qualidade pré-validados pra orientar a escolha.
        </div>
      </div>

      {/* Series tabs */}
      <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 18 }}>
        {activeSeries.map((s, i) => {
          const seriesCart = (papelaria[i] || []);
          const itemCount = seriesCart.length;
          return (
            <button key={s} onClick={() => setSeriesIdx(i)} style={{
              padding: "8px 14px", borderRadius: 10,
              background: i === seriesIdx ? "var(--teal)" : "transparent",
              color: i === seriesIdx ? "#fff" : "var(--text)",
              border: `1px solid ${i === seriesIdx ? "var(--teal)" : "var(--border)"}`,
              fontSize: 13, fontWeight: i === seriesIdx ? 700 : 500,
              display: "inline-flex", alignItems: "center", gap: 7,
            }}>
              {s}
              {itemCount > 0 && <span style={{
                padding: "1px 7px", fontSize: 10.5, fontWeight: 700, borderRadius: 9,
                background: i === seriesIdx ? "rgba(255,255,255,0.3)" : "var(--green)",
                color: i === seriesIdx ? "#fff" : "var(--text)",
              }}>{itemCount}</span>}
            </button>
          );
        })}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 400px", gap: 24, alignItems: "start" }}>
        {/* ========== LEFT: SEARCH + RESULTS ========== */}
        <div>
          {/* Search bar */}
          <div style={{
            display: "flex", gap: 10, alignItems: "center", marginBottom: 14,
            background: "#fff", padding: "10px 14px", borderRadius: 12,
            border: "1px solid var(--border)", boxShadow: "var(--shadow-sm)",
          }}>
            <span style={{ fontSize: 18 }}>🔍</span>
            <input value={query} onChange={(e) => setQuery(e.target.value)}
              placeholder="Buscar: caderno, lápis de cor, tesoura…"
              style={{
                flex: 1, border: "none", outline: "none", fontSize: 15,
                background: "transparent", color: "var(--text)",
              }} />
            {query && <button onClick={() => setQuery("")} style={{ fontSize: 12, color: "var(--text-mute)" }}>limpar</button>}
          </div>

          {/* Category chips */}
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 16 }}>
            <button onClick={() => setCategoryFilter(null)} style={chipStyle(categoryFilter === null)}>
              Todos
            </button>
            {categories.map(c => (
              <button key={c} onClick={() => setCategoryFilter(c === categoryFilter ? null : c)}
                style={chipStyle(categoryFilter === c)}>
                {c}
              </button>
            ))}
          </div>

          {/* Results */}
          <div style={{ display: "grid", gap: 10 }}>
            {results.length === 0 && mode === "scratch" && !query && !categoryFilter && (
              <div style={{ padding: "60px 40px", textAlign: "center", background: "#fff", borderRadius: 14, border: "1px dashed var(--border)" }}>
                <div style={{ fontSize: 40, marginBottom: 12 }}>🔍</div>
                <div style={{ fontSize: 15, fontWeight: 700, color: "var(--text)", marginBottom: 6 }}>
                  Comece buscando um item
                </div>
                <div style={{ fontSize: 13, color: "var(--text-mute)", maxWidth: 360, margin: "0 auto", lineHeight: 1.5 }}>
                  Digite algo como <strong>"caderno"</strong>, <strong>"lápis de cor"</strong> ou <strong>"tesoura"</strong>,
                  <br/>ou escolha uma categoria acima.
                </div>
              </div>
            )}
            {results.length === 0 && (query || categoryFilter) && (
              <div style={{ padding: 40, textAlign: "center", color: "var(--text-mute)", fontSize: 14 }}>
                Nenhum item encontrado{query && <> pra "<strong>{query}</strong>"</>}.
                <div style={{ fontSize: 12, marginTop: 8 }}>Tente termos mais genéricos como "caneta" ou "pasta".</div>
              </div>
            )}
            {results.map(item => (
              <ItemCard key={item.id} item={item}
                inCart={currentCart.find(c => c.itemId === item.id)}
                onAdd={(brandIdx) => addToCart(item.id, brandIdx)}
                onRemove={() => removeFromCart(item.id)}
              />
            ))}
          </div>
        </div>

        {/* ========== RIGHT: CART ========== */}
        <div style={{
          position: "sticky", top: 96,
          background: "#fff", borderRadius: 16, border: "1px solid var(--border)",
          boxShadow: "var(--shadow-sm)", padding: 18,
        }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 10 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: "var(--teal-dark)", textTransform: "uppercase", letterSpacing: 1 }}>
              {activeSeries[seriesIdx]}
            </div>
            <div style={{ fontSize: 11, color: "var(--text-mute)" }}>
              {currentCart.length} item{currentCart.length !== 1 ? "s" : ""}
            </div>
          </div>
          <div style={{ fontSize: 14, fontWeight: 700, color: "var(--text)", marginBottom: 14 }}>Lista desta série</div>

          {currentCart.length === 0 && (
            <div style={{ padding: 20, textAlign: "center", color: "var(--text-mute)", fontSize: 12.5, border: "1px dashed var(--border)", borderRadius: 10 }}>
              Nenhum item ainda.
              <br />Busque e adicione itens ao lado.
            </div>
          )}

          <div style={{ display: "grid", gap: 8, maxHeight: 480, overflowY: "auto" }}>
            {currentCart.map(c => {
              const item = PAPELARIA_CATALOG.find(x => x.id === c.itemId);
              if (!item) return null;
              const brand = item.brands[c.brandIdx];
              const partner = PAPELARIA_PARTNERS[brand.partnerId];
              const avg = item.qty.avg;
              const overQty = avg > 0 && c.qty > avg * 1.5;
              const forbidden = !!item.forbidden;
              return (
                <div key={c.itemId} style={{
                  padding: "10px 12px",
                  background: forbidden ? "#fff4f4" : "var(--bg-light)",
                  borderRadius: 10,
                  border: `1px solid ${forbidden ? "#f5c5c5" : "transparent"}`,
                }}>
                  <div style={{ display: "flex", gap: 6, alignItems: "flex-start" }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text)", lineHeight: 1.3, marginBottom: 3 }}>
                        {forbidden && <span style={{ color: "#c53030", marginRight: 4 }}>⚠️</span>}
                        {item.genericName}
                      </div>
                      <div style={{ fontSize: 10.5, color: "var(--text-mute)" }}>
                        {partner?.name} · {brand.model} · R$ {brand.price.toFixed(2)}
                      </div>
                    </div>
                    <button onClick={() => removeFromCart(c.itemId)}
                      style={{ fontSize: 14, color: "var(--text-mute)", padding: 2 }}
                      title="Remover">✕</button>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
                    <button onClick={() => updateQty(c.itemId, c.qty - 1)} style={qtyBtnStyle}>−</button>
                    <input type="number" value={c.qty} min={0}
                      onChange={(e) => updateQty(c.itemId, parseInt(e.target.value) || 0)}
                      style={{
                        width: 46, padding: "3px 6px", textAlign: "center",
                        border: "1px solid var(--border)", borderRadius: 6, fontSize: 13, fontWeight: 700,
                      }} />
                    <button onClick={() => updateQty(c.itemId, c.qty + 1)} style={qtyBtnStyle}>+</button>
                    <span style={{ fontSize: 10.5, color: "var(--text-mute)" }}>{item.unit}</span>
                    {avg > 0 && !forbidden && (
                      <span style={{ marginLeft: "auto", fontSize: 10, color: "var(--text-mute)" }}>
                        média: {avg}
                      </span>
                    )}
                  </div>
                  {overQty && (
                    <div style={{ marginTop: 6, fontSize: 10.5, color: "#b45a0d", background: "#fef3e0", padding: "4px 8px", borderRadius: 6 }}>
                      ⚠️ Acima da média de mercado ({avg}), confira se está correto
                    </div>
                  )}
                  {forbidden && (
                    <div style={{ marginTop: 6, fontSize: 10.5, color: "#c53030", lineHeight: 1.4 }}>
                      <strong>Proibido:</strong> {item.forbidden.reason}
                      <div style={{ fontSize: 9.5, color: "#999", marginTop: 2 }}>
                        {item.forbidden.laws.join(" · ")}
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          {currentCart.length > 0 && (
            <>
              <div style={{ height: 1, background: "var(--border)", margin: "14px 0" }} />
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--text-mute)", marginBottom: 4 }}>
                <span>Total de itens</span><span>{totalItems}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 16, fontWeight: 800, color: "var(--teal-dark)" }}>
                <span>Estimativa</span><span>R$ {totalCost.toFixed(2)}</span>
              </div>
              <div style={{ fontSize: 10, color: "var(--text-mute)", marginTop: 3 }}>
                preços de referência, cobrados pelo parceiro na compra
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ================================================================
// Item card, one genericName expanded with brand tiles
// ================================================================
function ItemCard({ item, inCart, onAdd, onRemove }) {
  const forbidden = !!item.forbidden;
  const selectedBrandIdx = inCart?.brandIdx ?? 0;
  const [sampleTarget, setSampleTarget] = useState(null); // partnerId
  return (
    <div style={{
      background: "#fff", borderRadius: 12,
      border: `1px solid ${forbidden ? "#f5c5c5" : inCart ? "var(--teal)" : "var(--border)"}`,
      padding: 14, position: "relative",
      boxShadow: inCart ? "0 0 0 1px var(--teal)" : "var(--shadow-sm)",
    }}>
      {/* Header */}
      <div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 10 }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
            <div style={{ fontSize: 15, fontWeight: 700, color: "var(--text)" }}>
              {forbidden && <span style={{ marginRight: 6 }}>🚫</span>}
              {item.genericName}
            </div>
            {item.qty.avg > 0 && !forbidden && (
              <span style={{ fontSize: 10, color: "var(--text-mute)", padding: "2px 7px", background: "var(--bg-light)", borderRadius: 6 }}>
                média: {item.qty.avg} {item.unit}
              </span>
            )}
          </div>
          <div style={{ fontSize: 11, color: "var(--text-mute)" }}>
            {item.category} · {item.brands.length} marca{item.brands.length > 1 ? "s" : ""} parceira{item.brands.length > 1 ? "s" : ""}
          </div>
        </div>
        {inCart && (
          <div style={{
            padding: "4px 10px", borderRadius: 12, background: "var(--teal)", color: "#fff",
            fontSize: 11, fontWeight: 700,
          }}>✓ na lista</div>
        )}
      </div>

      {/* Forbidden banner */}
      {forbidden && (
        <div style={{
          padding: "10px 12px", background: "#fff4f4", border: "1px solid #f5c5c5",
          borderRadius: 8, marginBottom: 10,
        }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: "#c53030", marginBottom: 4 }}>
            ⚠️ Item geralmente proibido em lista escolar
          </div>
          <div style={{ fontSize: 11.5, color: "#7a1a1a", lineHeight: 1.45 }}>
            {item.forbidden.reason}
          </div>
          <div style={{ fontSize: 10, color: "#999", marginTop: 4 }}>
            {item.forbidden.laws.join(" · ")}
          </div>
        </div>
      )}

      {/* Brand tiles */}
      <div style={{ display: "grid", gridTemplateColumns: `repeat(${item.brands.length}, 1fr)`, gap: 8 }}>
        {item.brands.map((b, i) => {
          const partner = PAPELARIA_PARTNERS[b.partnerId];
          const active = inCart && selectedBrandIdx === i;
          return (
            <button key={i} onClick={() => onAdd(i)} disabled={forbidden}
              style={{
                padding: 10, borderRadius: 10, textAlign: "left",
                background: active ? "rgba(47,151,161,0.06)" : "#fff",
                border: `1px solid ${active ? "var(--teal)" : "var(--border)"}`,
                cursor: forbidden ? "not-allowed" : "pointer",
                opacity: forbidden ? 0.5 : 1,
                transition: "all 0.12s",
              }}
              onMouseEnter={(e) => { if (!forbidden && !active) e.currentTarget.style.borderColor = "var(--teal)"; }}
              onMouseLeave={(e) => { if (!forbidden && !active) e.currentTarget.style.borderColor = "var(--border)"; }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 6 }}>
                <PartnerLogo partner={partner} h={18} />
              </div>
              <div style={{ fontSize: 11.5, color: "var(--text)", fontWeight: 600, lineHeight: 1.3, marginBottom: 4 }}>
                {b.model}
              </div>
              <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
                <div style={{ fontSize: 14, fontWeight: 800, color: "var(--teal-dark)" }}>
                  R$ {b.price.toFixed(2)}
                </div>
                <div style={{ fontSize: 10, color: b.stock === "alto" ? "var(--teal)" : b.stock === "médio" ? "#b45a0d" : "#c53030" }}>
                  ● {b.stock}
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {/* Sample request row */}
      <div style={{ marginTop: 10, display: "flex", gap: 8, flexWrap: "wrap" }}>
        {item.brands.map((b) => {
          const partner = PAPELARIA_PARTNERS[b.partnerId];
          return (
            <button key={b.partnerId} onClick={() => setSampleTarget(b.partnerId)}
              style={{
                padding: "4px 10px", fontSize: 11, color: "var(--text-mute)",
                background: "transparent", border: "1px dashed var(--border)", borderRadius: 12,
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--teal-dark)"; e.currentTarget.style.borderColor = "var(--teal)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-mute)"; e.currentTarget.style.borderColor = "var(--border)"; }}
            >
              📦 Pedir amostra · {partner?.name}
            </button>
          );
        })}
      </div>

      {sampleTarget && (
        <SampleModal partner={PAPELARIA_PARTNERS[sampleTarget]} item={item}
          onClose={() => setSampleTarget(null)} />
      )}

      {inCart && (
        <button onClick={onRemove}
          style={{ marginTop: 10, fontSize: 11.5, color: "#c53030", fontWeight: 600 }}>
          Remover da lista
        </button>
      )}
    </div>
  );
}

// ================================================================
// Sample request modal
// ================================================================
function SampleModal({ partner, item, onClose }) {
  const [sent, setSent] = useState(false);
  const isPartner = !!partner;
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)",
      display: "flex", alignItems: "center", justifyContent: "center",
      zIndex: 100, padding: 20,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: "#fff", borderRadius: 18, padding: 28, maxWidth: 480, width: "100%",
        boxShadow: "var(--shadow-lg)",
      }}>
        {!isPartner ? (
          <>
            <div style={{ fontSize: 40, marginBottom: 12 }}>🚧</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: "var(--text)", marginBottom: 8 }}>
              Fabricante ainda não é parceiro do Scolist
            </div>
            <div style={{ fontSize: 13.5, color: "var(--text-mute)", lineHeight: 1.5, marginBottom: 20 }}>
              Avisamos assim que fechar parceria. Quer sugerir pra nossa equipe entrar em contato?
            </div>
            <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
              <BtnGhost onClick={onClose}>Fechar</BtnGhost>
              <BtnPrimary onClick={onClose}>Sugerir</BtnPrimary>
            </div>
          </>
        ) : sent ? (
          <>
            <div style={{ fontSize: 40, marginBottom: 12 }}>✅</div>
            <div style={{ fontSize: 18, fontWeight: 800, color: "var(--text)", marginBottom: 8 }}>
              Amostra solicitada
            </div>
            <div style={{ fontSize: 13.5, color: "var(--text-mute)", lineHeight: 1.5, marginBottom: 20 }}>
              A {partner.name} recebeu seu pedido pro item <strong>{item.genericName}</strong>. Prazo de envio: 5 a 7 dias úteis.
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <BtnPrimary onClick={onClose}>Fechar</BtnPrimary>
            </div>
          </>
        ) : (
          <>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <PartnerLogo partner={partner} h={36} />
              <div style={{ fontSize: 11, color: "var(--text-mute)", textTransform: "uppercase", letterSpacing: 0.8, fontWeight: 700 }}>Pedido de amostra</div>
            </div>
            <div style={{ fontSize: 17, fontWeight: 800, color: "var(--text)", marginBottom: 4 }}>{item.genericName}</div>
            <div style={{ fontSize: 12.5, color: "var(--text-mute)", marginBottom: 18 }}>
              A {partner.name} envia uma amostra grátis pra você avaliar antes de adicionar à lista.
            </div>
            <div style={{ background: "var(--bg-light)", padding: 12, borderRadius: 10, fontSize: 12, color: "var(--text-mute)", lineHeight: 1.6, marginBottom: 18 }}>
              📦 Envio pro endereço cadastrado da escola<br/>
              📨 Prazo: 5-7 dias úteis<br/>
              ℹ️ Limite de 3 amostras por ciclo de curadoria
            </div>
            <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
              <BtnGhost onClick={onClose}>Cancelar</BtnGhost>
              <BtnPrimary onClick={() => setSent(true)}>Solicitar amostra</BtnPrimary>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

// ================================================================
// Styles helpers
// ================================================================
const chipStyle = (active) => ({
  padding: "5px 12px", borderRadius: 20,
  background: active ? "var(--teal)" : "#fff",
  color: active ? "#fff" : "var(--text)",
  border: `1px solid ${active ? "var(--teal)" : "var(--border)"}`,
  fontSize: 12, fontWeight: active ? 700 : 500,
  cursor: "pointer",
});
const qtyBtnStyle = {
  width: 22, height: 22, borderRadius: 6,
  background: "#fff", border: "1px solid var(--border)",
  fontSize: 14, fontWeight: 700, color: "var(--teal-dark)",
  display: "flex", alignItems: "center", justifyContent: "center",
};

Object.assign(window, {
  StepPapelariaIntro,
  StepPapelariaBuilder,
});