// ===== APP: header, nav, drawer, routing, mood, dark mode, AI news =====

const SCREENS = {
  Home: { title: 'NRSA', comp: HomeScreen },
  Traffic: { title: 'Live Traffic', subtitle: 'Metro Manila · Real-time', comp: TrafficScreen },
  Courses: { title: 'Education', subtitle: 'Drive smarter, safer', comp: CoursesScreen },
  Laws: { title: 'Traffic Laws', subtitle: 'Know the rules', comp: LawsScreen },
  Emergency: { title: 'Emergency SOS', subtitle: 'Help is one tap away', comp: EmergencyScreen },
  Weather: { title: 'Weather & Roads', subtitle: 'Drive to the conditions', comp: WeatherScreen },
  Forum: { title: 'Community', subtitle: 'Drivers helping drivers', comp: ForumScreen },
  Coach: { title: 'AI Driving Coach', subtitle: 'Powered by Claude', comp: CoachScreen },
  Score: { title: 'Safety Score', subtitle: 'Your driving report card', comp: ScoreScreen },
  Commute: { title: 'Commute Tracker', subtitle: 'Plan a safer route', comp: CommuteScreen },
  Buddy: { title: 'SOS Buddy', subtitle: 'Share trips with loved ones', comp: BuddyScreen },
  Checklist: { title: 'Pre-Trip Checklist', subtitle: 'Inspect before you drive', comp: ChecklistScreen },
  Logger: { title: 'Evidence Logger', subtitle: 'Document incidents', comp: LoggerScreen },
  PoliceTips: { title: 'Know Your Rights', subtitle: 'Philippines · Enforcers', comp: PoliceTipsScreen },
  Offices: { title: 'Traffic Offices', subtitle: 'PH directory', comp: OfficesScreen },
  PHOrdinances: { title: 'PH Ordinances', subtitle: 'City-by-city rules', comp: PHOrdinancesScreen },
  Alerts: { title: 'Notifications', subtitle: 'Your latest alerts', comp: AlertsScreen },
  Profile: { title: 'My Profile', subtitle: 'Account & settings', comp: ProfileScreen },
  PWD: { title: 'PWD Assistance', subtitle: 'Accessibility & priority support', comp: PWDScreen },
  Bicycle: { title: 'Cyclist Hub', subtitle: 'Ride safe · lanes · rights', comp: BicycleScreen },
  Ebike: { title: 'E-Bike Center', subtitle: 'Classes · rules · charging', comp: EbikeScreen },
  RoadHazard: { title: 'Road Hazard Report', subtitle: 'Ibalik ang sidewalk sa mga tao', comp: RoadHazardScreen },
  CrashReport: { title: 'Crash Report', subtitle: 'Real-time intake · 24 fields', comp: CrashReportScreen },
  ResponderRegister: { title: 'Crash Responder', subtitle: 'Application & verification', comp: ResponderRegisterScreen },
  AdminConsole: { title: 'Admin Console', subtitle: 'NRSA system administration', comp: AdminConsoleScreen },
  Programs: { title: 'Programs & Campaigns', subtitle: 'NRSA · road safety initiatives', comp: ProgramsScreen },
  Donate: { title: 'Donate', subtitle: 'Support road safety', comp: DonateScreen }
};

const TABS = [
{ id: 'Home', label: 'Home', icon: 'home' },
{ id: 'Traffic', label: 'Traffic', icon: 'traffic' },
{ id: 'Courses', label: 'Learn', icon: 'learn' },
{ id: '__more', label: 'More', icon: 'grid' },
{ id: 'Emergency', label: 'SOS', icon: 'sos' }];


