// Wander — Tour detail screen

function DetailScreen({ tourId, onBack, onStart, onPaywall, dense }) {
  const { TOURS, stopsForTour } = window.WANDER_DATA;
  const tour = TOURS.find(t => t.id===tourId) || TOURS[0];
  const STOPS = stopsForTour(tour.id);
  const isPro = tour.tier==='pro';

  return (
    <div style={{ height:'100%', position:'relative', background:'var(--w-cream)', overflow:'hidden' }}>
      <div style={{ height:'100%', overflowY:'auto' }} className="no-scroll app-scroll">
        <div style={{ position:'relative' }}>
          <TourArt tour={tour} h={340} rounded={0} chipTop={108}/>
          <button onClick={onBack} style={{ position:'absolute', top:56, left:16, width:42, height:42, borderRadius:21, background:'rgba(255,253,246,0.9)', backdropFilter:'blur(10px)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 2px 8px rgba(0,0,0,0.15)' }}><Icon.back size={18}/></button>
          <button style={{ position:'absolute', top:56, right:16, width:42, height:42, borderRadius:21, background:'rgba(255,253,246,0.9)', backdropFilter:'blur(10px)', border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 2px 8px rgba(0,0,0,0.15)' }}><Icon.heart size={18}/></button>
        </div>

        <div style={{ background:'var(--w-cream)', borderRadius:'28px 28px 0 0', marginTop:-28, position:'relative', padding:'24px 22px 160px' }}>
          <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:12 }}>
            {tour.formats.map(f => (
              <span key={f} className="w-chip w-chip--ghost" style={{ background:'var(--w-paper)' }}>{formatIcon(f,12,'var(--w-slate)')} {f.toUpperCase()}</span>
            ))}
          </div>
          <h1 className="t-display" style={{ fontSize:30, lineHeight:1.18, margin:0, marginBottom:14, color:'var(--w-ink)' }}>{tour.title}</h1>
          <div style={{ fontSize:15, color:'var(--w-slate)', fontStyle:'italic', fontFamily:'var(--w-display)' }}>{tour.subtitle}</div>

          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8, marginTop:18, background:'var(--w-paper)', borderRadius:18, padding:14, boxShadow:'inset 0 0 0 1px var(--w-line)' }}>
            <Stat label="Duration" value={tour.duration}/>
            <Stat label="Distance" value={tour.distance}/>
            <Stat label="Stops" value={tour.stops}/>
          </div>

          <div style={{ marginTop:20, display:'flex', alignItems:'center', gap:10 }}>
            <Rating value={tour.rating} reviews={tour.reviews} size={14}/>
            <span style={{ fontSize:13, color:'var(--w-mute)' }}>· By Local Storytellers</span>
          </div>

          <p style={{ fontSize:15.5, lineHeight:1.55, color:'var(--w-slate)', marginTop:18 }}>{tour.blurb}</p>

          <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:18, padding:14, borderRadius:18, background:'var(--w-yellow-soft)' }}>
            <div style={{ width:44, height:44, borderRadius:22, background:'linear-gradient(135deg,#FFC93C,#F5A623)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:22 }}>👩‍🎨</div>
            <div style={{ flex:1 }}>
              <div style={{ fontWeight:700, fontSize:14 }}>Narrated by Mei Ling Ho</div>
              <div style={{ fontSize:12, color:'var(--w-slate)' }}>Singapore-based historian · 23 tours</div>
            </div>
          </div>

          <OfflineDownloadCard tour={tour}/>

          {/* Audio player preview if narration is uploaded */}
          {tour.audio_url && (
            <div style={{ marginTop:18, padding:14, borderRadius:18, background:'var(--w-paper)', boxShadow:'var(--sh-card)' }}>
              <div style={{ fontSize:12, fontWeight:700, color:'var(--w-mute)', textTransform:'uppercase', letterSpacing:0.5, marginBottom:10 }}>Audio preview</div>
              <audio controls style={{ width:'100%', height:40 }} src={tour.audio_url}/>
            </div>
          )}

          <div className="t-display" style={{ fontSize:22, fontWeight:600, marginTop:28, marginBottom:12 }}>Stops on this walk</div>
          <div style={{ position:'relative' }}>
            <div style={{ position:'absolute', left:19, top:22, bottom:22, width:2, backgroundImage:'repeating-linear-gradient(to bottom,var(--w-line) 0 4px,transparent 4px 8px)' }}/>
            {STOPS.map((s,i) => (
              <div key={s.id} style={{ display:'flex', gap:14, padding:dense?'10px 0':'12px 0', position:'relative' }}>
                <div style={{ width:40, height:40, borderRadius:20, flexShrink:0, background:i===0?'var(--w-yellow)':'var(--w-paper)', boxShadow:'inset 0 0 0 1.5px var(--w-line)', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:14, color:i===0?'var(--w-yellow-ink)':'var(--w-ink)', zIndex:1 }}>{i+1}</div>
                <div style={{ flex:1, paddingTop:6 }}>
                  <div style={{ fontWeight:700, fontSize:15 }}>{s.name}</div>
                  <div style={{ fontSize:12.5, color:'var(--w-mute)', marginTop:2 }}>{s.dist} · {s.duration}</div>
                  {s.blurb && <div style={{ fontSize:13, color:'var(--w-slate)', marginTop:5, lineHeight:1.4 }}>{s.blurb}</div>}
                </div>
              </div>
            ))}
          </div>

          {isPro && (
            <div style={{ marginTop:22, padding:18, borderRadius:22, background:'var(--w-ink)', color:'var(--w-paper)' }}>
              <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:12, fontWeight:700, color:'var(--w-yellow)', letterSpacing:0.4, textTransform:'uppercase' }}>
                <Icon.sparkle size={12} color="var(--w-yellow)"/> Pro tour includes
              </div>
              <div className="t-display" style={{ fontSize:20, fontWeight:600, marginTop:6, color:'var(--w-paper)' }}>The full story, not the postcard.</div>
              <ul style={{ margin:'12px 0 0', padding:0, listStyle:'none', display:'grid', gap:8 }}>
                {['Narration by a local historian','Hidden side-stops only locals know','AR overlays at key landmarks','Offline download for the whole route'].map(t => (
                  <li key={t} style={{ display:'flex', gap:10, alignItems:'flex-start', fontSize:14, color:'rgba(250,246,236,0.85)' }}>
                    <div style={{ marginTop:4, width:6, height:6, borderRadius:3, background:'var(--w-yellow)', flexShrink:0 }}/>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </div>

      <div style={{ position:'absolute', bottom:0, left:0, right:0, padding:'14px 20px 30px', background:'linear-gradient(to top,var(--w-cream) 60%,rgba(250,246,236,0))' }}>
        {isPro
          ? <button onClick={()=>onPaywall(tour.id)} className="w-btn" style={{ width:'100%', height:56 }}><Icon.sparkle size={16} color="var(--w-yellow-ink)"/> Unlock for ${tour.price} · or go Pro</button>
          : <button onClick={()=>onStart(tour.id)} className="w-btn" style={{ width:'100%', height:56 }}><Icon.play size={16} color="var(--w-yellow-ink)"/> Start free tour</button>
        }
      </div>
    </div>
  );
}

function Stat({ label, value }) {
  return (
    <div style={{ textAlign:'center' }}>
      <div className="t-display" style={{ fontSize:18, fontWeight:600, color:'var(--w-ink)' }}>{value}</div>
      <div style={{ fontSize:11, color:'var(--w-mute)', textTransform:'uppercase', letterSpacing:0.4, fontWeight:600, marginTop:2 }}>{label}</div>
    </div>
  );
}

// Download-for-offline control. Caches the app + this tour over Wi-Fi so it
// plays with no signal on-site. Narration is on-device, so downloads are tiny.
function OfflineDownloadCard({ tour }) {
  const off = window.WanderOffline;
  const ok = off && off.supported();
  const [state, setState] = React.useState(() => (ok && off.has(tour.id)) ? 'done' : 'idle');
  const [pct, setPct] = React.useState(0);

  if (!ok) return null;

  const start = async () => {
    setState('downloading'); setPct(0);
    try {
      await off.download(tour.id, p => setPct(p));
      setState('done');
    } catch {
      setState('idle');
    }
  };
  const undo = async () => { await off.remove(tour.id); setState('idle'); setPct(0); };

  const base = { marginTop:18, padding:14, borderRadius:18, display:'flex', alignItems:'center', gap:12 };

  if (state === 'done') {
    return (
      <div style={{ ...base, background:'var(--w-paper)', boxShadow:'inset 0 0 0 1px var(--w-line)' }}>
        <div style={{ width:40, height:40, borderRadius:20, background:'var(--w-mint-soft,rgba(45,212,167,0.16))', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon.check size={18} color="var(--w-mint)"/>
        </div>
        <div style={{ flex:1 }}>
          <div style={{ fontWeight:700, fontSize:14 }}>Available offline</div>
          <div style={{ fontSize:12, color:'var(--w-slate)' }}>Plays without signal on-site.</div>
        </div>
        <button onClick={undo} style={{ height:34, padding:'0 12px', borderRadius:17, border:'none', cursor:'pointer', background:'var(--w-cream)', boxShadow:'inset 0 0 0 1px var(--w-line)', fontFamily:'inherit', fontWeight:700, fontSize:12, color:'var(--w-slate)' }}>Remove</button>
      </div>
    );
  }

  if (state === 'downloading') {
    return (
      <div style={{ ...base, background:'var(--w-paper)', boxShadow:'var(--sh-card)', flexDirection:'column', alignItems:'stretch', gap:8 }}>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize:13, fontWeight:700 }}>
          <span>Downloading for offline…</span><span style={{ color:'var(--w-mute)' }}>{Math.round(pct*100)}%</span>
        </div>
        <div style={{ height:6, background:'var(--w-line)', borderRadius:3, overflow:'hidden' }}>
          <div style={{ width:(pct*100)+'%', height:'100%', background:'var(--w-yellow)', transition:'width .2s' }}/>
        </div>
      </div>
    );
  }

  return (
    <button onClick={start} style={{ ...base, width:'100%', background:'var(--w-yellow-soft)', border:'none', cursor:'pointer', fontFamily:'inherit', textAlign:'left' }}>
      <div style={{ width:40, height:40, borderRadius:20, background:'var(--w-paper)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:18 }}>⤓</div>
      <div style={{ flex:1 }}>
        <div style={{ fontWeight:700, fontSize:14, color:'var(--w-yellow-ink)' }}>Download for offline</div>
        <div style={{ fontSize:12, color:'var(--w-yellow-ink)', opacity:0.8 }}>Save over Wi-Fi · works with no signal</div>
      </div>
    </button>
  );
}

Object.assign(window, { DetailScreen });