// ===== SCREENS: Offices, PHOrdinances, Alerts, Profile =====

// ---------- Traffic Offices Directory ----------
function OfficesScreen({ t, go }) {
  const [open, setOpen] = useState(1);
  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Card t={t} pad={13} style={{ background: t.mid + (t.dark ? '1f' : '12'), border: `1px solid ${t.mid}44` }}>
        <div style={{ fontSize: 12.5, color: t.text, fontWeight: 500, lineHeight: 1.45 }}>📍 Official Philippine traffic management offices. Tap a card to view contact details, then call or email directly.</div>
      </Card>
      {ph_offices.map(o => {
        const isOpen = open === o.id;
        return (
          <Card key={o.id} t={t} pad={0}>
            <button onClick={() => setOpen(isOpen ? -1 : o.id)} className="no-select" style={{ width: '100%', background: 'transparent', border: 'none', padding: 15, display: 'flex', alignItems: 'center', gap: 12, minHeight: 60 }}>
              <div style={{ width: 44, height: 44, minWidth: 44, borderRadius: 13, background: o.color + (t.dark ? '2e' : '1c'), display: 'grid', placeItems: 'center' }}><Icon name="shield" size={22} color={o.color} /></div>
              <div style={{ flex: 1, textAlign: 'left' }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: t.text, lineHeight: 1.25 }}>{o.name}</div>
                <div style={{ fontSize: 11.5, color: t.subtext, marginTop: 2 }}>{o.head}</div>
              </div>
              <span style={{ color: t.subtext, transform: isOpen ? 'rotate(90deg)' : 'none', transition: 'transform 0.25s' }}><Icon name="chevron-right" size={18} /></span>
            </button>
            <div style={{ maxHeight: isOpen ? 260 : 0, overflow: 'hidden', transition: 'max-height 0.3s ease' }}>
              <div style={{ padding: '0 15px 15px' }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', fontSize: 12.5, color: t.subtext, marginBottom: 12, lineHeight: 1.4 }}>
                  <Icon name="location" size={15} style={{ flexShrink: 0, marginTop: 1 }} />{o.addr}
                </div>
                <div style={{ display: 'flex', gap: 10 }}>
                  <a href={`tel:${o.tel.replace(/[^\d]/g, '')}`} style={{ flex: 1, textDecoration: 'none' }}>
                    <Btn t={t} full color={o.color} style={{ minHeight: 44, fontSize: 13 }} icon="phone">Call</Btn>
                  </a>
                  <a href={`mailto:${o.email}`} style={{ flex: 1, textDecoration: 'none' }}>
                    <Btn t={t} full color={o.color} variant="soft" style={{ minHeight: 44, fontSize: 13 }} icon="mail">Email</Btn>
                  </a>
                </div>
                <div style={{ fontSize: 11, color: t.subtext, marginTop: 9, textAlign: 'center' }}>{o.tel} · {o.email}</div>
              </div>
            </div>
          </Card>
        );
      })}
    </div>
  );
}

// ---------- Philippine Ordinances ----------
function PHOrdinancesScreen({ t, go }) {
  const [city, setCity] = useState(ph_ordinances[0].city);
  const current = ph_ordinances.find(c => c.city === city);
  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div className="scroll-x" style={{ display: 'flex', gap: 8 }}>
        {ph_ordinances.map(c => <Pill key={c.city} t={t} active={city === c.city} onClick={() => setCity(c.city)} color={c.color}>{c.city}</Pill>)}
      </div>

      <Card t={t} pad={0} style={{ borderTop: `4px solid ${current.color}` }}>
        <div style={{ padding: '15px 16px 6px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: current.color + (t.dark ? '2e' : '1c'), display: 'grid', placeItems: 'center', fontSize: 20 }}>🏙️</div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 800, color: t.text }}>{current.city}</div>
            <div style={{ fontSize: 11.5, color: t.subtext }}>{current.list.length} local traffic ordinances</div>
          </div>
        </div>
        <div style={{ padding: '8px 16px 14px', display: 'flex', flexDirection: 'column', gap: 2 }}>
          {current.list.map((o, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '10px 0', borderTop: i > 0 ? `1px solid ${t.border}` : 'none' }}>
              <span style={{ width: 26, height: 26, minWidth: 26, borderRadius: 999, background: current.color + (t.dark ? '2e' : '1c'), color: t.dark ? lighten(current.color) : current.color, display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 800 }}>{i + 1}</span>
              <span style={{ fontSize: 13, color: t.text, lineHeight: 1.45, fontWeight: 500, paddingTop: 3 }}>{o}</span>
            </div>
          ))}
        </div>
      </Card>

      <Btn t={t} full color={current.color} onClick={() => go('Offices')} icon="shield">Contact Traffic Office</Btn>
    </div>
  );
}

// ---------- Notifications ----------
function AlertsScreen({ t, go }) {
  const [groups, setGroups] = useState(notifs);
  const unread = groups.flatMap(g => g.items).filter(i => i.unread).length;
  const markAll = () => setGroups(gs => gs.map(g => ({ ...g, items: g.items.map(i => ({ ...i, unread: false })) })));
  const tap = (gid, iid) => setGroups(gs => gs.map(g => g.id === gid ? { ...g, items: g.items.map(i => i.id === iid ? { ...i, unread: false } : i) } : g));
  return (
    <div style={{ padding: '0 16px 8px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontSize: 13, color: t.subtext, fontWeight: 600 }}>{unread > 0 ? `${unread} unread` : 'All caught up 🎉'}</span>
        {unread > 0 && <button onClick={markAll} className="no-select" style={{ background: t.mid + (t.dark ? '33' : '18'), color: t.mid, border: 'none', borderRadius: 999, padding: '7px 14px', fontSize: 12.5, fontWeight: 700, minHeight: 36 }}>Mark all read</button>}
      </div>
      {groups.map(g => (
        <div key={g.id}>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: '0.04em', textTransform: 'uppercase', margin: '2px 0 9px' }}>{g.group}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {g.items.map(n => (
              <Card key={n.id} t={t} pad={13} onClick={() => tap(g.id, n.id)} style={{ opacity: n.unread ? 1 : 0.66, transition: 'opacity 0.3s', cursor: 'pointer' }}>
                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <IconTile icon={n.icon} color={n.color} t={t} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 700, color: t.text, lineHeight: 1.3 }}>{n.title}</div>
                    <div style={{ fontSize: 12.5, color: t.subtext, marginTop: 3, lineHeight: 1.4 }}>{n.desc}</div>
                    <div style={{ fontSize: 11, color: t.subtext, marginTop: 5, fontWeight: 600 }}>{n.time} ago</div>
                  </div>
                  {n.unread && <span style={{ width: 9, height: 9, borderRadius: 999, background: t.accent, marginTop: 5 }} />}
                </div>
              </Card>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// ProfileScreen lives in src/screens-account.jsx (role-aware version)

Object.assign(window, { OfficesScreen, PHOrdinancesScreen, AlertsScreen });