rfc-app/frontend/src/components/NotificationSettings.jsx

// /settings/notifications — the §15.4 / §15.5 / §15.6 / §15.8 surface.
//
// Topic 13 settled the schema and the per-category rules; Slice 6 wired
// the endpoints; Slice 7 lands the surface where a contributor finds
// the per-category email toggles, the digest cadence dropdown, the
// quiet-hours editor, the watches overview, and the per-user mute
// list. The §15.4 email footer's "Manage all preferences" link points
// at this route.
//
// Each sub-section is intentionally thin — the rules are settled in
// §15; this page renders them. The one piece of voice the spec
// commits to and the surface inherits: the `email_watched_churn`
// toggle renders as permanently disabled with the §15.4 refusal
// tooltip ("Per-commit and per-message email is intentionally not
// offered. The digest aggregates this activity weekly."). Naming the
// refusal is the spec's commitment; silently omitting the toggle
// would let the contract drift.

import { useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import {
  getNotificationPreferences,
  setNotificationPreferences,
  getQuietHours,
  setQuietHours,
  listWatches,
  setWatch,
  unmuteUser,
  muteUser,
  searchUsers,
} from '../api.js'

const CHURN_REFUSAL = 'Per-commit and per-message email is intentionally not offered. The digest aggregates this activity weekly.'

export default function NotificationSettings({ viewer }) {
  return (
    <div className="settings-page">
      <header className="settings-header">
        <h1>Notification settings</h1>
        <p className="settings-sub">
          Which signals reach you, how, and when. The rules live in §15;
          this page is where you tune them.
        </p>
      </header>

      <EmailPreferencesSection />
      <DigestCadenceSection />
      <QuietHoursSection />
      <WatchesSection />
      <MutesSection viewer={viewer} />
    </div>
  )
}

// ── §15.4 email category toggles ───────────────────────────────────────────

function EmailPreferencesSection() {
  const [prefs, setPrefs] = useState(null)
  const [saving, setSaving] = useState(false)
  const [savedNote, setSavedNote] = useState('')
  const [error, setError] = useState(null)

  useEffect(() => {
    getNotificationPreferences().then(setPrefs).catch(e => setError(e.message))
  }, [])

  async function update(field, value) {
    setSaving(true)
    setSavedNote('')
    try {
      await setNotificationPreferences({ [field]: value })
      setPrefs(p => ({ ...p, [field]: value }))
      setSavedNote('Saved.')
    } catch (e) {
      setError(e.message)
    } finally {
      setSaving(false)
      setTimeout(() => setSavedNote(''), 1500)
    }
  }

  if (!prefs) return <SectionShell title="Email" subtitle={error || 'Loading…'} />

  return (
    <SectionShell title="Email" subtitle="Categories you want delivered as email. The inbox always carries everything; email is opt-in by category.">
      <Toggle
        label="Personal direct"
        description="You are the named subject — proposals merged, decisions, claims, named asks. Default on."
        checked={!!prefs.email_personal_direct}
        onChange={v => update('email_personal_direct', v)}
        disabled={saving}
      />
      <Toggle
        label="Watched structural"
        description="Decisions on RFCs you watch — merges, declines, graduation, ownership changes. Default off."
        checked={!!prefs.email_watched_structural}
        onChange={v => update('email_watched_structural', v)}
        disabled={saving}
      />
      <Toggle
        label="Admin actionable"
        description="Decisions only an admin can act on. Defaults on for admins/owners; ignored for contributors."
        checked={!!prefs.email_admin_actionable}
        onChange={v => update('email_admin_actionable', v)}
        disabled={saving}
      />
      <Toggle
        label="Watched churn (per-commit, per-message)"
        description={CHURN_REFUSAL}
        checked={false}
        disabled
        title={CHURN_REFUSAL}
      />
      {!!prefs.email_opt_out_all && (
        <p className="settings-note warning">
          A hard bounce or complaint from your mailbox flipped the global
          email opt-out. No email will be sent until you contact an admin
          to clear the flag, even if individual categories are enabled.
        </p>
      )}
      <p className="settings-note">{savedNote}</p>
    </SectionShell>
  )
}

// ── §15.5 digest cadence ───────────────────────────────────────────────────

function DigestCadenceSection() {
  const [cadence, setCadence] = useState(null)
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    getNotificationPreferences().then(p => setCadence(p.digest_cadence || 'weekly'))
  }, [])

  async function update(value) {
    setSaving(true)
    try {
      await setNotificationPreferences({ digest_cadence: value })
      setCadence(value)
    } finally {
      setSaving(false)
    }
  }

  return (
    <SectionShell
      title="Digest cadence"
      subtitle="The §15.5 digest gathers churn-category activity into a single periodic email. Independent of the category toggles above."
    >
      <div className="settings-row">
        <select
          value={cadence ?? 'weekly'}
          onChange={e => update(e.target.value)}
          disabled={saving || cadence == null}
        >
          <option value="off">Off — never send a digest</option>
          <option value="weekly">Weekly</option>
          <option value="daily">Daily</option>
        </select>
      </div>
    </SectionShell>
  )
}

