// Sidebar.jsx — bodegas index, filtered by selected categoría

const Sidebar = ({ bodegas, activeCategory, activeBodega, onPickBodega, counts, overlay, open, onClose }) => {
  // Filter bodegas by current category
  const visible = activeCategory === 'TODOS' ?
  bodegas :
  bodegas.filter((b) => b.categories.includes(activeCategory));

  // Group "TODOS" by category for visual hierarchy
  const grouped = activeCategory === 'TODOS' ?
  [
  ['Canarios', visible.filter((b) => b.categories.includes('CANARIOS'))],
  ['Nacionales', visible.filter((b) => b.categories.includes('NACIONALES') && !b.categories.includes('CANARIOS'))],
  ['Internacionales', visible.filter((b) => b.categories.includes('INTERNACIONALES') && !b.categories.includes('NACIONALES') && !b.categories.includes('CANARIOS'))]].
  filter(([, list]) => list.length > 0) :
  [[null, visible]];

  const totalForCat = counts[activeCategory] || 0;

  const allLabel = activeCategory === 'CANARIOS' ? 'Bodegas canarias'
    : activeCategory === 'NACIONALES' ? 'Bodegas nacionales'
    : activeCategory === 'INTERNACIONALES' ? 'Bodegas internacionales'
    : 'Todas las bodegas';

  const asideEl = (
    <aside style={{
      width: 320, flex: '0 0 320px',
      background: '#0F0F0F',
      borderRight: '1px solid #2A2A28',
      display: 'flex', flexDirection: 'column',
      overflow: 'hidden',
      ...(overlay ? {
        position: 'fixed', top: 0, bottom: 0, left: 0, zIndex: 60,
        maxWidth: '86vw',
        boxShadow: '0 0 60px rgba(0,0,0,0.6)',
        transform: open ? 'translateX(0)' : 'translateX(-100%)',
        transition: 'transform 260ms cubic-bezier(0.4,0,0.2,1)'
      } : {})
    }}>
      <div style={{
        padding: '24px 28px 18px',
        borderBottom: '1px solid #2A2A28'
      }}>
        <div style={{
          fontFamily: 'Sora', fontWeight: 500, fontSize: 10,
          letterSpacing: '0.22em', textTransform: 'uppercase', color: "rgb(224, 224, 224)"

        }}>Bodegas</div>
        <div style={{
          marginTop: 6,
          fontFamily: 'Sora', fontWeight: 300, fontSize: 13, color: "rgb(213, 213, 213)"

        }}>
          {visible.length} {visible.length === 1 ? 'bodega' : 'bodegas'} · {totalForCat} {totalForCat === 1 ? 'referencia' : 'referencias'}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0 32px' }}>
        {/* "Ver todas" pill */}
        <button
          onClick={() => onPickBodega(null)}
          style={{
            width: 'calc(100% - 28px)', margin: '12px 14px 6px',
            display: 'flex', alignItems: 'center', gap: 14,
            padding: '12px 14px',
            background: !activeBodega ? '#2A2A28' : 'transparent',
            border: !activeBodega ? '1px solid #3A3A38' : '1px solid transparent',
            color: '#FFFFFF',
            cursor: 'pointer',
            transition: 'background-color 180ms cubic-bezier(0.4,0,0.2,1), border-color 180ms',
            textAlign: 'left'
          }}>
          
          <div style={{
            width: 36, height: 36, flex: '0 0 36px',
            background: !activeBodega ? 'var(--comesa-red)' : '#1D1D1B',
            color: !activeBodega ? '#fff' : '#B7B6B6',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Sora', fontWeight: 700, fontSize: 11,
            letterSpacing: '0.10em'
          }}>·</div>
          <div style={{
            fontFamily: 'Sora', fontWeight: 600, fontSize: 13,
            letterSpacing: '0.04em', textTransform: 'uppercase',
            color: !activeBodega ? '#FFFFFF' : '#B7B6B6'
          }}>{allLabel}</div>
        </button>

        {grouped.map(([groupName, list]) =>
        <div key={groupName || 'list'} style={{ marginTop: groupName ? 22 : 6 }}>
            {groupName &&
          <div style={{
            padding: '6px 28px 8px',
            fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
            letterSpacing: '0.24em', textTransform: 'uppercase',
            color: '#B7B6B6'
          }}>· {groupName}</div>
          }
            {list.map((b) => {
            const active = activeBodega === b.name;
            return (
              <button
                key={b.name}
                onClick={() => onPickBodega(b.name)}
                style={{
                  width: 'calc(100% - 28px)', margin: '2px 14px',
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: '10px 14px',
                  background: active ? '#2A2A28' : 'transparent',
                  border: active ? '1px solid #3A3A38' : '1px solid transparent',
                  cursor: 'pointer',
                  transition: 'background-color 180ms cubic-bezier(0.4,0,0.2,1)',
                  textAlign: 'left'
                }}
                onMouseEnter={(e) => {if (!active) e.currentTarget.style.background = '#13110d';}}
                onMouseLeave={(e) => {if (!active) e.currentTarget.style.background = 'transparent';}}>
                
                  <BodegaMark name={b.name} monogram={b.monogram} size={36} accent={active} />
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{
                    fontFamily: 'Sora', fontWeight: 500, fontSize: 13,
                    color: active ? '#FFFFFF' : '#EFEDED',
                    whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'
                  }}>{b.name}</div>
                    <div style={{
                    fontFamily: 'Sora', fontWeight: 300, fontSize: 11,
                    color: '#565555', marginTop: 2
                  }}>{b.count} {b.count === 1 ? 'referencia' : 'referencias'}</div>
                  </div>
                </button>);

          })}
          </div>
        )}
      </div>

      <div style={{
        padding: '16px 28px',
        borderTop: '1px solid #2A2A28',
        fontFamily: 'Sora', fontWeight: 300, fontSize: 11,
        color: '#565555', lineHeight: 1.5
      }}>
        Catálogo comercial · uso interno Comesa Canarias.<br />
        Edición 2026 · <a href="admin/" style={{ color: '#565555', textDecoration: 'none' }}>admin</a>
      </div>
    </aside>);

  if (!overlay) return asideEl;

  return (
    <React.Fragment>
      {open &&
      <div
        onClick={onClose}
        style={{
          position: 'fixed', inset: 0, zIndex: 55,
          background: 'rgba(0,0,0,0.55)',
          animation: 'gridIn 200ms ease'
        }} />
      }
      {asideEl}
    </React.Fragment>);

};

window.Sidebar = Sidebar;