/* ============================================================
   ELECTROMED — Notifications & Alerts
   Payment · rent-due · overdue · warranty · job-card · low-stock
   ============================================================ */
function Notifications() {
  const { data: apiNotifications } = useNotifications();
  const [items, setItems] = useState([]);
  const [filter, setFilter] = useState('All');

  React.useEffect(() => {
    if (apiNotifications.length > 0) setItems(apiNotifications);
  }, [apiNotifications.length]);

  const icon = { payment: Icons.pay, rent_due: Icons.clock, overdue: Icons.bell, lowstock: Icons.box, warranty: Icons.shield, jobcard: Icons.wrench };
  const sevColor = { ok: 'ok', warn: 'warn', bad: 'bad', info: 'info' };

  const isRead = (n) => n.read === 1 || n.read === true;

  const shown = items.filter(n =>
    filter === 'All' || (filter === 'Unread' ? !isRead(n) : n.kind === filter)
  );
  const unread = items.filter(n => !isRead(n)).length;

  const markAll = () => {
    setItems(items.map(n => ({ ...n, read: 1 })));
    items.filter(n => !isRead(n)).forEach(n => api.markNotificationRead(n.id).catch(() => {}));
  };

  const toggle = (id) => {
    const n = items.find(x => x.id === id);
    setItems(items.map(x => x.id === id ? { ...x, read: isRead(x) ? 0 : 1 } : x));
    if (n && !isRead(n)) api.markNotificationRead(id).catch(() => {});
  };

  const { data: channels, refetch: refetchChannels } = useNotificationChannels();

  return (
    <div className="view-enter">
      <PageHead eyebrow="07 · Notifications & Alerts" title="Notifications"
        sub="Real-time alerts across SMS, Email and WhatsApp — driven by the notification engine."
        actions={<Btn variant="ghost" icon={<Icons.check size={16} />} onClick={markAll}>Mark all read</Btn>} />

      <div className="grid" style={{ gridTemplateColumns: '1.5fr 1fr', alignItems: 'start' }}>
        {/* Feed */}
        <div className="card">
          <div className="card-pad row" style={{ justifyContent: 'space-between', gap: 10, flexWrap: 'wrap', paddingBottom: 12 }}>
            <div className="row" style={{ gap: 10 }}>
              <span style={{ fontWeight: 800, fontSize: 17 }}>Activity Feed</span>
              {unread > 0 && <span className="badge" style={{ background: 'var(--lime)', color: 'var(--forest-2)' }}>{unread} new</span>}
            </div>
            <div className="tabs" style={{ flexWrap: 'wrap' }}>
              {['All', 'Unread', 'payment', 'rent_due', 'overdue'].map(f => (
                <button key={f} className={cls('tab', filter===f&&'active')} style={{ fontSize: 12.5 }} onClick={() => setFilter(f)}>
                  {({payment:'Payments',rent_due:'Rentals',overdue:'Overdue'}[f]) || f}
                </button>
              ))}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {shown.map((n, ix) => {
              const I = icon[n.kind] || Icons.bell;
              const sev = n.severity || n.sev || 'info';
              return (
                <div key={n.id || ix} className="row" style={{ gap: 14, alignItems: 'flex-start', padding: '16px 22px', borderTop: ix?'1px solid var(--line)':'none', background: isRead(n)?'transparent':'var(--surface-2)', cursor: 'pointer' }} onClick={() => toggle(n.id)}>
                  <div style={{ width: 40, height: 40, borderRadius: 12, flexShrink: 0, display: 'grid', placeItems: 'center', background: `var(--${sevColor[sev] || 'info'}-bg)`, color: `var(--${sevColor[sev] || 'info'})` }}><I size={19} /></div>
                  <div className="grow" style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 700, fontSize: 14, textWrap: 'pretty' }}>{n.title}</div>
                    <div className="tiny muted" style={{ marginTop: 3 }}>{n.body}</div>
                  </div>
                  <span className="tiny muted" style={{ flexShrink: 0, whiteSpace: 'nowrap' }}>{n.time}</span>
                  {!isRead(n) && <span className="dot" style={{ background: 'var(--lime-700)', width: 9, height: 9, marginTop: 6, flexShrink: 0 }} />}
                </div>
              );
            })}
            {!shown.length && <div className="ph-img" style={{ height: 120, margin: 18 }}>no notifications</div>}
          </div>
        </div>

        {/* Channel settings */}
        <div className="grid">
          <div className="card card-pad">
            <div style={{ fontWeight: 800, fontSize: 16, marginBottom: 4 }}>Alert Channels</div>
            <div className="tiny muted" style={{ marginBottom: 16 }}>Which events fire on which channel.</div>
            <div className="row tiny" style={{ fontWeight: 700, color: 'var(--ink-3)', padding: '0 0 8px' }}>
              <span className="grow">Event</span><span style={{ width: 38, textAlign: 'center' }}>SMS</span><span style={{ width: 44, textAlign: 'center' }}>Email</span><span style={{ width: 36, textAlign: 'center' }}>WA</span>
            </div>
            {channels.length === 0 && <div className="tiny muted" style={{ padding: '12px 0' }}>Loading channels…</div>}
            {channels.map((c) => <ChannelRow key={c.id || c.event} c={c} refetch={refetchChannels} />)}
          </div>
          <div className="card card-pad" style={{ background: 'var(--grad-green)', color: '#fff', border: 'none' }}>
            <div className="row" style={{ gap: 10, marginBottom: 10 }}><Icons.spark size={20} style={{ color: 'var(--lime)' }} /><span style={{ fontWeight: 800 }}>Notification Engine</span></div>
            <div className="tiny" style={{ color: 'rgba(255,255,255,.75)', lineHeight: 1.5 }}>This month the engine dispatched <b style={{color:'var(--lime)'}}>1,284</b> alerts. Scheduler runs hourly for rent-due &amp; warranty-expiry checks.</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,.14)' }}>
              {[['SMS','842'],['Email','310'],['WhatsApp','132']].map(([k,v])=><div key={k}><div className="tiny" style={{color:'rgba(255,255,255,.6)'}}>{k}</div><div style={{fontWeight:800,fontSize:16}}>{v}</div></div>)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ChannelRow({ c, refetch }) {
  const [s, setS] = useState({ sms: !!c.sms, email: !!c.email, wa: !!c.wa });
  React.useEffect(() => { setS({ sms: !!c.sms, email: !!c.email, wa: !!c.wa }); }, [c.id]);

  const toggle = (field) => {
    const next = { ...s, [field]: !s[field] };
    setS(next);
    if (c.id) api.updateNotificationChannel(c.id, next).then(refetch).catch(() => setS(s));
  };

  const Toggle = ({ on, onClick }) => (
    <button onClick={onClick} style={{ width: 34, height: 20, borderRadius: 999, background: on?'var(--lime)':'var(--surface-3)', position: 'relative', transition: '.15s', margin: '0 auto', display: 'block' }}>
      <span style={{ position: 'absolute', top: 2, left: on?16:2, width: 16, height: 16, borderRadius: 50, background: '#fff', transition: '.15s', boxShadow: 'var(--sh-sm)' }} />
    </button>
  );
  return (
    <div className="row" style={{ padding: '10px 0', borderTop: '1px solid var(--line)' }}>
      <span className="grow" style={{ fontWeight: 600, fontSize: 13.5 }}>{c.event}</span>
      <span style={{ width: 38 }}><Toggle on={s.sms}   onClick={() => toggle('sms')}   /></span>
      <span style={{ width: 44 }}><Toggle on={s.email} onClick={() => toggle('email')} /></span>
      <span style={{ width: 36 }}><Toggle on={s.wa}    onClick={() => toggle('wa')}    /></span>
    </div>
  );
}
window.Notifications = Notifications;