// WineDetail.jsx — slide-over panel with full wine info

const WineDetail = ({ wine, showPrices, showCata = true, onClose, selectionMode, selected, onToggleSelect }) => {
  if (!wine) return null;
  const toneByType = (t) => {
    const k = (t || '').toLowerCase();
    if (k.includes('blanc') || k.includes('espumo')) return 'clear';
    if (k.includes('rosado') || k.includes('rosé')) return 'rose';
    if (k.includes('dulce') || k.includes('generoso')) return 'brown';
    return 'green';
  };

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

  const Row = ({ label, value }) => {
    if (!value) return null;
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 16, padding: '14px 0', borderBottom: '1px solid #2A2A28' }} className="wd-row">
        <span style={{
          fontFamily: 'Sora', fontWeight: 500, fontSize: 11,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: '#565555',
        }}>{label}</span>
        <span style={{
          fontFamily: 'Sora', fontWeight: 300, fontSize: 14,
          color: '#EFEDED', lineHeight: 1.55,
        }}>{value}</span>
      </div>
    );
  };

  return (
    <>
      <div
        onClick={onClose}
        style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', zIndex: 90,
          animation: 'fadeIn 240ms cubic-bezier(0.4,0,0.2,1)',
        }}
      />
      <aside
        role="dialog"
        aria-label={wine.nombre}
        style={{
          position: 'fixed', top: 0, right: 0, bottom: 0,
          width: 'min(720px, 92vw)',
          background: '#111111',
          borderLeft: '1px solid #2A2A28',
          zIndex: 100,
          display: 'flex', flexDirection: 'column',
          animation: 'slideIn 280ms cubic-bezier(0.2, 0, 0, 1)',
          overflow: 'hidden',
        }}
      >
        {/* Top bar */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '20px 32px',
          borderBottom: '1px solid #2A2A28',
        }}>
          <div style={{
            fontFamily: 'Sora', fontWeight: 500, fontSize: 10,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: '#B7B6B6',
          }}>Ficha de vino · {wine.categoria}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {selectionMode &&
            <button
              onClick={() => onToggleSelect && onToggleSelect(wine.id)}
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: selected ? 'var(--comesa-red)' : 'transparent',
                border: '1px solid ' + (selected ? 'var(--comesa-red)' : '#3A3A38'),
                color: selected ? '#fff' : '#EFEDED',
                fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                padding: '8px 14px', cursor: 'pointer',
                transition: 'background-color 160ms, border-color 160ms, color 160ms',
              }}
              onMouseEnter={(e) => { if (!selected) { e.currentTarget.style.borderColor = 'var(--comesa-red)'; e.currentTarget.style.color = '#fff'; } }}
              onMouseLeave={(e) => { if (!selected) { e.currentTarget.style.borderColor = '#3A3A38'; e.currentTarget.style.color = '#EFEDED'; } }}>
              {selected ?
              <><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 13l4 4L19 7"/></svg>Añadido</> :
              <><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>Añadir al catálogo</>}
            </button>
            }
            <button
              onClick={onClose}
              style={{
                background: 'transparent', border: 0, color: '#B50D21',
                fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
                letterSpacing: '0.16em', textTransform: 'uppercase',
                padding: '8px 12px', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}
            >
              Cerrar
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6l-12 12"/></svg>
            </button>
          </div>
        </div>

        {/* Scroll content */}
        <div style={{ flex: 1, overflowY: 'auto' }}>
          <div className="wd-body-grid" style={{
            padding: '32px 32px 0',
            display: 'grid',
            gridTemplateColumns: '220px 1fr',
            gap: 32,
          }}>
            <div style={{
              background: wine.imagen ? '#FFFFFF' : 'linear-gradient(180deg, #111111 0%, #050504 100%)',
              border: '1px solid ' + (wine.imagen ? '#E5E7EA' : '#2A2A28'),
              padding: '18px 0',
              display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
              minHeight: 360,
            }}>
              {wine.imagen ?
              <img src={wine.imagen} alt={wine.nombre} style={{ height: 340, maxWidth: '90%', objectFit: 'contain', display: 'block' }} /> :

              <BottleArt height={340} tone={toneByType(wine.tipo)} />
              }
            </div>
            <div>
              <span style={{
                fontFamily: 'Sora', fontWeight: 500, fontSize: 11,
                letterSpacing: '0.18em', textTransform: 'uppercase',
                color: '#B50D21',
              }}>{wine.bodega}</span>
              <h1 style={{
                fontFamily: 'Sora', fontWeight: 600,
                fontSize: 38, lineHeight: 1.05, letterSpacing: '-0.015em',
                color: '#FFFFFF', margin: '10px 0 12px',
                textWrap: 'balance',
              }}>{wine.nombre}</h1>
              <div style={{
                fontFamily: 'Sora', fontWeight: 300, fontSize: 15,
                color: '#B7B6B6', lineHeight: 1.5,
              }}>
                {[wine.tipo, wine.do, wine.region, wine.pais].filter(Boolean).join(' · ')}
              </div>
              {wine.variedad && (
                <p style={{
                  marginTop: 18,
                  fontFamily: 'Sora', fontWeight: 300, fontSize: 14,
                  color: '#EFEDED', lineHeight: 1.6,
                }}>{wine.variedad}</p>
              )}

              {showPrices && (
                <div style={{
                  marginTop: 24, paddingTop: 18,
                  borderTop: '1px solid #2A2A28',
                }}>
                  <PriceBlock wine={wine} />
                </div>
              )}
            </div>
          </div>

          {/* Tasting notes */}
          <div style={{ padding: '32px 32px 8px' }}>
            {showCata && (wine.notaVisual || wine.notaOlfativa || wine.notaGustativa) && (
              <div style={{ marginTop: 8 }}>
                <SectionTitle>Cata</SectionTitle>
                <div style={{
                  display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, marginTop: 18,
                }}>
                  <TastingCard label="Visual" value={wine.notaVisual} />
                  <TastingCard label="Olfato" value={wine.notaOlfativa} />
                  <TastingCard label="Gusto" value={wine.notaGustativa} />
                </div>
              </div>
            )}
          </div>

          <div style={{ padding: '24px 32px 40px' }}>
            <SectionTitle>Detalles</SectionTitle>
            <div style={{ marginTop: 8 }}>
              <Row label="Añada" value={wine.anada} />
              <Row label="Presentación" value={wine.presentacion} />
              <Row label="Alcohol" value={wine.alcohol ? `${wine.alcohol} % vol.` : null} />
              <Row label="Temp. servicio" value={wine.temp} />
              <Row label="Crianza" value={wine.crianza} />
              <Row label="Elaboración" value={wine.elaboracion} />
              <Row label="Viñedo" value={wine.vinedo} />
              <Row label="Producción" value={wine.produccion} />
              <Row label="Maridaje" value={wine.maridaje} />
            </div>
          </div>
        </div>
      </aside>
      <style>{`
        @keyframes slideIn { from { transform: translateX(8%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
      `}</style>
    </>
  );
};

const SectionTitle = ({ children }) => (
  <h4 style={{
    fontFamily: 'Sora', fontWeight: 500, fontSize: 11,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: '#B7B6B6', margin: 0,
    paddingBottom: 8, borderBottom: '1px solid #2A2A28',
  }}>{children}</h4>
);

const TastingCard = ({ label, value }) => (
  <div style={{
    background: '#131313', border: '1px solid #2A2A28',
    padding: '18px 18px',
    minHeight: 110,
  }}>
    <span style={{
      fontFamily: 'Sora', fontWeight: 600, fontSize: 10,
      letterSpacing: '0.20em', textTransform: 'uppercase',
      color: '#B50D21',
    }}>{label}</span>
    <p style={{
      fontFamily: 'Sora', fontWeight: 300, fontSize: 13.5,
      color: '#EFEDED', lineHeight: 1.55,
      margin: '10px 0 0',
    }}>{value || <span style={{ color: '#565555' }}>Sin notas registradas.</span>}</p>
  </div>
);

window.WineDetail = WineDetail;