// Shared screen shell (header w/ back) + Directions screen
const { useState: useStateDir } = React;

function ScreenShell({ title, kicker, onBack, children, pad = true }) {
  return (
    <div style={shellStyles.wrap}>
      <header style={shellStyles.header}>
        <button onClick={onBack} style={shellStyles.backBtn} aria-label="Geri">
          <Icons.ArrowLeft size={20} />
        </button>
        <div style={{textAlign:'right'}}>
          {kicker && <div className="label-sm" style={{opacity:0.65}}>{kicker}</div>}
        </div>
      </header>
      <div style={{padding: pad ? '0 24px 60px' : '0'}}>
        {title && (
          <h1 className="hand" style={shellStyles.title}>{title}</h1>
        )}
        {children}
      </div>
    </div>
  );
}

window.ScreenShell = ScreenShell;

const shellStyles = {
  wrap:{minHeight:'100dvh', paddingBottom:30},
  header:{
    display:'flex',alignItems:'center',justifyContent:'space-between',
    padding:'22px 20px 12px',
  },
  backBtn:{
    width:42,height:42,borderRadius:999,
    border:'1.5px solid rgba(255,185,201,0.4)',
    display:'flex',alignItems:'center',justifyContent:'center',
  },
  title:{
    fontSize:52,
    lineHeight:0.95,
    color:'var(--pink)',
    margin:'10px 0 18px',
  },
};

/* -------------------- Directions screen -------------------- */
function Directions({ onBack }) {
  const [tab, setTab] = useStateDir('dugun');
  const data = {
    nikah: {
      title: 'Nikah',
      venue: 'Üsküdar Belediyesi',
      sub: 'Evlendirme Dairesi · Salon 1 · Kat 1',
      address: 'Mimar Sinan Mah. Hâkimiyet-i Milliye Cad. No:35, Üsküdar / İstanbul',
      when: '25 Haziran 2026 · Perşembe · 14:00',
      tips: [
        'Salon 1\'in girişi binanın yan kapısından. Lobiden değil.',
        'Otopark çok sınırlı. Marmaray (Üsküdar) 6 dk yürüme mesafesinde.',
        'Töreni 20 dk içinde tamamlıyoruz; lütfen 13:45\'te içeride olun.',
      ],
      maps: 'https://maps.google.com/?q=Üsküdar+Belediyesi+Evlendirme+Dairesi',
    },
    dugun: {
      title: 'Düğün',
      venue: 'Çamlıköşk',
      sub: 'Fatih Sultan Mehmet Mesire Alanı · Ümraniye',
      address: 'Esenşehir Mah. Fatih Sultan Mehmet Mesire Alanı, Ümraniye / İstanbul',
      when: '27 Haziran 2026 · Cumartesi · 19:00',
      tips: [
        'GPS\'te "Çamlıköşk" araması net sonuç veriyor.',
        'Mesire alanı içinde valets sizi karşılayacak; tabela "B & E" yazıyor.',
        'Topuklu için yumuşak çim alan var; spare bir ayakkabı fena fikir değil ✷',
      ],
      maps: 'https://maps.google.com/?q=Çamlıköşk+Fatih+Sultan+Mehmet+Mesire+Alanı+Ümraniye',
    },
  }[tab];

  return (
    <ScreenShell onBack={onBack} kicker="01 · YOL TARİFİ" title="nereye geleceksin">
      {/* Tab switch */}
      <div style={dirStyles.tabs}>
        <button onClick={() => setTab('nikah')} style={dirStyles.tab(tab==='nikah')}>
          <span className="label">Nikah</span>
        </button>
        <button onClick={() => setTab('dugun')} style={dirStyles.tab(tab==='dugun')}>
          <span className="label">Düğün</span>
        </button>
      </div>

      {/* Map placeholder */}
      <div style={dirStyles.mapBox}>
        <MapDoodle highlight={tab} />
        <div style={dirStyles.mapPin}>
          <div style={{
            width:18,height:18,borderRadius:999,
            background:'var(--burgundy)', border:'3px solid var(--pink)',
            boxShadow:'0 0 0 6px rgba(255,185,201,0.3)',
          }}/>
        </div>
        <div style={dirStyles.mapTag}>
          <Icons.Pin size={14} />
          <span className="label-sm">{data.venue.toUpperCase()}</span>
        </div>
      </div>

      {/* Title + address */}
      <div style={{marginTop:22}}>
        <div className="label" style={{opacity:0.7}}>{tab === 'nikah' ? 'NİKAH ADRESİ' : 'DÜĞÜN ADRESİ'}</div>
        <div className="hand" style={{fontSize:36, lineHeight:1, margin:'8px 0 6px'}}>{data.venue}</div>
        <div className="body-sm" style={{opacity:0.82, marginBottom:14}}>{data.sub}</div>
        <div style={dirStyles.addressBox}>
          <div className="body-sm" style={{lineHeight:1.5}}>{data.address}</div>
        </div>
      </div>

      {/* When */}
      <div style={dirStyles.row}>
        <Icons.Cal size={16}/>
        <span className="label">{data.when}</span>
      </div>

      {/* Tips */}
      <div style={{marginTop:24}}>
        <div className="label" style={{opacity:0.7, marginBottom:10}}>NOTLAR</div>
        {data.tips.map((t, i) => (
          <div key={i} style={dirStyles.tip}>
            <div style={dirStyles.tipDot}>
              <span className="hand" style={{fontSize:18,lineHeight:1,color:'var(--burgundy)'}}>{i+1}</span>
            </div>
            <div className="body-sm" style={{flex:1, opacity:0.92}}>{t}</div>
          </div>
        ))}
      </div>

      {/* Buttons */}
      <div style={{display:'flex',flexDirection:'column',gap:10,marginTop:28}}>
        <a href={data.maps} target="_blank" rel="noopener noreferrer" style={dirStyles.primary}>
          <Icons.Pin size={18}/>
          <span className="label">Google Maps'te Aç</span>
        </a>
        <a href={data.maps.replace('maps.google.com','maps.apple.com')} target="_blank" rel="noopener noreferrer" style={dirStyles.secondary}>
          <Icons.Arrow size={18}/>
          <span className="label">Apple Maps</span>
        </a>
      </div>
    </ScreenShell>
  );
}

