// DJ Malik screen — bio + setlist + playlist
const { useState: useStateDj } = React;

const SETLIST = [
  { time:'19:30', label:'Karşılama', vibe:'Yumuşak başlangıç', tracks:['Açılış mix · enstrümantal','Eski türkçe pop · gözlerine','Cazlı yemek seti'] },
  { time:'20:30', label:'Yemek', vibe:'Konuşulabilir', tracks:['Akustik mix','Bossa nova','Düşük tempo lounge'] },
  { time:'21:30', label:'İlk Dans', vibe:'O an', tracks:['Sürpriz şarkı (sadece DJ Malik biliyor)'] },
  { time:'22:00', label:'Pist Açılır', vibe:'Energy up', tracks:['Türkçe rap · 2020 sonrası','2010\'lar pop hits','90\'lar nostalji'] },
  { time:'23:00', label:'Tepe', vibe:'Çıldır', tracks:['Mahalle setleri','House drop\'lar','Misafirlerden gelen istekler'] },
  { time:'00:00', label:'Kapanış', vibe:'Romantik son', tracks:['Slow karışım','Gel beni de götür','Veda şarkısı'] },
];

const REQUESTS = [
  'Tarkan · Şımarık',
  'Sezen Aksu · Hadi Bakalım',
  'Mor ve Ötesi · Bir Derdim Var',
  'Ezhel · Geceler',
  'Reynmen · Tabi Tabi',
  'Manga · Bir Kadın Çizeceksin',
];

function Dj({ onBack }) {
  const [tab, setTab] = useStateDj('set');

  return (
    <ScreenShell onBack={onBack} kicker="DJ BOOTH" title="" pad={false}>
      <div style={{padding:'0 24px 4px'}}>
        <h1 className="hand" style={{fontSize:54,lineHeight:0.95,margin:'10px 0 4px'}}>dj malik</h1>
        <div className="label" style={{opacity:0.7, marginBottom:14}}>
          Beyza'nın yeğeni · 11 yaşında · Tehlikeli
        </div>
      </div>

      {/* Big DJ photo */}
      <div style={djStyles.hero}>
        <DjBigPortrait/>
        <div style={djStyles.heroOverlay}>
          <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
            <Tag>RES1DENT</Tag>
            <Tag>SAAT 19:30 → 00:00</Tag>
            <Tag>İSTEK ALIR</Tag>
          </div>
        </div>
      </div>

      <div style={{padding:'18px 24px'}}>
        <div className="body-sm" style={{opacity:0.88, lineHeight:1.55}}>
          Beyza'nın ablasının oğlu. 4 yaşında piyanoyla başladı, 8'inde DJ setini babasına ezberden anlattı.
          Düğünümüzü duyunca "amca bu benim, ben yaparım" dedi. Yapıyor. Resmi olarak.
        </div>

        {/* Tabs */}
        <div style={djStyles.tabs}>
          <button onClick={() => setTab('set')} style={djStyles.tab(tab==='set')}>
            <span className="label">Setlist</span>
          </button>
          <button onClick={() => setTab('req')} style={djStyles.tab(tab==='req')}>
            <span className="label">İstek At</span>
          </button>
        </div>

        {tab === 'set' && (
          <div style={{marginTop:18}}>
            {SETLIST.map((s, i) => (
              <div key={i} style={djStyles.setRow}>
                <div style={{
                  width:64, textAlign:'center', flexShrink:0,
                }}>
                  <div className="hand" style={{fontSize:22, lineHeight:1, color:'var(--pink)'}}>{s.time}</div>
                  <div className="label-sm" style={{opacity:0.6, marginTop:4}}>{s.vibe}</div>
                </div>
                <div style={djStyles.setDivider}>
                  <div style={{width:10,height:10,borderRadius:999,background:'var(--pink)'}}/>
                  <div style={{flex:1, width:2, background:'rgba(255,185,201,0.25)'}}/>
                </div>
                <div style={{flex:1, paddingBottom:18}}>
                  <div className="hand" style={{fontSize:24, lineHeight:1, marginBottom:6}}>{s.label}</div>
                  {s.tracks.map((t, j) => (
                    <div key={j} className="body-sm" style={{opacity:0.85, lineHeight:1.5, padding:'2px 0'}}>
                      · {t}
                    </div>
                  ))}
                </div>
              </div>
            ))}

            <button style={djStyles.spotifyBtn}>
              <Icons.Spotify size={20}/>
              <div style={{flex:1, textAlign:'left'}}>
                <div className="label">Spotify Listesini Aç</div>
                <div className="label-sm" style={{opacity:0.7, marginTop:2}}>BEYZA & EMIN · OFFICIAL DJ MALIK MIX</div>
              </div>
              <Icons.Arrow size={16}/>
            </button>
          </div>
        )}

        {tab === 'req' && (
          <div style={{marginTop:18}}>
            <p className="body-sm" style={{opacity:0.85, marginBottom:14}}>
              Çalmasını istediğin şarkıyı yaz. DJ Malik kendi süzgecinden geçirecek (uyarı: bazıları geri çevriliyor).
            </p>
            <div style={{display:'flex',gap:8,marginBottom:18}}>
              <input
                placeholder="sanatçı · şarkı"
                style={djStyles.input}
              />
              <button style={djStyles.send}>
                <Icons.Arrow size={18}/>
              </button>
            </div>

            <div className="label" style={{opacity:0.7, marginBottom:10}}>BUGÜN GELEN İSTEKLER</div>
            {REQUESTS.map((r, i) => (
              <div key={i} style={djStyles.reqRow}>
                <div className="body-sm" style={{flex:1}}>{r}</div>
                {i < 3 ? (
                  <span style={djStyles.reqBadge('ok')}>onaylandı</span>
                ) : i === 3 ? (
                  <span style={djStyles.reqBadge('queue')}>kuyrukta</span>
                ) : (
                  <span style={djStyles.reqBadge('no')}>iptal</span>
                )}
              </div>
            ))}
          </div>
        )}
      </div>
    </ScreenShell>
  );
}