// ── §15.8 quiet hours ──────────────────────────────────────────────────────

function QuietHoursSection() {
  const [data, setData] = useState(null)
  const [draft, setDraft] = useState({ start: '', end: '', timezone: '' })
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState(null)

  // The browser ships an IANA tz list per §15.8 — preferable to a
  // free-text field, since the API validates the trio.
  const timezones = useMemo(() => {
    try {
      return Intl.supportedValuesOf('timeZone')
    } catch {
      return ['UTC']
    }
  }, [])

  useEffect(() => {
    getQuietHours().then(q => {
      setData(q)
      setDraft({
        start: q.start || '',
        end: q.end || '',
        timezone: q.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
      })
    })
  }, [])

  async function save() {
    setSaving(true)
    setError(null)
    try {
      await setQuietHours({ start: draft.start, end: draft.end, timezone: draft.timezone })
      setData({ start: draft.start, end: draft.end, timezone: draft.timezone })
    } catch (e) {
      setError(e.message)
    } finally {
      setSaving(false)
    }
  }

  async function clear() {
    setSaving(true)
    setError(null)
    try {
      await setQuietHours({ start: null, end: null, timezone: null })
      setData({ start: null, end: null, timezone: null })
      setDraft({ start: '', end: '', timezone: Intl.DateTimeFormat().resolvedOptions().timeZone })
    } catch (e) {
      setError(e.message)
    } finally {
      setSaving(false)
    }
  }

  if (!data) return <SectionShell title="Quiet hours" subtitle="Loading…" />

  const isSet = !!(data.start && data.end && data.timezone)

  return (
    <SectionShell
      title="Quiet hours"
      subtitle="Email holds during this window; inbox rows still land. On window-end, the §15.4 bundle email releases everything above the threshold."
    >
      <div className="settings-row quiet-hours-row">
        <label>
          Start
          <input
            type="time"
            value={draft.start}
            onChange={e => setDraft(d => ({ ...d, start: e.target.value }))}
          />
        </label>
        <label>
          End
          <input
            type="time"
            value={draft.end}
            onChange={e => setDraft(d => ({ ...d, end: e.target.value }))}
          />
        </label>
        <label>
          Timezone
          <select
            value={draft.timezone}
            onChange={e => setDraft(d => ({ ...d, timezone: e.target.value }))}
          >
            {timezones.map(tz => <option key={tz} value={tz}>{tz}</option>)}
          </select>
        </label>
      </div>
      <div className="settings-row">
        <button className="btn-primary" disabled={saving} onClick={save}>
          {isSet ? 'Update quiet hours' : 'Set quiet hours'}
        </button>
        {isSet && (
          <button className="btn-link-muted" disabled={saving} onClick={clear}>
            Clear
          </button>
        )}
      </div>
      {error && <p className="settings-note warning">{error}</p>}
    </SectionShell>
  )
}

// ── §15.6 watches overview ─────────────────────────────────────────────────

