/* OnSumn — Taste Profile (first-visit full-screen quiz) */

const TASTE_VIBES = ['Concerts', 'Cards', 'Art', 'Food', 'Culture'];
const TASTE_SOUNDS = ['EDM', 'R&B', 'Hip-Hop', 'Rock', 'Jazz', 'Classical', 'Latin', 'Indie'];

const VIBE_COLORS = {
  'Concerts': '#D57800',
  'Cards': '#7A99AC',
  'Art': '#FF4F00',
  'Food': '#395542',
  'Culture': '#5A7A68',
};

const SOUND_COLORS = {
  'EDM': '#FF4F00',
  'R&B': '#D57800',
  'Hip-Hop': '#5A7A68',
  'Rock': '#7A99AC',
  'Jazz': '#D57800',
  'Classical': '#395542',
  'Latin': '#FF4F00',
  'Indie': '#7A99AC',
};

/* ── Chip component (reuses SelectorChips pattern) ── */
function TasteChip({ label, isSelected, color, darkMode, onClick }) {
  return (
    <button onClick={onClick} style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      gap: 6, padding: '12px 22px', minHeight: 48,
      borderRadius: 100,
      fontSize: 14, fontWeight: 700, fontFamily: 'var(--font-body)',
      letterSpacing: '0.04em', textTransform: 'uppercase',
      cursor: 'pointer',
      border: isSelected ? `2px solid ${color}` : '2px solid rgba(255,255,255,0.12)',
      background: isSelected ? color : 'rgba(255,255,255,0.04)',
      color: isSelected ? '#fff' : 'rgba(255,255,255,0.6)',
      transition: 'all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)',
      transform: isSelected ? 'scale(1.05)' : 'scale(1)',
      boxShadow: isSelected ? `0 4px 16px ${color}44` : 'none',
    }}>
      <span>{label}</span>
      <span style={{
        display: 'inline-flex', alignItems: 'center',
        width: isSelected ? 16 : 0,
        opacity: isSelected ? 1 : 0,
        overflow: 'hidden',
        transition: 'width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s',
      }}>
        <svg width="16" height="16" viewBox="0 0 20 20" fill="none"
          style={{
            transform: isSelected ? 'scale(1)' : 'scale(0)',
            transition: 'transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)',
          }}>
          <path d="M5 10.5L9 14.5L15 7.5" stroke="#fff" strokeWidth="2.5"
            strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
    </button>
  );
}

