// Compare drawer — §9, v1 (embedded payload, no fetch)

function CompareDrawer({ open, onClose, shortSlugs, onRemove, onClear }) {
  const items = shortSlugs.map(s => PRODUCTS.find(p => p.shortSlug === s)).filter(Boolean);
  const cols = Math.max(items.length, 1);

  // Compute shared spec keys (top 5 across all)
  const keyMap = {};
  items.forEach(p => p.specs.forEach(([k]) => { keyMap[k] = (keyMap[k] || 0) + 1; }));
  const sharedKeys = Object.entries(keyMap)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 6)
    .map(([k]) => k);

  return (
    <>
      <div className={`backdrop ${open ? 'backdrop--on' : ''}`} onClick={onClose}/>
      <aside className={`compare-drawer ${open ? 'compare-drawer--open' : ''}`} aria-hidden={!open} aria-label="Karşılaştırma çekmecesi">
        <header className="compare-drawer__head">
          <div>
            <div className="compare-drawer__title">Karşılaştır ({items.length}/3)</div>
            <div style={{ fontSize: 12, color: 'var(--km-ink-500)' }}>Maks. 3 ürün · FIFO</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {items.length > 0 && (
              <button onClick={onClear} className="btn btn--ghost btn--sm">Temizle</button>
            )}
            <button className="compare-drawer__close" onClick={onClose} aria-label="Kapat"><Icon name="close" size={18} stroke={2}/></button>
          </div>
        </header>

        <div className="compare-drawer__body">
          {items.length === 0 ? (
            <div className="compare-drawer__empty">
              <Icon name="compare" size={32} stroke={1.5}/>
              <p style={{ marginTop: 12, color: 'var(--km-ink-700)', fontWeight: 600 }}>Henüz ürün eklenmedi</p>
              <p style={{ fontSize: 13 }}>Ürün kartlarındaki <strong>+ Karşılaştır</strong> butonuna basarak buraya 3 ürüne kadar ekleyebilirsiniz.</p>
            </div>
          ) : (
            <>
              <div className="compare-drawer__grid" style={{ '--cols': cols }}>
                {items.map(p => {
                  const low = productLowest(p);
                  return (
                    <div className="compare-card" key={p.shortSlug}>
                      <button className="compare-card__remove" onClick={() => onRemove(p.shortSlug)} aria-label="Kaldır">
                        <Icon name="close" size={12} stroke={2.4}/>
                      </button>
                      <div className="compare-card__img"/>
                      <div className="compare-card__brand">{p.brand}</div>
                      <div className="compare-card__name">{p.h1}</div>
                      <div className="compare-card__price tabular">{formatPrice(low)}</div>
                      <div className="compare-card__merchants">{p.offers.length} satıcıdan</div>
                    </div>
                  );
                })}
              </div>

              <div className="compare-drawer__cta-row" style={{ '--cols': cols }}>
                {items.map(p => (
                  <a
                    key={p.shortSlug}
                    href={urlForProduct(p)}
                    className="btn btn--ghost btn--sm"
                    onClick={onClose}
                  >
                    Detay <Icon name="arrow-right" size={12}/>
                  </a>
                ))}
              </div>

              {sharedKeys.length > 0 && (
                <div style={{ marginTop: 24 }}>
                  <h4 style={{ fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--km-ink-500)', fontWeight: 600, marginBottom: 8 }}>
                    Karşılaştırma
                  </h4>
                  {sharedKeys.map(k => {
                    const values = items.map(p => {
                      const found = p.specs.find(([key]) => key === k);
                      return found ? found[1] : '—';
                    });
                    const allSame = values.every(v => v === values[0]);
                    return (
                      <div className="compare-spec-row" style={{ '--cols': cols }} key={k}>
                        <div className="compare-spec-row__k">{k}</div>
                        {values.map((v, i) => (
                          <div
                            key={i}
                            className={`compare-spec-row__v ${!allSame && values.length > 1 ? 'compare-spec-row__v--diff' : ''}`}
                          >{v}</div>
                        ))}
                      </div>
                    );
                  })}
                </div>
              )}

              <p style={{ fontSize: 11, color: 'var(--km-ink-400)', marginTop: 16, textAlign: 'center' }}>
                v1: gömülü payload üzerinden · v2'de public compare endpoint (Sprint 3) açılır
              </p>
            </>
          )}
        </div>
      </aside>
    </>
  );
}

function CompareFab({ count, onClick }) {
  return (
    <button className={`compare-fab ${count > 0 ? 'compare-fab--on' : ''}`} onClick={onClick}>
      <Icon name="compare" size={14}/> Karşılaştır
      <span className="compare-fab__badge tabular">{count}</span>
    </button>
  );
}

Object.assign(window, { CompareDrawer, CompareFab });