// SelectionPanel.jsx — right drawer listing the selected wines.
// View, remove individually, clear all, and reorder via drag & drop.
// The order here defines the order of the generated PDF.

const { useState: useSelState, useRef: useSelRef } = React;

const SelectionPanel = ({ open, wines, onClose, onRemove, onClear, onReorder, onGenerate }) => {
  const [dragIndex, setDragIndex] = useSelState(null);
  const [overIndex, setOverIndex] = useSelState(null);

  React.useEffect(() => {
    const fn = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) window.addEventListener('keydown', fn);
    return () => window.removeEventListener('keydown', fn);
  }, [open, onClose]);

  if (!open) return null;

  const handleDrop = (to) => {
    if (dragIndex === null || dragIndex === to) { setDragIndex(null); setOverIndex(null); return; }
    const ids = wines.map((w) => w.id);
    const [moved] = ids.splice(dragIndex, 1);
    ids.splice(to, 0, moved);
    onReorder(ids);
    setDragIndex(null);
    setOverIndex(null);
  };

  return (
    <>
      <div onClick={onClose} style={{
        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', zIndex: 110,
        animation: 'fadeIn 220ms cubic-bezier(0.4,0,0.2,1)',
      }} />
      <aside role="dialog" aria-label="Productos seleccionados" style={{
        position: 'fixed', top: 0, right: 0, bottom: 0,
        width: 'min(480px, 94vw)', background: '#111111', borderLeft: '1px solid #2A2A28',
        zIndex: 120, display: 'flex', flexDirection: 'column',
        animation: 'slideIn 280ms cubic-bezier(0.2,0,0,1)',
      }}>
        {/* Header */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '20px 24px', borderBottom: '1px solid #2A2A28',
        }}>
          <div>
            <div style={{
              fontFamily: 'Sora', fontWeight: 500, fontSize: 10,
              letterSpacing: '0.22em', textTransform: 'uppercase', color: '#B50D21',
            }}>Catálogo personalizado</div>
            <div style={{
              fontFamily: 'Sora', fontWeight: 600, fontSize: 18, color: '#FFFFFF', marginTop: 4,
            }}>{wines.length} {wines.length === 1 ? 'producto' : 'productos'}</div>
          </div>
          <button onClick={onClose} style={{
            background: 'transparent', border: 0, color: '#B7B6B6', cursor: 'pointer',
            padding: 8, lineHeight: 0,
          }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6l-12 12" /></svg>
          </button>
        </div>

        {/* Hint */}
        {wines.length > 1 && (
          <div style={{
            padding: '10px 24px', borderBottom: '1px solid #2A2A28',
            fontFamily: 'Sora', fontWeight: 300, fontSize: 11, color: '#565555',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M8 6h8M8 12h8M8 18h8" /></svg>
            Arrastra para reordenar — así aparecerán en el PDF
          </div>
        )}

        {/* List */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px' }}>
          {wines.length === 0 ? (
            <div style={{
              padding: '60px 20px', textAlign: 'center',
              fontFamily: 'Sora', fontWeight: 300, fontSize: 14, color: '#565555',
            }}>No hay productos seleccionados.</div>
          ) : wines.map((w, i) => (
            <div
              key={w.id}
              draggable
              onDragStart={() => setDragIndex(i)}
              onDragEnd={() => { setDragIndex(null); setOverIndex(null); }}
              onDragOver={(e) => { e.preventDefault(); if (overIndex !== i) setOverIndex(i); }}
              onDrop={() => handleDrop(i)}
              style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 12px', marginBottom: 8,
                background: dragIndex === i ? '#1D1D1B' : '#161616',
                border: '1px solid ' + (overIndex === i && dragIndex !== null ? '#B50D21' : '#2A2A28'),
                opacity: dragIndex === i ? 0.5 : 1,
                cursor: 'grab', transition: 'border-color 140ms, background-color 140ms',
              }}>
              <span style={{
                fontFamily: 'Sora', fontWeight: 600, fontSize: 12, color: '#565555',
                width: 22, textAlign: 'center', flex: '0 0 auto',
              }}>{i + 1}</span>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#565555" strokeWidth="2" style={{ flex: '0 0 auto' }}><path d="M9 6h.01M9 12h.01M9 18h.01M15 6h.01M15 12h.01M15 18h.01" /></svg>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: 'Sora', fontWeight: 600, fontSize: 14, color: '#FFFFFF',
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{w.nombre}</div>
                <div style={{
                  fontFamily: 'Sora', fontWeight: 300, fontSize: 11, color: '#B7B6B6', marginTop: 2,
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{[w.bodega, w.anada].filter(Boolean).join(' · ')}</div>
              </div>
              <button
                onClick={() => onRemove(w.id)}
                title="Quitar"
                style={{
                  background: 'transparent', border: 0, color: '#565555', cursor: 'pointer',
                  padding: 6, lineHeight: 0, flex: '0 0 auto',
                }}
                onMouseEnter={(e) => { e.currentTarget.style.color = '#B50D21'; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = '#565555'; }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6l-12 12" /></svg>
              </button>
            </div>
          ))}
        </div>

        {/* Footer actions */}
        <div style={{
          borderTop: '1px solid #2A2A28', padding: '16px 20px',
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <button
            onClick={onClear}
            disabled={wines.length === 0}
            style={{
              background: 'transparent', border: '1px solid #3A3A38', color: '#B7B6B6',
              fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
              letterSpacing: '0.10em', textTransform: 'uppercase',
              padding: '13px 16px', cursor: wines.length ? 'pointer' : 'not-allowed',
              opacity: wines.length ? 1 : 0.5,
            }}>Vaciar</button>
          <button
            onClick={onGenerate}
            disabled={wines.length === 0}
            style={{
              flex: 1, background: 'var(--comesa-red)', border: '1px solid var(--comesa-red)', color: '#fff',
              fontFamily: 'Sora', fontWeight: 600, fontSize: 12,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              padding: '13px 18px', cursor: wines.length ? 'pointer' : 'not-allowed',
              opacity: wines.length ? 1 : 0.5,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
            Generar PDF
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
          </button>
        </div>
      </aside>
    </>
  );
};

window.SelectionPanel = SelectionPanel;