const DRAWER_ITEMS = [
{ id: 'Laws', icon: '⚖️', color: '#7b2d8b' },
{ id: 'Weather', icon: '🌦️', color: '#00c48c' },
{ id: 'Forum', icon: '💬', color: '#ffa502' },
{ id: 'Coach', icon: '🤖', color: '#2556a8' },
{ id: 'Score', icon: '🏆', color: '#f5a623' },
{ id: 'Commute', icon: '🛣️', color: '#ff6b2b' },
{ id: 'Buddy', icon: '👥', color: '#00c48c' },
{ id: 'Checklist', icon: '✅', color: '#1a3a6e' },
{ id: 'Logger', icon: '📍', color: '#ff4757' },
{ id: 'PoliceTips', icon: '🪪', color: '#2556a8' },
{ id: 'Offices', icon: '🏛️', color: '#7b2d8b' },
{ id: 'PHOrdinances', icon: '🏙️', color: '#ff6b2b' },
{ id: 'Alerts', icon: '🔔', color: '#ffa502' },
{ id: 'Programs', icon: '📢', color: '#2556a8' },
{ id: 'Donate', icon: '❤️', color: '#ff6b2b' },
{ id: 'CrashReport', icon: '🚨', color: '#ff4757' },
{ id: 'PWD', icon: '♿', color: '#2556a8' },
{ id: 'Bicycle', icon: '🚲', color: '#00c48c' },
{ id: 'Ebike', icon: '🛵', color: '#7b2d8b' },
{ id: 'RoadHazard', icon: '🚧', color: '#ff6b2b' },
{ id: 'Profile', icon: '🙋', color: '#00c48c' }];

const DRAWER_LABELS = {
  Laws: 'Traffic Laws', Weather: 'Weather', Forum: 'Community', Coach: 'AI Coach',
  Score: 'Safety Score', Commute: 'Commute', Buddy: 'SOS Buddy', Checklist: 'Pre-Trip',
  Logger: 'Evidence Log', PoliceTips: 'Your Rights', Offices: 'Offices',
  PHOrdinances: 'PH Ordinances', Alerts: 'Alerts', Programs: 'Programs', Donate: 'Donate', CrashReport: 'Crash Report', PWD: 'PWD Assistance', Bicycle: 'Bicycles', Ebike: 'E-Bikes', RoadHazard: 'Road Hazard', Profile: 'Profile', AdminConsole: 'Admin Console'
};