function WatchesSection() {
  const [watches, setWatches] = useState(null)
  const [updating, setUpdating] = useState({})

  useEffect(() => { listWatches().then(r => setWatches(r.items || [])) }, [])

  async function update(slug, state) {
    setUpdating(u => ({ ...u, [slug]: true }))
    try {
      const r = await setWatch(slug, state)
      setWatches(prev => prev.map(w => w.rfc_slug === slug
        ? { ...w, state: r.state, set_by: 'explicit' }
        : w
      ))
    } finally {
      setUpdating(u => ({ ...u, [slug]: false }))
    }
  }

  if (!watches) return <SectionShell title="Watches" subtitle="Loading…" />

  return (
    <SectionShell
      title="Watches"
      subtitle="What you receive structural-category notifications about. Auto-set when you participate, decays after 90 days of silence. An explicit choice here exempts the row from the auto-decay."
    >
      {watches.length === 0 && (
        <p className="muted">No watches yet. Open an RFC, propose, or join a thread — auto-watch will set one for you.</p>
      )}
      {watches.length > 0 && (
        <table className="settings-table">
          <thead>
            <tr>
              <th>RFC</th>
              <th>State</th>
              <th>Set by</th>
              <th>Last participation</th>
            </tr>
          </thead>
          <tbody>
            {watches.map(w => (
              <tr key={w.rfc_slug}>
                <td>
                  <Link to={`/rfc/${w.rfc_slug}`}>{w.rfc_title || w.rfc_slug}</Link>
                </td>
                <td>
                  <select
                    value={w.state}
                    onChange={e => update(w.rfc_slug, e.target.value)}
                    disabled={!!updating[w.rfc_slug]}
                  >
                    <option value="watching">Watching</option>
                    <option value="following">Following</option>
                    <option value="muted">Muted</option>
                  </select>
                </td>
                <td>
                  <span className={`set-by set-by-${w.set_by}`}>
                    {w.set_by === 'explicit' ? 'You' : 'Auto'}
                  </span>
                </td>
                <td className="muted">
                  {w.last_participation_at || '—'}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </SectionShell>
  )
}

// ── §15.8 per-user mute list + typeahead add ───────────────────────────────

function MutesSection({ viewer }) {
  const [mutes, setMutes] = useState(null)
  const [error, setError] = useState(null)

  async function refresh() {
    try {
      const r = await listMutes()
      setMutes(r.items || [])
    } catch (e) {
      setError(e.message)
    }
  }

  useEffect(() => { refresh() }, [])

  async function remove(userId) {
    await unmuteUser(userId)
    setMutes(prev => prev.filter(m => m.muted_user_id !== userId))
  }

  return (
    <SectionShell
      title="Muted users"
      subtitle="Notifications from these users won't reach your inbox. (Mute does not gate visibility — you can still read what they post.) Adding a mute here is the catch-all path; the intended path is to mute from an inbox row's actor avatar."
    >
      {viewer.role === 'owner' || viewer.role === 'admin' ? (
        <p className="muted">
          Owners and admins cannot mute notifications — the role requires
          receiving signals from everyone. (§15.8)
        </p>
      ) : (
        <MuteTypeahead onMuted={refresh} />
      )}
      {mutes && mutes.length === 0 && (
        <p className="muted">No active mutes.</p>
      )}
      {mutes && mutes.length > 0 && (
        <ul className="mutes-list">
          {mutes.map(m => (
            <li key={m.muted_user_id} className="mutes-row">
              <span className="mute-handle">@{m.gitea_login}</span>
              <span className="mute-name muted">{m.display_name}</span>
              <span className="mute-when muted">since {m.muted_at}</span>
              <button className="btn-link-muted" onClick={() => remove(m.muted_user_id)}>
                Unmute
              </button>
            </li>
          ))}
        </ul>
      )}
      {error && <p className="settings-note warning">{error}</p>}
    </SectionShell>
  )
}

// The mute-list read endpoint isn't a separate route in the API today
// (§17 names add/delete only); we read the join here against /api/users/me
// via a tiny dedicated endpoint that mirrors the watches shape. For
// Slice 7's v1 surface, we compute the list client-side from a server
// endpoint that returns the joined rows — added in api_admin.py's
// neighborhood for proximity.
async function listMutes() {
  const res = await fetch('/api/users/me/notification-mutes')
  if (!res.ok) {
    const detail = await res.text()
    throw new Error(detail || `HTTP ${res.status}`)
  }
  return res.json()
}

function MuteTypeahead({ onMuted }) {
  const [q, setQ] = useState('')
  const [results, setResults] = useState([])
  const [open, setOpen] = useState(false)
  const [busy, setBusy] = useState(false)
  const [hint, setHint] = useState('')

  useEffect(() => {
    const t = setTimeout(() => {
      searchUsers(q).then(r => setResults(r.items || []))
    }, 120)
    return () => clearTimeout(t)
  }, [q])

  async function mute(user) {
    setBusy(true)
    setHint('')
    try {
      await muteUser(user.id)
      setQ('')
      setOpen(false)
      onMuted?.()
    } catch (e) {
      setHint(e.message)
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="mute-typeahead">
      <input
        type="text"
        placeholder="Mute a user by login or name…"
        value={q}
        onChange={e => { setQ(e.target.value); setOpen(true) }}
        onFocus={() => setOpen(true)}
        onBlur={() => setTimeout(() => setOpen(false), 150)}
        disabled={busy}
      />
      {open && results.length > 0 && (
        <ul className="mute-typeahead-results">
          {results.map(r => (
            <li key={r.id}>
              <button onClick={() => mute(r)} disabled={busy}>
                <span className="mute-handle">@{r.gitea_login}</span>
                <span className="muted">{r.display_name}</span>
                {(r.role === 'owner' || r.role === 'admin') && (
                  <span className="muted">{r.role}</span>
                )}
              </button>
            </li>
          ))}
        </ul>
      )}
      {hint && <p className="settings-note warning">{hint}</p>}
    </div>
  )
}

// ── Small layout primitives ────────────────────────────────────────────────

function SectionShell({ title, subtitle, children }) {
  return (
    <section className="settings-section">
      <header>
        <h2>{title}</h2>
        {subtitle && <p className="settings-sub">{subtitle}</p>}
      </header>
      <div className="settings-section-body">{children}</div>
    </section>
  )
}

function Toggle({ label, description, checked, onChange, disabled, title }) {
  return (
    <label className={`toggle-row ${disabled ? 'disabled' : ''}`} title={title}>
      <input
        type="checkbox"
        checked={!!checked}
        onChange={e => onChange?.(e.target.checked)}
        disabled={disabled}
      />
      <span className="toggle-text">
        <span className="toggle-label">{label}</span>
        {description && <span className="toggle-desc">{description}</span>}
      </span>
    </label>
  )
}