// ===== SCREENS: Weather, Forum, Coach (AI), Score, Commute =====

// ---------- Weather & Roads ----------
function WeatherScreen({ t, go }) {
  const w = weather_now;
  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ borderRadius: 24, padding: 20, color: '#fff', background: `linear-gradient(135deg, ${t.blue}, ${t.mid})`, boxShadow: '0 12px 30px rgba(26,58,110,0.3)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 12.5, opacity: 0.85, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 5 }}><Icon name="location" size={13} />{w.loc}</div>
            <div style={{ fontSize: 54, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.05, marginTop: 8 }}>{w.temp}°</div>
            <div style={{ fontSize: 15, fontWeight: 700 }}>{w.cond}</div>
            <div style={{ fontSize: 12.5, opacity: 0.85, marginTop: 2 }}>Feels like {w.feels}°</div>
          </div>
          <div style={{ fontSize: 70, lineHeight: 1 }}>{w.icon}</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, marginTop: 18 }}>
          {[['Humidity', w.humidity + '%'], ['Wind', w.wind + ' km/h'], ['Visibility', w.visibility]].map(([l, v]) => (
            <div key={l} style={{ background: 'rgba(255,255,255,0.14)', borderRadius: 14, padding: '10px', textAlign: 'center' }}>
              <div style={{ fontSize: 15, fontWeight: 800 }}>{v}</div>
              <div style={{ fontSize: 10.5, opacity: 0.8, fontWeight: 600 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      <Card t={t} pad={14} style={{ background: t.danger + (t.dark ? '1f' : '12'), border: `1px solid ${t.danger}44` }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <span style={{ fontSize: 22 }}>⚠️</span>
          <div style={{ fontSize: 13, color: t.text, fontWeight: 600, lineHeight: 1.4 }}>Heavy rain advisory — roads are slippery. Increase following distance and reduce speed by 20%.</div>
        </div>
      </Card>

      <div>
        <SectionTitle t={t}>5-Day Forecast</SectionTitle>
        <Card t={t} pad={6}>
          {weather_data.map((d, i) => (
            <div key={d.day}>
              <div style={{ display: 'flex', alignItems: 'center', padding: '11px 10px', gap: 12 }}>
                <span style={{ width: 36, fontSize: 13, fontWeight: 700, color: t.text }}>{d.day}</span>
                <span style={{ fontSize: 24, width: 32, textAlign: 'center' }}>{d.icon}</span>
                <div style={{ flex: 1 }}>
                  <Badge t={t} color={d.roadColor}>Road: {d.road}</Badge>
                </div>
                <div style={{ fontSize: 13, fontWeight: 700, color: t.text }}>{d.hi}° <span style={{ color: t.subtext, fontWeight: 500 }}>{d.lo}°</span></div>
              </div>
              {i < weather_data.length - 1 && <div style={{ height: 1, background: t.border, margin: '0 10px' }} />}
            </div>
          ))}
        </Card>
      </div>

      <div>
        <SectionTitle t={t}>Road Surface Ratings</SectionTitle>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {road_surfaces.map(r => (
            <Card key={r.road} t={t} pad={13}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{r.road}</div>
                  <div style={{ fontSize: 12, color: t.subtext, marginTop: 2 }}>{r.cond}</div>
                </div>
                <div style={{ display: 'flex', gap: 3 }}>
                  {[1, 2, 3, 4, 5].map(n => (
                    <span key={n} style={{ width: 7, height: 18, borderRadius: 3, background: n <= r.rating ? r.color : t.border }} />
                  ))}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- Community Forum ----------
function ForumScreen({ t, go }) {
  const [posts, setPosts] = useState(forum_posts);
  const toggle = (id) => setPosts(ps => ps.map(p => p.id === id ? { ...p, liked: !p.liked, likes: p.likes + (p.liked ? -1 : 1) } : p));
  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Card t={t} pad={13} onClick={() => {}}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
          <div style={{ fontSize: 26 }}>🚗</div>
          <div style={{ flex: 1, color: t.subtext, fontSize: 13.5, fontWeight: 500 }}>Share a road update or tip…</div>
          <div style={{ background: t.mid, color: '#fff', borderRadius: 10, width: 38, height: 38, display: 'grid', placeItems: 'center' }}><Icon name="plus" size={20} /></div>
        </div>
      </Card>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {posts.map(p => (
          <Card key={p.id} t={t} pad={15}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 11 }}>
              <div style={{ fontSize: 30, width: 44, height: 44, borderRadius: 999, background: t.inputBg, display: 'grid', placeItems: 'center' }}>{p.avatar}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{p.user}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
                  <Badge t={t} color={p.tagColor}>{p.region}</Badge>
                  <span style={{ fontSize: 11, color: t.subtext, fontWeight: 600 }}>· {p.time}</span>
                </div>
              </div>
            </div>
            <p style={{ margin: 0, fontSize: 13.5, color: t.text, lineHeight: 1.5, fontWeight: 500 }}>{p.text}</p>
            <div style={{ display: 'flex', gap: 18, marginTop: 13 }}>
              <button onClick={() => toggle(p.id)} className="no-select" style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', padding: 0, color: p.liked ? t.danger : t.subtext, fontWeight: 700, fontSize: 13 }}>
                <Icon name="heart" size={18} fill={p.liked ? t.danger : 'none'} color={p.liked ? t.danger : t.subtext} />{p.likes}
              </button>
              <button className="no-select" style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', padding: 0, color: t.subtext, fontWeight: 700, fontSize: 13 }}>
                <Icon name="reply" size={18} />{p.replies}
              </button>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ---------- AI Driving Coach ----------
function CoachScreen({ t, go }) {
  const [messages, setMessages] = useState([
    { role: 'assistant', text: "Hi! I'm your NRSA AI Driving Coach 🚗 Ask me anything about safe driving, road rules, or handling tricky situations." },
  ]);
  const [input, setInput] = useState('');
  const [busy, setBusy] = useState(false);
  const scrollRef = useRef(null);

  useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [messages, busy]);

  const send = async (text) => {
    const msg = (text || input).trim();
    if (!msg || busy) return;
    setInput('');
    setMessages(m => [...m, { role: 'user', text: msg }]);
    setBusy(true);
    try {
      const history = [...messages, { role: 'user', text: msg }]
        .map(m => `${m.role === 'user' ? 'Driver' : 'Coach'}: ${m.text}`).join('\n');
      const prompt = `You are an expert NRSA AI Driving Coach. Give concise, practical road safety advice. Be encouraging, direct, and safety-focused. Keep responses under 120 words. Use 1-2 relevant emojis.\n\nConversation so far:\n${history}\n\nReply as the Coach:`;
      const reply = await window.claude.complete(prompt);
      setMessages(m => [...m, { role: 'assistant', text: (reply || '').trim() || "Stay safe out there! Could you rephrase that?" }]);
    } catch (e) {
      setMessages(m => [...m, { role: 'assistant', text: "I'm having trouble connecting right now. Remember: stay alert, keep your distance, and buckle up! 🚗" }]);
    }
    setBusy(false);
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
      <div ref={scrollRef} className="scroll-y" style={{ flex: 1, minHeight: 0, padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {messages.map((m, i) => (
          <div key={i} style={{ display: 'flex', justifyContent: m.role === 'user' ? 'flex-end' : 'flex-start' }}>
            {m.role === 'assistant' && <div style={{ fontSize: 22, marginRight: 8, alignSelf: 'flex-end' }}>🤖</div>}
            <div style={{
              maxWidth: '78%', padding: '11px 14px', borderRadius: 18, fontSize: 13.5, lineHeight: 1.45, fontWeight: 500,
              background: m.role === 'user' ? t.navy : (t.dark ? '#222b3a' : '#eef1f7'),
              color: m.role === 'user' ? '#fff' : t.text,
              borderBottomRightRadius: m.role === 'user' ? 6 : 18,
              borderBottomLeftRadius: m.role === 'assistant' ? 6 : 18,
            }}>{m.text}</div>
          </div>
        ))}
        {busy && (
          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
            <div style={{ fontSize: 22, marginRight: 8 }}>🤖</div>
            <div style={{ padding: '13px 16px', borderRadius: 18, borderBottomLeftRadius: 6, background: t.dark ? '#222b3a' : '#eef1f7', display: 'flex', gap: 5 }}>
              {[0, 1, 2].map(i => <span key={i} style={{ width: 7, height: 7, borderRadius: 999, background: t.subtext, animation: `dotpulse 1s ${i * 0.18}s infinite` }} />)}
            </div>
          </div>
        )}
      </div>

      {/* Quick prompts */}
      <div className="scroll-x" style={{ display: 'flex', gap: 8, padding: '8px 16px' }}>
        {coach_prompts.map(q => <Pill key={q} t={t} onClick={() => send(q)} color={t.mid}>{q}</Pill>)}
      </div>

      {/* Composer */}
      <div style={{ padding: '8px 16px 12px', display: 'flex', gap: 9, alignItems: 'center', borderTop: `1px solid ${t.border}`, background: t.bg }}>
        <input value={input} onChange={e => setInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && send()}
          placeholder="Ask your coach…" style={{
            flex: 1, border: `1px solid ${t.border}`, background: t.inputBg, color: t.text,
            borderRadius: 999, padding: '12px 16px', outline: 'none', fontWeight: 500,
          }} />
        <button onClick={() => send()} disabled={busy || !input.trim()} className="no-select" style={{
          width: 46, height: 46, minWidth: 46, borderRadius: 999, border: 'none',
          background: input.trim() ? t.mid : t.border, color: '#fff', display: 'grid', placeItems: 'center',
          transition: 'background 0.2s',
        }}><Icon name="send" size={20} /></button>
      </div>
    </div>
  );
}

// ---------- Safety Score ----------
function ScoreScreen({ t, go }) {
  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Card t={t} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: 22 }}>
        <ProgressRing pct={87} size={170} stroke={16} color={t.gold} track={t.dark ? '#0d1117' : '#eef1f7'}>
          <span style={{ fontSize: 48, fontWeight: 800, color: t.text, letterSpacing: '-0.03em' }}>87</span>
          <span style={{ fontSize: 11, color: t.subtext, fontWeight: 700, letterSpacing: '0.05em' }}>SAFETY SCORE</span>
        </ProgressRing>
        <Badge t={t} color={t.success} style={{ fontSize: 12, padding: '5px 12px' }}>Excellent Driver · Top 5%</Badge>
        <div style={{ fontSize: 12.5, color: t.subtext, textAlign: 'center', lineHeight: 1.4 }}>+3 points this week. Keep braking smoothly to reach 90!</div>
      </Card>

      <div>
        <SectionTitle t={t}>Score Breakdown</SectionTitle>
        <Card t={t}>
          {score_breakdown.map((s, i) => (
            <div key={s.label} style={{ marginBottom: i < score_breakdown.length - 1 ? 14 : 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                <span style={{ fontSize: 13, fontWeight: 600, color: t.text }}>{s.label}</span>
                <span style={{ fontSize: 13, fontWeight: 800, color: s.color }}>{s.value}</span>
              </div>
              <ProgressBar pct={s.value} color={s.color} t={t} />
            </div>
          ))}
        </Card>
      </div>

      <div>
        <SectionTitle t={t}>Regional Leaderboard</SectionTitle>
        <Card t={t} pad={6}>
          {leaderboard.map((l, i) => (
            <div key={l.rank}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 10px', background: l.you ? t.gold + (t.dark ? '1f' : '14') : 'transparent', borderRadius: 12 }}>
                <span style={{ width: 24, fontSize: 14, fontWeight: 800, color: l.rank <= 3 ? t.gold : t.subtext, textAlign: 'center' }}>{l.rank <= 3 ? ['🥇','🥈','🥉'][l.rank-1] : l.rank}</span>
                <span style={{ fontSize: 26, width: 38, height: 38, borderRadius: 999, background: t.inputBg, display: 'grid', placeItems: 'center' }}>{l.avatar}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text }}>{l.name}{l.you && <span style={{ color: t.gold, fontSize: 11, marginLeft: 6 }}>YOU</span>}</div>
                  <div style={{ fontSize: 11.5, color: t.subtext, fontWeight: 500 }}>{l.region}</div>
                </div>
                <span style={{ fontSize: 17, fontWeight: 800, color: t.text }}>{l.score}</span>
              </div>
              {i < leaderboard.length - 1 && <div style={{ height: 1, background: t.border, margin: '0 10px' }} />}
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

// ---------- Commute Tracker ----------
function CommuteScreen({ t, go }) {
  const [heatmap, setHeatmap] = useState(false);
  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Card t={t} pad={0} style={{ position: 'relative' }}>
        <TrafficMap t={t} heatmap={heatmap} />
        <button onClick={() => setHeatmap(h => !h)} className="no-select" style={{
          position: 'absolute', top: 12, right: 12, background: t.card, border: `1px solid ${t.border}`,
          borderRadius: 999, padding: '8px 13px', fontSize: 12, fontWeight: 700, color: t.text, minHeight: 36,
          display: 'flex', alignItems: 'center', gap: 6, boxShadow: t.shadow,
        }}>🔥 Heatmap {heatmap ? 'On' : 'Off'}</button>
      </Card>

      <SectionTitle t={t} action={<button onClick={() => go('Buddy')} className="no-select" style={{ background: 'none', border: 'none', color: t.mid, fontSize: 12.5, fontWeight: 700 }}>+ Add Route</button>}>Saved Routes</SectionTitle>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {commute_routes.map(r => (
          <Card key={r.id} t={t} pad={15}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
              <IconTile icon={r.icon} color={t.mid} t={t} size={46} fontSize={22} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{r.name}</div>
                <div style={{ fontSize: 12, color: t.subtext, marginTop: 2 }}>{r.from} → {r.to}</div>
              </div>
              <Badge t={t} color={r.trafficColor}>{r.traffic}</Badge>
            </div>
            <div style={{ display: 'flex', gap: 10, marginBottom: 13 }}>
              <div style={{ flex: 1, background: t.inputBg, borderRadius: 12, padding: '9px 12px' }}>
                <div style={{ fontSize: 10.5, color: t.subtext, fontWeight: 600 }}>Distance</div>
                <div style={{ fontSize: 15, fontWeight: 800, color: t.text }}>{r.dist}</div>
              </div>
              <div style={{ flex: 1, background: t.inputBg, borderRadius: 12, padding: '9px 12px' }}>
                <div style={{ fontSize: 10.5, color: t.subtext, fontWeight: 600 }}>Est. Time</div>
                <div style={{ fontSize: 15, fontWeight: 800, color: r.trafficColor }}>{r.eta}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              <Btn t={t} full color={t.mid} style={{ minHeight: 44, fontSize: 13.5 }} icon="play">Start Trip</Btn>
              <Btn t={t} color={t.warn} variant="soft" style={{ minHeight: 44, fontSize: 13.5 }} icon="bell">Alert</Btn>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { WeatherScreen, ForumScreen, CoachScreen, ScoreScreen, CommuteScreen });