/* ── Full-screen taste profile overlay ── */
function TasteProfileOverlay({ darkMode, onComplete }) {
  const [vibes, setVibes] = React.useState([]);
  const [sounds, setSounds] = React.useState([]);
  const [fadeOut, setFadeOut] = React.useState(false);

  const toggleVibes = (v) => setVibes(prev =>
    prev.includes(v) ? prev.filter(x => x !== v) : [...prev, v]
  );
  const toggleSounds = (s) => setSounds(prev =>
    prev.includes(s) ? prev.filter(x => x !== s) : [...prev, s]
  );

  const handleSubmit = () => {
    const taste = { vibes, sounds, timestamp: Date.now() };
    localStorage.setItem('onsumn-taste', JSON.stringify(taste));
    setFadeOut(true);
    setTimeout(() => onComplete(taste), 400);
  };

  const handleSkip = () => {
    localStorage.setItem('onsumn-taste', JSON.stringify({ vibes: [], sounds: [], skipped: true, timestamp: Date.now() }));
    setFadeOut(true);
    setTimeout(() => onComplete(null), 400);
  };

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 99999,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      padding: '48px 24px',
      background: 'radial-gradient(ellipse at 30% 20%, rgba(213,120,0,0.1) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(255,79,0,0.06) 0%, transparent 50%), #0A0A0A',
      opacity: fadeOut ? 0 : 1,
      transition: 'opacity 0.4s ease',
      overflowY: 'auto',
    }}>
      {/* Ambient glow */}
      <div style={{
        position: 'absolute', top: '-10%', left: '-5%',
        width: 400, height: 400, borderRadius: '50%',
        background: 'rgba(206,128,73,0.12)', filter: 'blur(120px)',
        mixBlendMode: 'color-dodge', pointerEvents: 'none',
      }} />

      <div style={{
        position: 'relative', zIndex: 2,
        maxWidth: 560, width: '100%', textAlign: 'center',
      }}>
        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(32px, 5vw, 48px)',
          fontWeight: 800, letterSpacing: '-0.03em',
          color: '#fff', marginBottom: 12, lineHeight: 1.1,
        }}>What Are You Into?</h1>

        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 16,
          color: 'rgba(255,255,255,0.45)',
          marginBottom: 40, lineHeight: '24px',
        }}>Pick what sounds good. We'll put the right events in front of you.</p>

        {/* Vibes */}
        <div style={{ marginBottom: 28 }}>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.3)', marginBottom: 12,
          }}>Vibe</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center' }}>
            {TASTE_VIBES.map(v => (
              <TasteChip key={v} label={v} isSelected={vibes.includes(v)}
                color={VIBE_COLORS[v]} darkMode={true} onClick={() => toggleVibes(v)} />
            ))}
          </div>
        </div>

        {/* Sounds */}
        <div style={{ marginBottom: 36 }}>
          <div style={{
            fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'rgba(255,255,255,0.3)', marginBottom: 12,
          }}>Sound</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center' }}>
            {TASTE_SOUNDS.map(s => (
              <TasteChip key={s} label={s} isSelected={sounds.includes(s)}
                color={SOUND_COLORS[s]} darkMode={true} onClick={() => toggleSounds(s)} />
            ))}
          </div>
        </div>

        {/* CTA */}
        <button onClick={handleSubmit} style={{
          display: 'inline-block', padding: '16px 48px',
          borderRadius: 100,
          background: 'var(--international-orange)', color: '#fff',
          fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 700,
          letterSpacing: '0.03em', textTransform: 'uppercase',
          border: 'none', cursor: 'pointer',
          boxShadow: '0 4px 24px rgba(255,79,0,0.35)',
          transition: 'transform 0.2s, box-shadow 0.2s',
        }}
        onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(255,79,0,0.45)'; }}
        onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 4px 24px rgba(255,79,0,0.35)'; }}
        >Let's Get It</button>

        <a onClick={handleSkip} style={{
          display: 'block', marginTop: 20,
          fontFamily: 'var(--font-body)', fontSize: 13,
          color: 'rgba(255,255,255,0.25)',
          cursor: 'pointer', textDecoration: 'none',
          transition: 'color 0.2s',
        }}
        onMouseEnter={e => e.currentTarget.style.color = 'rgba(255,255,255,0.5)'}
        onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.25)'}
        >Skip — show me everything</a>
      </div>
    </div>
  );
}

/* ── Helper: get saved taste from localStorage ── */
function getSavedTaste() {
  try {
    const raw = localStorage.getItem('onsumn-taste');
    return raw ? JSON.parse(raw) : null;
  } catch { return null; }
}

/* ── Helper: compute taste boost for an event ── */
function tasteBoost(event, taste) {
  if (!taste || taste.skipped) return 0;
  let boost = 0;

  // Category/vibe match
  if (taste.vibes && taste.vibes.length > 0) {
    if (taste.vibes.some(v => v.toUpperCase() === event.category)) boost += 20;
  }

  // Sub-genre/sound match
  if (taste.sounds && taste.sounds.length > 0 && event.subgenres && event.subgenres.length > 0) {
    const matches = taste.sounds.filter(s => event.subgenres.includes(s));
    boost += matches.length * 15;
  }

  return boost;
}

window.TasteProfileOverlay = TasteProfileOverlay;
window.getSavedTaste = getSavedTaste;
window.tasteBoost = tasteBoost;
window.TASTE_SOUNDS = TASTE_SOUNDS;
window.SOUND_COLORS = SOUND_COLORS;