function DjBigPortrait() {
  return (
    <div style={{
      width:'100%', aspectRatio:'5/4',
      background:'linear-gradient(160deg, #FFD7DE 0%, #FFB9C9 40%, #A23A55 100%)',
      position:'relative', overflow:'hidden',
    }}>
      <svg viewBox="0 0 500 400" preserveAspectRatio="xMidYMid slice" style={{position:'absolute',inset:0,width:'100%',height:'100%'}}>
        <defs>
          <radialGradient id="dj-spot" cx="50%" cy="40%" r="60%">
            <stop offset="0%" stopColor="#FFF1F4" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="#962840" stopOpacity="0"/>
          </radialGradient>
        </defs>
        <rect width="500" height="400" fill="url(#dj-spot)"/>
        {/* Stylized DJ */}
        <g fill="#962840">
          {/* Head */}
          <circle cx="250" cy="180" r="76"/>
          {/* Body */}
          <path d="M150 320 Q 250 240, 350 320 L 350 410 L 150 410 Z"/>
          {/* Headphones */}
          <path d="M170 178 a80 80 0 0 1 160 0" fill="none" stroke="#962840" strokeWidth="18" strokeLinecap="round"/>
          <rect x="160" y="170" width="26" height="40" rx="10"/>
          <rect x="314" y="170" width="26" height="40" rx="10"/>
          {/* Turntables hint */}
          <circle cx="120" cy="370" r="36" opacity="0.4"/>
          <circle cx="380" cy="370" r="36" opacity="0.4"/>
        </g>
      </svg>
      <div style={{
        position:'absolute', bottom:12, right:14,
        fontFamily:"'Manrope',sans-serif", fontSize:9, letterSpacing:'0.22em',
        textTransform:'uppercase',
        color:'rgba(150,40,64,0.85)',
        background:'rgba(255,255,255,0.6)',
        padding:'4px 9px', borderRadius:999,
      }}>FOTOĞRAF EKLENECEK</div>
    </div>
  );
}

function Tag({ children }) {
  return (
    <span style={{
      padding:'5px 10px',
      borderRadius:999,
      background:'rgba(150,40,64,0.85)',
      color:'var(--pink)',
      fontFamily:"'Manrope',sans-serif",
      fontSize:9, letterSpacing:'0.22em',
      textTransform:'uppercase',
      backdropFilter:'blur(4px)',
    }}>{children}</span>
  );
}

const djStyles = {
  hero:{position:'relative', margin:'8px 0 0'},
  heroOverlay:{
    position:'absolute', bottom:14, left:14, right:14,
  },
  tabs:{
    display:'flex',
    background:'rgba(255,185,201,0.1)',
    borderRadius:999,
    padding:4,
    marginTop:22,
    border:'1px solid rgba(255,185,201,0.2)',
  },
  tab:(on)=>({
    flex:1,
    padding:'11px 14px',
    borderRadius:999,
    background: on ? 'var(--pink)' : 'transparent',
    color: on ? 'var(--burgundy)' : 'var(--pink)',
    transition:'all 0.2s',
  }),
  setRow:{
    display:'flex', alignItems:'flex-start', gap:14,
  },
  setDivider:{
    display:'flex', flexDirection:'column', alignItems:'center',
    paddingTop:6, alignSelf:'stretch',
  },
  spotifyBtn:{
    display:'flex', alignItems:'center', gap:14,
    width:'100%', padding:'14px 18px',
    borderRadius:18,
    background:'var(--pink)',
    color:'var(--burgundy)',
    marginTop:14,
  },
  input:{
    flex:1, background:'transparent',
    border:'1.5px solid rgba(255,185,201,0.4)',
    borderRadius:999,
    padding:'12px 18px',
    color:'var(--pink)', fontSize:14, outline:'none',
    fontFamily:"'Manrope',sans-serif",
  },
  send:{
    width:46,height:46,borderRadius:999,
    background:'var(--pink)', color:'var(--burgundy)',
    display:'flex',alignItems:'center',justifyContent:'center',
    flexShrink:0,
  },
  reqRow:{
    display:'flex',alignItems:'center',gap:10,
    padding:'12px 0',
    borderTop:'1px solid rgba(255,185,201,0.12)',
  },
  reqBadge:(k)=>{
    const map = {
      ok:{bg:'var(--pink)', col:'var(--burgundy)', txt:'ONAY'},
      queue:{bg:'transparent', col:'var(--pink)', txt:'KUYRUK', bd:'1px solid rgba(255,185,201,0.4)'},
      no:{bg:'rgba(255,185,201,0.1)', col:'rgba(255,185,201,0.55)', txt:'İPTAL'},
    };
    const m = map[k];
    return {
      padding:'4px 10px', borderRadius:999,
      background: m.bg, color: m.col,
      border: m.bd || 'none',
      fontFamily:"'Manrope',sans-serif",
      fontSize:9, letterSpacing:'0.2em', textTransform:'uppercase',
      flexShrink:0,
    };
  },
};

window.Dj = Dj;