function App() {
  const [user, setUser] = useState(() => { try { return JSON.parse(localStorage.getItem('nrsa_auth')) || null; } catch (e) { return null; } });
  const [consent, setConsent] = useState(() => { const c = getConsent(); return c && c.version === CONSENT_VERSION ? c : null; });
  const [dark, setDark] = useState(() => localStorage.getItem('nrsa_dark') === '1');
  const [moodId, setMoodId] = useState(() => localStorage.getItem('nrsa_mood') || 'focused');
  const [screen, setScreen] = useState('Home');
  const [drawer, setDrawer] = useState(false);
  const [moodSheet, setMoodSheet] = useState(false);
  const [news, setNews] = useState(news_static);
  const [newsLoading, setNewsLoading] = useState(false);
  const [newsKey, setNewsKey] = useState(0);

  const t = getTheme(dark);
  const mood = MOODS.find((m) => m.id === moodId) || MOODS[0];

  useEffect(() => {localStorage.setItem('nrsa_dark', dark ? '1' : '0');}, [dark]);
  useEffect(() => {localStorage.setItem('nrsa_mood', moodId);}, [moodId]);

  const handleAuth = (u) => {
    const full = { role: 'driver', ...u };
    localStorage.setItem('nrsa_auth', JSON.stringify(full));
    setUser(full);
    setScreen(full.role === 'admin' ? 'AdminConsole' : 'Home');
    // Live mode: sync the consent captured at the gate (it needs a session).
    if (NRSAApi.isLive() && consent && !consent.synced) {
      NRSAApi.recordConsent({ privacy: !!consent.privacy, terms: !!consent.terms, marketing: !!consent.marketing, version: consent.version })
        .then(() => { const c = { ...consent, synced: true }; localStorage.setItem(CONSENT_KEY, JSON.stringify(c)); setConsent(c); })
        .catch(() => { /* will retry next login */ });
    }
  };
  const updateUser = (patch) => setUser(prev => { const next = { ...prev, ...patch }; localStorage.setItem('nrsa_auth', JSON.stringify(next)); if (NRSAApi.isLive()) NRSAApi.updateProfile(patch).catch(() => {}); return next; });
  const logout = () => { if (NRSAApi.isLive()) NRSAApi.logout().catch(() => {}); localStorage.removeItem('nrsa_auth'); setUser(null); setDrawer(false); };
  const acceptConsent = (c) => { localStorage.setItem(CONSENT_KEY, JSON.stringify(c)); setConsent(c); };
  const withdrawConsent = () => { localStorage.removeItem(CONSENT_KEY); localStorage.removeItem('nrsa_auth'); setConsent(null); setUser(null); setDrawer(false); };

  // Gate 1: no data-privacy consent yet → consent notice (RA 10173)
  if (!consent) {
    return (
      <div className="app-container no-select" style={{ background: t.bg, color: t.text, '--mood-glow': `0 0 60px 14px ${mood.glow}66` }}>
        <ConsentScreen t={t} dark={dark} onAccept={acceptConsent} />
      </div>
    );
  }

  // Gate 2: not signed in → auth flow
  if (!user) {
    return (
      <div className="app-container no-select" style={{ background: t.bg, color: t.text, '--mood-glow': `0 0 60px 14px ${mood.glow}66` }}>
        <AuthFlow t={t} dark={dark} onAuth={handleAuth} />
      </div>
    );
  }

  const go = (id) => {
    if (id === '__more') {setDrawer(true);return;}
    setDrawer(false);
    setScreen(id);
  };

  const refreshNews = async () => {
    setNewsLoading(true);
    try {
      const prompt = `Generate exactly 4 realistic road-safety news items relevant to drivers in the Philippines. Return ONLY a JSON array (no markdown, no prose). Each object: {"id":number,"tag":one of "SAFETY"/"ALERT"/"POLICY"/"TIP","tagColor":hex matching SAFETY=#ff6b2b ALERT=#ff4757 POLICY=#2556a8 TIP=#00c48c,"title":short headline,"time":like "2h ago","icon":one emoji,"summary":one sentence under 22 words}.`;
      const res = await window.claude.complete(prompt);
      const cleaned = (res || '').replace(/```json/gi, '').replace(/```/g, '').trim();
      const start = cleaned.indexOf('[');const end = cleaned.lastIndexOf(']');
      const parsed = JSON.parse(cleaned.slice(start, end + 1));
      const colorFor = { SAFETY: '#ff6b2b', ALERT: '#ff4757', POLICY: '#2556a8', TIP: '#00c48c' };
      if (Array.isArray(parsed) && parsed.length) {
        setNews(parsed.slice(0, 4).map((n, i) => ({
          id: n.id || i + 1, tag: n.tag || 'SAFETY', tagColor: n.tagColor || colorFor[n.tag] || '#2556a8',
          title: n.title || 'Road Safety Update', time: n.time || 'now', icon: n.icon || '📰', summary: n.summary || ''
        })));
        setNewsKey((k) => k + 1);
      }
    } catch (e) {/* keep existing news */}
    setNewsLoading(false);
  };

  const meta = SCREENS[screen];
  const ScreenComp = meta.comp;
  const isPrimary = TABS.some((tab) => tab.id === screen);
  const isCoach = screen === 'Coach';

  return (
    <div className="app-container no-select" style={{
      background: t.bg, color: t.text,
      '--mood-glow': `0 0 60px 14px ${mood.glow}66`,
      transition: 'background 0.25s'
    }}>
      {/* ===== Header ===== */}
      <header style={{
        background: t.headerBg, color: dark ? t.text : '#fff',
        padding: `max(10px, env(safe-area-inset-top)) 14px 12px`,
        display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0,
        position: 'sticky', top: 0, zIndex: 30,
        borderBottom: dark ? `1px solid ${t.border}` : 'none'
      }}>
        <div onClick={() => go('Home')} style={{ display: 'flex', alignItems: 'center', gap: 9, cursor: 'pointer' }}>
          <div style={{ width: 38, height: 38, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
            <img src="assets/nrsa-logo.png" alt="NRSA" style={{ width: 38, height: 38, objectFit: 'contain', display: 'block' }} />
          </div>
          <div style={{ lineHeight: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '0.02em' }}>NRSA PH</div>
            <div style={{ fontSize: 8.5, fontWeight: 600, opacity: 0.7, letterSpacing: '0.06em' }}>ROAD SAFETY APP</div>
          </div>
        </div>

        <div style={{ flex: 1 }} />

        {/* Mood pill */}
        <button onClick={() => setMoodSheet(true)} className="no-select" style={{
          display: 'flex', alignItems: 'center', gap: 6, border: `1px solid ${mood.glow}`, background: mood.glow + '22',
          borderRadius: 999, padding: '6px 11px', minHeight: 36, color: dark ? t.text : '#fff', fontWeight: 700, fontSize: 12
        }}>
          <span style={{ fontSize: 14 }}>{mood.emoji}</span>{mood.label}
        </button>

        {/* Bell */}
        <button onClick={() => go('Alerts')} className="no-select" style={{ position: 'relative', width: 36, height: 36, borderRadius: 999, border: 'none', background: dark ? t.card : 'rgba(255,255,255,0.14)', color: dark ? t.text : '#fff', display: 'grid', placeItems: 'center' }}>
          <Icon name="bell" size={19} />
          <span style={{ position: 'absolute', top: 7, right: 8, width: 8, height: 8, borderRadius: 999, background: t.accent, border: `1.5px solid ${t.headerBg}` }} />
        </button>

        {/* Dark toggle */}
        <button onClick={() => setDark((d) => !d)} className="no-select" style={{ width: 36, height: 36, borderRadius: 999, border: 'none', background: dark ? t.card : 'rgba(255,255,255,0.14)', color: dark ? t.gold : '#fff', display: 'grid', placeItems: 'center' }}>
          <Icon name={dark ? 'sun' : 'moon'} size={19} />
        </button>
      </header>

      {/* ===== Screen title bar (not for Home) ===== */}
      {screen !== 'Home' &&
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 12px 4px', flexShrink: 0 }}>
          {!isPrimary &&
        <button onClick={() => go('Home')} className="no-select" style={{ width: 38, height: 38, borderRadius: 999, border: 'none', background: t.card, color: t.text, display: 'grid', placeItems: 'center', flexShrink: 0, boxShadow: t.shadow }}>
              <Icon name="chevron-left" size={20} />
            </button>
        }
          <div style={{ paddingLeft: isPrimary ? 4 : 2 }}>
            <h1 style={{ margin: 0, fontSize: 'clamp(19px, 5.5vw, 22px)', fontWeight: 800, color: t.text, letterSpacing: '-0.02em' }}>{meta.title}</h1>
            {meta.subtitle && <p style={{ margin: '2px 0 0', fontSize: 12.5, color: t.subtext, fontWeight: 500 }}>{meta.subtitle}</p>}
          </div>
        </div>
      }

      {/* ===== Main content ===== */}
      <main className={isCoach ? '' : 'scroll-y'} style={{
        flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column',
        overflowY: isCoach ? 'hidden' : 'auto',
        paddingTop: screen === 'Home' ? 14 : 8
      }}>
        <div key={screen} className="screen-in" style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
          <ScreenComp t={t} go={go} dark={dark} setDark={setDark} user={user} onLogout={logout} updateUser={updateUser} consent={consent} onWithdrawConsent={withdrawConsent}
          news={news} newsKey={newsKey} onRefreshNews={refreshNews} newsLoading={newsLoading} mood={mood} />
        </div>
        {!isCoach && <div style={{ height: 8 }} />}
      </main>

      {/* ===== Bottom nav ===== */}
      <nav className="bottom-nav" style={{
        flexShrink: 0, position: 'sticky', bottom: 0, zIndex: 30, display: 'flex', alignItems: 'center', justifyContent: 'space-around',
        background: t.navBg, backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
        borderTop: `1px solid ${t.border}`, padding: `9px 8px max(11px, env(safe-area-inset-bottom))`
      }}>
        {TABS.map((tab) => {
          const isSOS = tab.id === 'Emergency';
          const active = tab.id === screen || tab.id === '__more' && drawer;
          if (isSOS) {
            return (
              <button key={tab.id} onClick={() => go(tab.id)} className="no-select" style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, background: 'none', border: 'none', padding: '2px 6px', minWidth: 56
              }}>
                <span style={{ width: 38, height: 38, borderRadius: 999, background: t.danger, display: 'grid', placeItems: 'center', boxShadow: `0 4px 14px ${t.danger}66` }}>
                  <Icon name="sos" size={22} color="#fff" />
                </span>
                <span style={{ fontSize: 10, fontWeight: 700, color: active ? t.danger : t.subtext }}>{tab.label}</span>
              </button>);

          }
          return (
            <button key={tab.id} onClick={() => go(tab.id)} className="no-select" style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, background: 'none', border: 'none', padding: '4px 6px', minWidth: 56, minHeight: 48
            }}>
              <Icon name={tab.icon} size={23} color={active ? t.mid : t.subtext} strokeWidth={active ? 2.4 : 2} />
              <span style={{ fontSize: 10, fontWeight: active ? 800 : 600, color: active ? t.mid : t.subtext }}>{tab.label}</span>
            </button>);

        })}
      </nav>

      {/* ===== More drawer ===== */}
      {drawer &&
      <div onClick={() => setDrawer(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 40, display: 'flex', alignItems: 'flex-end', animation: 'screenIn 0.2s ease' }}>
          <div onClick={(e) => e.stopPropagation()} style={{
          width: '100%', background: t.bg, borderTopLeftRadius: 26, borderTopRightRadius: 26,
          padding: '10px 18px max(20px, env(safe-area-inset-bottom))', maxHeight: '76%', overflowY: 'auto'
        }}>
            <div style={{ width: 40, height: 4, borderRadius: 999, background: t.border, margin: '4px auto 14px' }} />
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: t.text }}>All Features</h2>
              <button onClick={() => setDrawer(false)} className="no-select" style={{ width: 34, height: 34, borderRadius: 999, border: 'none', background: t.card, color: t.text, display: 'grid', placeItems: 'center' }}><Icon name="x" size={18} /></button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }}>
              {(user.role === 'admin' ? [{ id: 'AdminConsole', icon: '🛡️', color: '#f5a623' }, ...DRAWER_ITEMS] : DRAWER_ITEMS).map((d) =>
            <button key={d.id} onClick={() => go(d.id)} className="no-select" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, background: 'none', border: 'none', padding: '6px 2px' }}>
                  <IconTile icon={d.icon} color={d.color} t={t} size={52} radius={16} fontSize={24} />
                  <span style={{ fontSize: 10.5, fontWeight: 600, color: t.text, textAlign: 'center', lineHeight: 1.15 }}>{DRAWER_LABELS[d.id] || 'Admin'}</span>
                </button>
            )}
            </div>
          </div>
        </div>
      }

      {/* ===== Mood sheet ===== */}
      {moodSheet &&
      <div onClick={() => setMoodSheet(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.45)', zIndex: 45, display: 'flex', alignItems: 'flex-end', animation: 'screenIn 0.2s ease' }}>
          <div onClick={(e) => e.stopPropagation()} style={{ width: '100%', background: t.bg, borderTopLeftRadius: 26, borderTopRightRadius: 26, padding: '10px 18px max(20px, env(safe-area-inset-bottom))' }}>
            <div style={{ width: 40, height: 4, borderRadius: 999, background: t.border, margin: '4px auto 14px' }} />
            <h2 style={{ margin: '0 0 4px', fontSize: 18, fontWeight: 800, color: t.text }}>How are you driving?</h2>
            <p style={{ margin: '0 0 16px', fontSize: 12.5, color: t.subtext }}>Sets your mood glow and tailors safety nudges.</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
              {MOODS.map((m) => {
              const sel = m.id === moodId;
              return (
                <button key={m.id} onClick={() => {setMoodId(m.id);setTimeout(() => setMoodSheet(false), 180);}} className="no-select" style={{
                  border: `2px solid ${sel ? m.glow : t.border}`, background: sel ? m.glow + '1c' : t.card, borderRadius: 18,
                  padding: '16px 6px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, transition: 'all 0.2s',
                  boxShadow: sel ? `0 0 22px ${m.glow}55` : 'none'
                }}>
                    <span style={{ fontSize: 28 }}>{m.emoji}</span>
                    <span style={{ fontSize: 12.5, fontWeight: 700, color: sel ? dark ? lighten(m.glow) : m.glow : t.text }}>{m.label}</span>
                  </button>);

            })}
            </div>
          </div>
        </div>
      }
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);