// MerchSection.jsx — Shopify status + read-only product list for v2.

const MerchSection = ({ onBanner }) => {
  const cfg = window.SHOPIFY_CONFIG || {};
  const configured = !!cfg.domain && !!cfg.storefrontAccessToken;
  const [products, setProducts] = useState(null);
  const [err, setErr] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!configured) return;
    if (!window.ShopifyBuy) {
      setErr('Shopify Buy SDK did not load.');
      return;
    }
    setLoading(true);
    try {
      const client = window.ShopifyBuy.buildClient({
        domain: cfg.domain,
        storefrontAccessToken: cfg.storefrontAccessToken,
      });
      const query = cfg.collectionHandle
        ? client.collection.fetchByHandle(cfg.collectionHandle).then(c => c && c.products ? c.products : [])
        : client.product.fetchAll();
      query.then((list) => {
        setProducts(list || []);
        setLoading(false);
      }).catch((e) => {
        setErr(String(e.message || e));
        setLoading(false);
      });
    } catch (e) {
      setErr(String(e.message || e));
      setLoading(false);
    }
  }, [configured]);

  const adminUrl = cfg.domain ? `https://${cfg.domain.replace('.myshopify.com', '')}.myshopify.com/admin` : '';

  return (
    <>
      <PageHero eyebrow="Admin · Merch" title={<>Shopify <span style={{ color: 'var(--wbbq-flame)' }}>Status.</span></>} subtitle="Read-only product browser. Full catalog management lives in Shopify admin." mascot="ufo.svg" />

      {!configured && (
        <div style={{ marginTop: 28, padding: 24, background: 'var(--wbbq-ink)', border: '2px dashed var(--wbbq-flame)' }}>
          <div className="eyebrow" style={{ color: 'var(--wbbq-flame)' }}>◉ Not Configured</div>
          <p style={{ color: 'var(--fg2)', marginTop: 10 }}>
            Shopify credentials aren't set in <code>shared/config/shopify.js</code>. Fill in <code>domain</code> and <code>storefrontAccessToken</code> to enable this section.
          </p>
          <a href="#/docs/SHOPIFY_PRINTFUL_SETUP.md" className="btn btn-primary" style={{ marginTop: 16, fontSize: 12 }}>Open Setup Guide →</a>
        </div>
      )}

      {configured && (
        <div style={{ marginTop: 28 }}>
          <div className="zine-card" style={{ marginBottom: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
              <div className="eyebrow" style={{ color: 'var(--wbbq-slime)' }}>◉ Connected · {cfg.domain}</div>
              {adminUrl && <a href={adminUrl} target="_blank" rel="noreferrer" className="btn btn-ghost" style={{ fontSize: 12 }}>Open in Shopify ↗</a>}
            </div>
            {cfg.collectionHandle && (
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg3)', marginTop: 10 }}>
                Collection: <code>{cfg.collectionHandle}</code>
              </div>
            )}
          </div>

          {loading && <div style={{ padding: 20, color: 'var(--fg3)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>Loading products…</div>}
          {err && (
            <div style={{ padding: 16, background: 'var(--wbbq-ink)', border: '2px solid var(--wbbq-blood)', color: 'var(--wbbq-bone)', fontFamily: 'var(--font-mono)', fontSize: 12 }}>⚠ {err}</div>
          )}
          {!loading && !err && products && (
            <>
              <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--wbbq-bone)', margin: '0 0 16px' }}>Products ({products.length})</h2>
              <div style={{ display: 'grid', gap: 10 }}>
                {products.length === 0 && <div style={{ color: 'var(--fg3)' }}>No products in this collection.</div>}
                {products.map(p => {
                  const vs = (p.variants || []);
                  const inStock = vs.reduce((acc, v) => acc + (v.available ? 1 : 0), 0);
                  return (
                    <div key={p.id} style={{
                      display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'center',
                      padding: '12px 16px', background: 'var(--wbbq-ink)', border: '2px solid var(--border)',
                    }}>
                      <div>
                        <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--wbbq-bone)' }}>{p.title}</div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg3)', marginTop: 4 }}>
                          {vs.length} variant{vs.length === 1 ? '' : 's'} · {inStock}/{vs.length} in stock · {p.productType || '—'}
                        </div>
                      </div>
                      <a href={`${adminUrl}/products/${p.id.split('/').pop()}`} target="_blank" rel="noreferrer" className="btn" style={{
                        fontSize: 10, padding: '6px 10px', background: 'transparent', color: 'var(--wbbq-slime)', border: '1.5px solid var(--wbbq-slime)',
                        letterSpacing: '0.1em', textDecoration: 'none',
                      }}>Open ↗</a>
                    </div>
                  );
                })}
              </div>
            </>
          )}
        </div>
      )}
    </>
  );
};
window.MerchSection = MerchSection;