const GRAM_OPTIONS = ['100g', '200g', '500g', '1kg'];

function ProductDetail({ coffee, onBack, onAddToCart, tweaks }) {
  const [selectedGram, setSelectedGram] = React.useState('200g');
  const [added, setAdded] = React.useState(false);
  const [meterVisible, setMeterVisible] = React.useState(false);

  React.useEffect(() => {
    setMeterVisible(false);
    setSelectedGram('200g');
    const t = setTimeout(() => setMeterVisible(true), 120);
    return () => clearTimeout(t);
  }, [coffee.id]);

  function handleAdd() {
    onAddToCart(coffee, selectedGram);
    setAdded(true);
    setTimeout(() => setAdded(false), 2200);
  }

  const price = coffee.prices[selectedGram];

  const s = {
    wrap: {
      minHeight: '100vh',
      display: 'grid',
      gridTemplateColumns: '3fr 2fr',
      animation: 'slideInDetail 0.55s cubic-bezier(0.16, 1, 0.3, 1)',
    },
    left: {
      padding: '96px 64px 80px',
      borderRight: '1px solid rgba(255,255,255,0.08)',
    },
    right: {
      position: 'sticky',
      top: 0,
      height: '100vh',
      background: 'rgba(255,255,255,0.015)',
      overflow: 'hidden',
    },
    back: {
      background: 'none', border: 'none',
      color: 'rgba(255,255,255,0.38)',
      fontFamily: "'Montserrat', sans-serif",
      fontSize: 12, letterSpacing: '0.22em',
      cursor: 'crosshair', padding: 0,
      marginBottom: 72, display: 'flex',
      alignItems: 'center', gap: 10,
      textTransform: 'uppercase',
      transition: 'color 0.2s',
    },
    label: {
      fontFamily: "'Montserrat', sans-serif",
      fontSize: 12, letterSpacing: '0.28em',
      color: 'rgba(255,255,255,0.28)',
      textTransform: 'uppercase', marginBottom: 10,
    },
    rule: {
      height: 1,
      background: 'rgba(255,255,255,0.1)',
      margin: '40px 0',
    },
  };

  return (
    <div style={s.wrap}>

      {/* ── LEFT PANEL ── */}
      <div style={s.left}>

        <button style={s.back}
          onMouseEnter={e => e.currentTarget.style.color = '#ffffff'}
          onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.38)'}
          onClick={onBack}>
          ← ALL ORIGINS
        </button>

        {/* Index line */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
          <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.1em' }}>
            {coffee.index}
          </span>
          <div style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.1)' }} />
          <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 12, color: 'rgba(255,255,255,0.3)', letterSpacing: '0.15em' }}>
            {coffee.altitude.toLocaleString()}M A.S.L.
          </span>
        </div>

        {/* Title */}
        <h1 style={{
          fontFamily: "'Montserrat', sans-serif",
          fontSize: 'clamp(52px, 5.5vw, 86px)',
          fontWeight: 900, lineHeight: 0.88,
          letterSpacing: '-0.02em',
          color: '#ffffff', marginBottom: 14,
        }}>
          {coffee.name}
        </h1>
        <div style={{
          fontFamily: "'Montserrat', sans-serif",
          fontSize: 12, letterSpacing: '0.15em',
          color: 'rgba(255,255,255,0.4)',
          textTransform: 'uppercase', marginBottom: 8,
        }}>
          {coffee.region}
        </div>
        <div style={{
          fontFamily: "'Montserrat', sans-serif",
          fontSize: 12, letterSpacing: '0.12em',
          color: 'rgba(255,255,255,0.25)',
          textTransform: 'uppercase',
        }}>
          {coffee.origin}
        </div>

        <div style={s.rule} />

        {/* Tasting notes */}
        <div style={s.label}>Tasting Notes</div>
        <div style={{ display: 'flex', gap: 0, flexWrap: 'wrap', marginBottom: 4 }}>
          {coffee.notes.map((note, i) => (
            <React.Fragment key={i}>
              <span style={{
                fontFamily: "'Montserrat', sans-serif",
                fontSize: 26, fontStyle: 'italic',
                color: '#ffffff',
              }}>{note}</span>
              {i < coffee.notes.length - 1 && (
                <span style={{
                  fontFamily: "'Montserrat', sans-serif",
                  fontSize: 12, color: 'rgba(255,255,255,0.22)',
                  margin: '0 12px', alignSelf: 'center',
                }}>·</span>
              )}
            </React.Fragment>
          ))}
        </div>

        <div style={s.rule} />

        {/* Description */}
        <p style={{
          fontFamily: "'Montserrat', sans-serif",
          fontSize: 12, lineHeight: 2,
          color: 'rgba(255,255,255,0.52)',
          maxWidth: 480, marginBottom: 0,
          borderLeft: '2px solid rgba(255,255,255,0.14)',
          paddingLeft: 20,
        }}>
          {coffee.description}
        </p>

        <div style={s.rule} />

        {/* Specs grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', rowGap: 20, columnGap: 40, marginBottom: 0 }}>
          {[
            ['Process', coffee.process],
            ['Variety', coffee.variety],
            ['Roast Level', coffee.roastLevel],
            ['Roast Date', coffee.roastDate],
          ].map(([k, v]) => (
            <div key={k}>
              <div style={s.label}>{k}</div>
              <div style={{
                fontFamily: "'Montserrat', sans-serif",
                fontSize: 12, color: '#ffffff', letterSpacing: '0.04em',
              }}>{v}</div>
            </div>
          ))}
        </div>

        <div style={s.rule} />

        {/* Weight selector */}
        <div style={s.label}>Select Weight</div>
        <div style={{ display: 'flex', marginBottom: 24 }}>
          {GRAM_OPTIONS.map((g, i) => {
            const active = selectedGram === g;
            return (
              <button key={g}
                onClick={() => setSelectedGram(g)}
                style={{
                  flex: 1,
                  border: `1px solid rgba(255,255,255,${active ? '0.9' : '0.18'})`,
                  marginLeft: i > 0 ? '-1px' : 0,
                  background: active ? '#ffffff' : 'transparent',
                  color: active ? '#000000' : 'rgba(255,255,255,0.55)',
                  padding: '13px 6px 11px',
                  fontFamily: "'Montserrat', sans-serif",
                  fontSize: 12, cursor: 'crosshair',
                  transition: 'all 0.15s ease',
                  position: 'relative', zIndex: active ? 1 : 0,
                  letterSpacing: '0.04em',
                }}
                onMouseEnter={e => { if (!active) { e.currentTarget.style.background = 'rgba(255,255,255,0.07)'; e.currentTarget.style.color = '#ffffff'; }}}
                onMouseLeave={e => { if (!active) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgba(255,255,255,0.55)'; }}}
              >
                <div>{g}</div>
                <div style={{ fontSize: 12, marginTop: 3, color: active ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.35)' }}>
                  ${coffee.prices[g]}
                </div>
              </button>
            );
          })}
        </div>

        {/* Add to cart */}
        <button onClick={handleAdd} style={{
          width: '100%', padding: '19px 24px',
          border: `1px solid rgba(255,255,255,${added ? '0' : '0.7'})`,
          background: added ? '#ffffff' : 'transparent',
          color: added ? '#000000' : '#ffffff',
          fontFamily: "'Montserrat', sans-serif",
          fontSize: 12, letterSpacing: '0.22em',
          textTransform: 'uppercase',
          cursor: added ? 'default' : 'crosshair',
          transition: 'all 0.2s ease',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}
        onMouseEnter={e => { if (!added) { e.currentTarget.style.background = '#ffffff'; e.currentTarget.style.color = '#000000'; }}}
        onMouseLeave={e => { if (!added) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = '#ffffff'; }}}
        >
          <span>{added ? '— ADDED TO CART —' : 'ADD TO CART'}</span>
          {!added && <span style={{ fontFamily: "'Montserrat', sans-serif", fontSize: 20, fontWeight: 700, fontStyle: 'italic' }}>${price}</span>}
        </button>

      </div>

      {/* ── RIGHT PANEL: Altitude Meter ── */}
      <div style={s.right}>
        <AltitudeMeter coffee={coffee} visible={meterVisible} animSpeed={tweaks?.animSpeed} />
      </div>

    </div>
  );
}

Object.assign(window, { ProductDetail });