// Notifications.jsx
function NotificationsPage() {
  const [push, setPush] = React.useState(true);
  const [whatsapp, setWhatsapp] = React.useState(true);
  const [urgentOnly, setUrgentOnly] = React.useState(false);
  const [types, setTypes] = React.useState({
    'New job assignment': true,
    'Job time or location change': true,
    'Urgent dispatch update': true,
    'Job cancellation': true,
    'Reminder before job starts': true,
    'Certification renewal reminder': true,
    'Mechanic repair ticket assignment': true,
    'Management approval request': false,
  });

  const reminders = certReminders();

  return (
    <div className="content">
      <div className="two-col">
        <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
          <div className="card">
            <div className="card__header">
              <div>
                <div className="card__title">Certification Renewals</div>
                <div style={{fontSize: 13, color: 'var(--color-grey-500)', marginTop: 4}}>
                  {reminders.filter(r => r.state === 'expired').length} expired · {reminders.filter(r => r.state === 'expiring').length} due within {CERT_RENEW_WINDOW_DAYS} days
                </div>
              </div>
              <span style={{fontSize: 11, fontWeight: 700, color: 'var(--color-grey-500)', textTransform: 'uppercase', letterSpacing: '0.08em'}}>Auto</span>
            </div>
            {reminders.length === 0 ? (
              <div style={{padding: '12px 4px', fontSize: 13, color: 'var(--color-grey-500)'}}>All operator certifications are current. Reminders fire {CERT_RENEW_WINDOW_DAYS} days before expiry.</div>
            ) : (
              <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
                {reminders.map((r, i) => {
                  const expired = r.state === 'expired';
                  return (
                    <div key={i} className={"notif-card " + (expired ? "" : "notif-card--unread")}>
                      <div className={"notif-card__icon notif-card__icon--" + (expired ? 'urgent' : 'info')}>
                        {expired ? <AlertTriangle size={16}/> : <Clock size={16}/>}
                      </div>
                      <div className="notif-card__body">
                        <div className="notif-card__title">
                          {r.operator} — {r.code} {expired ? 'expired' : 'renewal due'}
                        </div>
                        <div className="notif-card__msg">
                          {r.label} · {expired
                            ? <span style={{color: 'var(--color-danger)', fontWeight: 600}}>expired {fmtCertDate(r.exp)} ({Math.abs(r.days)} days ago) — hidden from booking until renewed</span>
                            : <span style={{color: '#b45309', fontWeight: 600}}>expires {fmtCertDate(r.exp)} (in {r.days} days)</span>}
                        </div>
                        <div className="notif-card__time">Renew via Master Data → Operators</div>
                      </div>
                      <span style={{width: 8, height: 8, borderRadius: '50%', background: expired ? 'var(--color-danger)' : 'var(--color-yellow)', marginTop: 6}}/>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          <div className="card">
            <div className="card__header">
              <div>
                <div className="card__title">Recent Notifications</div>
                <div style={{fontSize: 13, color: 'var(--color-grey-500)', marginTop: 4}}>{NOTIFICATIONS.filter(n => n.unread).length} unread</div>
              </div>
              <button className="btn btn--ghost">Mark all read</button>
            </div>

            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
              {NOTIFICATIONS.map(n => {
                const icon = n.kind === 'urgent' ? AlertTriangle : n.kind === 'success' ? Check : Bell;
                const Ico = icon;
                return (
                  <div key={n.id} className={"notif-card " + (n.unread ? "notif-card--unread" : "")}>
                    <div className={"notif-card__icon notif-card__icon--" + (n.kind === 'urgent' ? 'urgent' : n.kind === 'success' ? 'success' : 'info')}>
                      <Ico size={16}/>
                    </div>
                    <div className="notif-card__body">
                      <div className="notif-card__title">{n.title}</div>
                      <div className="notif-card__msg">{n.msg}</div>
                      <div className="notif-card__time">{n.time}</div>
                    </div>
                    {n.unread ? <div style={{width: 8, height: 8, borderRadius: '50%', background: 'var(--color-yellow)', marginTop: 6}}/> : null}
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
          <div className="card">
            <div className="card__header">
              <div className="card__title">Channels</div>
            </div>
            <div className="toggle-row">
              <div>
                <div style={{fontWeight: 600, color: 'var(--color-navy)', fontSize: 14}}>Browser Push</div>
                <div style={{fontSize: 12, color: 'var(--color-grey-500)', marginTop: 2}}>PWA push to phone &amp; desktop</div>
              </div>
              <button className={"toggle " + (push ? "toggle--on" : "")} onClick={() => setPush(!push)}/>
            </div>
            <div className="toggle-row">
              <div>
                <div style={{fontWeight: 600, color: 'var(--color-navy)', fontSize: 14, display: 'flex', alignItems: 'center', gap: 6}}>
                  <span style={{color: '#25d366'}}><WhatsApp size={16}/></span> WhatsApp Backup
                </div>
                <div style={{fontSize: 12, color: 'var(--color-grey-500)', marginTop: 2}}>Sent if push fails after 60s</div>
              </div>
              <button className={"toggle " + (whatsapp ? "toggle--on" : "")} onClick={() => setWhatsapp(!whatsapp)}/>
            </div>
            <div className="toggle-row">
              <div>
                <div style={{fontWeight: 600, color: 'var(--color-navy)', fontSize: 14}}>Urgent Alerts Only</div>
                <div style={{fontSize: 12, color: 'var(--color-grey-500)', marginTop: 2}}>Mute non-urgent between 10pm – 6am</div>
              </div>
              <button className={"toggle " + (urgentOnly ? "toggle--on" : "")} onClick={() => setUrgentOnly(!urgentOnly)}/>
            </div>
          </div>

          <div className="card">
            <div className="card__header">
              <div className="card__title">Notification Types</div>
            </div>
            {Object.entries(types).map(([k, v]) => (
              <div key={k} className="toggle-row">
                <div style={{fontSize: 14, color: 'var(--color-navy)', fontWeight: 500}}>{k}</div>
                <button className={"toggle " + (v ? "toggle--on" : "")} onClick={() => setTypes({...types, [k]: !v})}/>
              </div>
            ))}
          </div>

          <div className="card" style={{background: 'var(--color-navy)', color: 'white', borderColor: 'var(--color-navy)'}}>
            <div style={{fontSize: 11, color: 'var(--color-yellow)', textTransform: 'uppercase', letterSpacing: '0.14em', fontWeight: 700, marginBottom: 8}}>Example Push</div>
            <div style={{display: 'flex', gap: 12, alignItems: 'flex-start'}}>
              <div style={{width: 36, height: 36, background: 'var(--color-yellow)', color: 'var(--color-navy)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0}}>
                <Crane size={20}/>
              </div>
              <div>
                <div style={{fontWeight: 700, fontSize: 14}}>Pow Lee Crane Ops</div>
                <div style={{fontSize: 13, color: 'rgba(255,255,255,0.85)', marginTop: 4, lineHeight: 1.45}}>
                  New Work Order Assigned: 50 Ton Crane, Pasir Gudang, 29 April 2026, 8:00 AM.
                </div>
                <div style={{fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 8}}>now · push</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NotificationsPage });