function MapDoodle({ highlight }) {
  // Stylized hand-drawn map illustration
  return (
    <svg viewBox="0 0 400 260" style={{width:'100%',height:'100%',display:'block'}} preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="260" fill="var(--burgundy)"/>
      <g stroke="var(--pink)" strokeWidth="1.2" fill="none" opacity="0.35">
        {/* Grid streets */}
        <path d="M0 60 L 400 60"/>
        <path d="M0 130 L 400 130"/>
        <path d="M0 200 L 400 200"/>
        <path d="M80 0 L 80 260"/>
        <path d="M180 0 L 180 260"/>
        <path d="M290 0 L 290 260"/>
      </g>
      <g stroke="var(--pink)" strokeWidth="2.4" fill="none" opacity="0.85" strokeLinecap="round" strokeLinejoin="round">
        {/* Main road */}
        <path d="M0 165 C 80 140, 180 195, 260 150 S 380 110, 400 140"/>
        {/* Bosphorus / water hint */}
        <path d="M0 240 Q 100 220, 200 240 T 400 230" strokeWidth="1.4" opacity="0.55"/>
      </g>
      {/* Buildings */}
      <g fill="var(--pink)" opacity="0.18">
        <rect x="40" y="78" width="22" height="34" rx="2"/>
        <rect x="220" y="80" width="36" height="42" rx="2"/>
        <rect x="320" y="175" width="28" height="30" rx="2"/>
        <rect x="100" y="180" width="50" height="20" rx="2"/>
      </g>
      <text x="20" y="40" fill="var(--pink)" opacity="0.55" fontFamily="Permanent Marker" fontSize="14">
        {highlight === 'nikah' ? 'Üsküdar' : 'Ümraniye'}
      </text>
    </svg>
  );
}

const dirStyles = {
  tabs:{
    display:'flex',
    background:'rgba(255,185,201,0.1)',
    borderRadius:999,
    padding:4,
    marginBottom:18,
    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',
  }),
  mapBox:{
    position:'relative',
    height:230,
    borderRadius:22,
    overflow:'hidden',
    border:'1.5px solid rgba(255,185,201,0.3)',
  },
  mapPin:{
    position:'absolute',
    top:'42%', left:'50%',
    transform:'translate(-50%,-50%)',
  },
  mapTag:{
    position:'absolute',
    bottom:14, left:14,
    display:'flex',alignItems:'center',gap:7,
    background:'var(--pink)', color:'var(--burgundy)',
    padding:'8px 12px', borderRadius:999,
  },
  addressBox:{
    border:'1px dashed rgba(255,185,201,0.4)',
    borderRadius:14,
    padding:'12px 14px',
  },
  row:{
    display:'flex',alignItems:'center',gap:10,
    marginTop:14,
    color:'var(--pink)',opacity:0.95,
  },
  tip:{
    display:'flex',alignItems:'flex-start',gap:12,
    padding:'12px 0',
    borderTop:'1px solid rgba(255,185,201,0.15)',
  },
  tipDot:{
    width:28,height:28,borderRadius:999,
    background:'var(--pink)',
    display:'flex',alignItems:'center',justifyContent:'center',
    flexShrink:0, marginTop:2,
  },
  primary:{
    display:'flex',alignItems:'center',justifyContent:'center',gap:10,
    padding:'14px 16px', borderRadius:999,
    background:'var(--pink)', color:'var(--burgundy)',
    textDecoration:'none',
  },
  secondary:{
    display:'flex',alignItems:'center',justifyContent:'center',gap:10,
    padding:'14px 16px', borderRadius:999,
    border:'1.5px solid rgba(255,185,201,0.4)',
    color:'var(--pink)', textDecoration:'none',
  },
};

window.Directions = Directions;