// WineCard.jsx — wine product card in the grid
// Editorial premium feel; neutral bottle silhouette on dark plinth, then meta beneath.

const WineCard = ({ wine, showPrices, onClick, selectionMode, selected, onToggleSelect }) => {
  // Vary bottle tone slightly by wine type to add subtle visual rhythm
  // (still a single silhouette, just glass tint). Set to 'green' for pure consistency.
  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';
  };

  const tone = toneByType(wine.tipo);

  return (
    <article
      onClick={onClick}
      style={{
        position: 'relative',
        background: 'var(--card-bg, #1A1A1A)',
        border: '1px solid ' + (selected ? 'var(--comesa-red)' : 'var(--card-border, #2A2A28)'),
        boxShadow: selected ? 'inset 0 0 0 1px var(--comesa-red)' : 'none',
        cursor: 'pointer',
        display: 'flex',
        flexDirection: 'column',
        transition: 'transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard)'
      }}
      onMouseEnter={(e) => {if (!selected) e.currentTarget.style.borderColor = '#4A4A48';}}
      onMouseLeave={(e) => {e.currentTarget.style.borderColor = selected ? 'var(--comesa-red)' : 'var(--card-border, #2A2A28)';}}>

      {/* Selected badge — click to remove */}
      {selectionMode && selected &&
      <button
        onClick={(e) => {e.stopPropagation(); onToggleSelect && onToggleSelect(wine.id);}}
        title="Quitar del catálogo"
        aria-label="Quitar del catálogo"
        style={{
        position: 'absolute', top: -1, right: -1, zIndex: 3,
        width: 30, height: 30, padding: 0, border: 0, cursor: 'pointer',
        background: 'var(--comesa-red)',
        display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}
        onMouseEnter={(e) => {e.currentTarget.querySelector('.chk').style.display = 'none'; e.currentTarget.querySelector('.rmv').style.display = 'block';}}
        onMouseLeave={(e) => {e.currentTarget.querySelector('.chk').style.display = 'block'; e.currentTarget.querySelector('.rmv').style.display = 'none';}}>
        <svg className="chk" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.6"><path d="M5 13l4 4L19 7" /></svg>
        <svg className="rmv" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.6" style={{ display: 'none' }}><path d="M6 6l12 12M18 6l-12 12" /></svg>
      </button>
      }

      {/* Bottle stage — real photos come on a white background, so the stage itself
          goes white for those (no dark frame around the photo); the vector BottleArt
          placeholder keeps its dark backdrop, which is what it was designed for. */}
      <div style={{
        position: 'relative',
        height: 280,
        background: wine.imagen ? '#FFFFFF' : 'linear-gradient(180deg, #111111 0%, #0a0908 100%)',
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'center',
        paddingTop: 24,
        overflow: 'hidden'
      }}>
        {/* Spotlight — dark-stage only */}
        {!wine.imagen &&
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(60% 50% at 50% 90%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 70%)',
          pointerEvents: 'none'
        }} />
        }
        {/* Tipo badge */}
        {wine.tipo &&
        <span style={{
          position: 'absolute', top: 14, left: 14,
          fontFamily: 'Sora', fontWeight: 500, fontSize: 10,
          letterSpacing: '0.16em', textTransform: 'uppercase',
          color: wine.imagen ? '#565555' : '#B7B6B6',
          padding: '5px 8px',
          border: '1px solid ' + (wine.imagen ? 'rgba(29,29,27,0.18)' : 'rgba(163,151,128,0.35)')
        }}>{wine.tipo}</span>
        }
        {/* Año */}
        {wine.anada &&
        <span style={{
          position: 'absolute', top: 14, right: 14,
          fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
          letterSpacing: '0.10em', color: wine.imagen ? '#1D1D1B' : '#EFEDED'
        }}>{wine.anada}</span>
        }
        {wine.imagen ?
        <img src={wine.imagen} alt={wine.nombre} style={{ height: 240, maxWidth: '88%', objectFit: 'contain', display: 'block' }} /> :

        <BottleArt height={240} tone={tone} />
        }
      </div>

      {/* Meta */}
      <div style={{ padding: '22px 22px 22px', display: 'flex', flexDirection: 'column', gap: 6, flex: 1 }}>
        <span style={{
          fontFamily: 'Sora', fontWeight: 500, fontSize: 10,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: '#B7B6B6'
        }}>{wine.bodega}</span>
        <h3 style={{
          fontFamily: 'Sora', fontWeight: 600, fontSize: 19, lineHeight: 1.2,
          color: '#FFFFFF', margin: 0,
          textWrap: 'pretty'
        }}>{wine.nombre}</h3>
        <div style={{
          fontFamily: 'Sora', fontWeight: 300, fontSize: 13, lineHeight: 1.5,
          marginTop: 2, minHeight: 38, color: "rgb(255, 255, 255)"
        }}>
          {[wine.do, wine.region].filter(Boolean).join(' · ')}
        </div>

        {wine.variedad &&
        <div style={{
          fontFamily: 'Sora', fontWeight: 300, fontSize: 12,
          marginTop: 4,
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
          overflow: 'hidden', color: "rgb(255, 255, 255)"
        }}>{wine.variedad}</div>
        }

        {/* Price row */}
        <div style={{
          marginTop: 'auto', paddingTop: 14,
          borderTop: '1px solid #2A2A28',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          gap: 10, minHeight: 44
        }}>
          {showPrices ?
          <PriceBlock wine={wine} compact /> :

          <span style={{
            fontFamily: 'Sora', fontWeight: 500, fontSize: 10,
            letterSpacing: '0.16em', textTransform: 'uppercase', color: "rgb(255, 255, 255)"

          }}>Ficha técnica</span>
          }
          <span style={{
            fontFamily: 'Sora', fontWeight: 600, fontSize: 11,
            letterSpacing: '0.10em', textTransform: 'uppercase',
            color: '#B50D21',
            display: 'inline-flex', alignItems: 'center', gap: 6
          }}>
            Ver
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
          </span>
        </div>

        {/* Add to custom catalog */}
        {selectionMode &&
        <button
          onClick={(e) => {e.stopPropagation(); onToggleSelect && onToggleSelect(wine.id);}}
          style={{
            marginTop: 14, width: '100%',
            display: 'inline-flex', alignItems: 'center', justifyContent: '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: '11px 12px', cursor: 'pointer',
            transition: 'background-color 160ms, border-color 160ms, color 160ms'
          }}
          onMouseEnter={(e) => {
            if (selected) {e.currentTarget.style.background = 'var(--accent-hover)';}
            else {e.currentTarget.style.borderColor = 'var(--comesa-red)'; e.currentTarget.style.color = '#fff';}
          }}
          onMouseLeave={(e) => {
            if (selected) {e.currentTarget.style.background = 'var(--comesa-red)';}
            else {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<span style={{ fontWeight: 400, opacity: 0.7, letterSpacing: '0.06em' }}>· ¿Quitar?</span></> :
          <><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>
        }
      </div>
    </article>);

};

const PriceBlock = ({ wine, compact = false }) => {
  const hasReal = !!wine.precio;
  const bottle = hasReal ? wine.precio : wine.precioDemo;
  const caja = wine.precioDemoCaja;
  const formatEur = (v) => {
    if (!v) return '—';
    const n = parseFloat(String(v).replace(',', '.'));
    if (isNaN(n)) return v;
    return n.toFixed(2).replace('.', ',') + ' €';
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <span style={{
        fontFamily: 'Sora', fontWeight: 500, fontSize: 9,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: '#565555'
      }}>Botella · 75 cl</span>
      <span style={{
        fontFamily: 'Sora', fontWeight: 600,
        fontSize: compact ? 18 : 22,
        color: '#FFFFFF',
        letterSpacing: '-0.01em'
      }}>{formatEur(bottle)}</span>
      {!compact && caja &&
      <span style={{
        fontFamily: 'Sora', fontWeight: 300, fontSize: 12,
        color: '#9a917e', marginTop: 4
      }}>Caja x6 · {formatEur(caja)}</span>
      }
    </div>);

};

window.WineCard = WineCard;
window.PriceBlock = PriceBlock;