// detail.jsx — product detail in 3 modes (inline, drawer, modal)
const { useEffect: useEffectD } = React;

function DetailBody({ p, unlocked, onClose, compact }) {
  const cat = CATEGORIES.find((c) => c.id === p.cat);
  const sm = STATUS_META[p.status] || STATUS_META.available;
  return (
    <div className={`detail-body ${compact ? 'detail-compact' : ''}`}>
      <header className="detail-head">
        <div>
          <span className={`strain strain-${p.strain.toLowerCase()}`}>{p.strain}</span>
          <span className="badge" style={{ color: sm.tone, background: sm.bg, borderColor: sm.bd, marginLeft: 8 }}>
            <span className="badge-dot" style={{ background: sm.tone }}></span>{sm.label}
          </span>
          <span className="batch t-mono">{p.batch}</span>
        </div>
        {onClose && <button className="close-x" onClick={onClose} aria-label="Close">×</button>}
      </header>
      <h2 className="detail-title display-md">{p.name}</h2>
      <p className="detail-lede">{p.description}</p>

      <div className="detail-grid">
        <div className="detail-photo" style={{ '--cat-accent': cat?.accent }}>
          <span className="detail-photo-initial" style={{ fontFamily: "\"Big Shoulders Display\"" }}>{p.name.split(' ').slice(0, 2).map((w) => w[0]).join('')}</span>
          <span className="detail-photo-tag">Photo slot · {cat?.name}</span>
        </div>

        <div className="detail-stats">
          <div className="stat-card">
            <small>THC</small>
            <strong>{p.thc === 'TBD' ? '—' : `${p.thc}%`}</strong>
            <span className="stat-rule"></span>
            <span className="stat-foot">Active THC</span>
          </div>
          <div className="stat-card">
            <small>Raw THC</small>
            <strong>{p.raw === 'TBD' ? '—' : `${p.raw}%`}</strong>
            <span className="stat-rule"></span>
            <span className="stat-foot">Pre-decarb</span>
          </div>
          <div className="stat-card">
            <small>Total cannabinoids</small>
            <strong>{p.total === 'TBD' ? '—' : `${p.total}%`}</strong>
            <span className="stat-rule"></span>
            <span className="stat-foot">All actives</span>
          </div>
          <div className="stat-card">
            <small>Terps</small>
            <strong>{p.terps === 'TBD' ? '—' : `${p.terps}%`}</strong>
            <span className="stat-rule"></span>
            <span className="stat-foot">Terpene total</span>
          </div>
          <div className="stat-card">
            <small>CBD</small>
            <strong>{p.cbd === 'TBD' ? '—' : `${p.cbd}%`}</strong>
            <span className="stat-rule"></span>
            <span className="stat-foot">CBD content</span>
          </div>
          <div className="stat-card">
            <small>Format</small>
            <strong className="strong-sm">{p.format}</strong>
            <span className="stat-rule"></span>
            <span className="stat-foot">{cat?.name}</span>
          </div>
        </div>

        <div className="detail-buyer">
          <div className="buyer-row">
            <small>Wholesale price</small>
            <strong>{unlocked ? p.price : <span className="locked">Token required</span>}</strong>
          </div>
          <div className="buyer-row">
            <small>Unit</small>
            <strong>{unlocked ? p.unit : '—'}</strong>
          </div>
          <div className="buyer-row">
            <small>MOQ</small>
            <strong>{unlocked ? p.moq : '—'}</strong>
          </div>
        </div>

        <div className="detail-qr">
          <div className="qr-frame"></div>
          <div>
            <small className="t-mono">COA · QR</small>
            <p>Scan for the lab certificate, batch metadata, and compliance packet.</p>
            <button className="btn-ghost btn-sm" onClick={() => alert('COA placeholder')}>Open COA</button>
          </div>
        </div>
      </div>

      <div className="detail-actions">
        <button className="btn-red" onClick={() => alert(`Sample drop requested: ${p.name}`)}>Request sample drop</button>
        <button className="btn-ghost" onClick={() => alert('Contact sales placeholder')}>
          {unlocked ? 'Contact sales to order' : 'Request buyer token'}
        </button>
      </div>
    </div>);

}

function InlineDetail({ p, unlocked, onClose }) {
  // Rendered inside the menu — full-width slab
  return (
    <section className="detail-inline">
      <DetailBody p={p} unlocked={unlocked} onClose={onClose} />
    </section>);

}

function DrawerDetail({ p, unlocked, onClose }) {
  useEffectD(() => {
    const handler = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);
  return (
    <>
      <div className="drawer-scrim" onClick={onClose}></div>
      <aside className="drawer">
        <DetailBody p={p} unlocked={unlocked} onClose={onClose} compact />
      </aside>
    </>);

}

function ModalDetail({ p, unlocked, onClose }) {
  useEffectD(() => {
    const handler = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);
  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <DetailBody p={p} unlocked={unlocked} onClose={onClose} />
      </div>
    </div>);

}

Object.assign(window, { DetailBody, InlineDetail, DrawerDetail, ModalDetail });