// Admin / Maintenance page: health, storage stats, backup browser, stats, manual actions.

// ---- Range-aware stats engine -----------------------------------------------
// Generates deterministic per-bucket counts based on seed numbers so switching
// range feels real (each range animates between fixed shapes, not random noise).
const RANGE_OPTIONS = [
  { key: "week",   label: "This week",  buckets: 7,  bucketLabel: "d", granularity: "day" },
  { key: "month",  label: "This month", buckets: 5,  bucketLabel: "w", granularity: "week" },
  { key: "year",   label: "This year",  buckets: 12, bucketLabel: "m", granularity: "month" },
  { key: "7d",     label: "Last 7d",    buckets: 7,  bucketLabel: "d", granularity: "day" },
  { key: "30d",    label: "Last 30d",   buckets: 30, bucketLabel: "d", granularity: "day" },
  { key: "365d",   label: "Last 365d",  buckets: 12, bucketLabel: "m", granularity: "month" },
];

// Returns [{start, end}] bucket boundaries matching bucketLabelsFor(rangeKey)
function bucketBounds(rangeKey, refDate) {
  const d = new Date(refDate);
  if (rangeKey === 'week') {
    const dow = (d.getDay() + 6) % 7;
    const mon = new Date(d.getFullYear(), d.getMonth(), d.getDate() - dow);
    return Array.from({length: 7}, (_, i) => {
      const s = new Date(mon); s.setDate(mon.getDate() + i);
      const e = new Date(s);  e.setDate(s.getDate() + 1);
      return { start: s, end: e };
    });
  }
  if (rangeKey === '7d') {
    return Array.from({length: 7}, (_, i) => {
      const offset = 6 - i;
      const s = new Date(d.getFullYear(), d.getMonth(), d.getDate() - offset);
      const e = new Date(s); e.setDate(s.getDate() + 1);
      return { start: s, end: e };
    });
  }
  if (rangeKey === '30d') {
    return Array.from({length: 30}, (_, i) => {
      const offset = 29 - i;
      const s = new Date(d.getFullYear(), d.getMonth(), d.getDate() - offset);
      const e = new Date(s); e.setDate(s.getDate() + 1);
      return { start: s, end: e };
    });
  }
  if (rangeKey === 'month') {
    const y = d.getFullYear(), mo = d.getMonth();
    return Array.from({length: 5}, (_, i) => ({
      start: new Date(y, mo, 1 + i * 7),
      end:   i < 4 ? new Date(y, mo, 1 + (i + 1) * 7) : new Date(y, mo + 1, 1),
    }));
  }
  if (rangeKey === 'year') {
    const y = d.getFullYear();
    return Array.from({length: 12}, (_, i) => ({
      start: new Date(y, i, 1),
      end:   new Date(y, i + 1, 1),
    }));
  }
  if (rangeKey === '365d') {
    return Array.from({length: 12}, (_, i) => {
      const offset = 11 - i;
      const y = d.getFullYear(), mo = d.getMonth();
      return {
        start: new Date(y, mo - offset, 1),
        end:   new Date(y, mo - offset + 1, 1),
      };
    });
  }
  return [];
}

function countInBuckets(history, buckets) {
  const keys = ['created', 'in-progress', 'blocked', 'postponed', 'done', 'cancelled'];
  const out = Object.fromEntries(keys.map(k => [k, Array(buckets.length).fill(0)]));
  for (const h of history) {
    const ts  = new Date(h.timestamp);
    const idx = buckets.findIndex(b => ts >= b.start && ts < b.end);
    if (idx < 0) continue;
    if (h.action === 'item_created') {
      out.created[idx]++;
    } else if (h.action === 'status_changed') {
      const m = h.details.match(/→\s*(\S[\s\S]*?)$/);
      if (m) {
        const ns = m[1].trim();
        if (ns in out) out[ns][idx]++;
      }
    }
  }
  return out;
}

function bucketLabelsFor(rangeKey) {
  const today = new Date();
  const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  const days = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
  if (rangeKey === "week") {
    return days;
  }
  if (rangeKey === "7d") {
    const out = [];
    for (let i = 6; i >= 0; i--) {
      const d = new Date(today); d.setDate(today.getDate() - i);
      out.push(days[(d.getDay() + 6) % 7]);
    }
    return out;
  }
  if (rangeKey === "30d") {
    const out = [];
    for (let i = 29; i >= 0; i--) {
      const d = new Date(today); d.setDate(today.getDate() - i);
      out.push(String(d.getDate()));
    }
    return out;
  }
  if (rangeKey === "month") {
    return ["W1","W2","W3","W4","W5"];
  }
  if (rangeKey === "year") {
    return months;
  }
  if (rangeKey === "365d") {
    const out = [];
    for (let i = 11; i >= 0; i--) {
      const d = new Date(today); d.setMonth(today.getMonth() - i);
      out.push(months[d.getMonth()]);
    }
    return out;
  }
  return [];
}

// Status keys in the order we want them stacked (bottom → top).
// "created" is a synthetic bucket: items that entered the system in that period.
const CHART_STATUSES = [
  { key: "created",     label: "Created",     color: "oklch(0.78 0.13 220)" },  // sky cyan-blue
  { key: "in-progress", label: "In progress", color: "oklch(0.72 0.14 270)" },  // lavender
  { key: "blocked",     label: "Blocked",     color: "oklch(0.68 0.20 28)"  },  // red — fixed (0° HSL)
  { key: "postponed",   label: "Postponed",   color: "oklch(0.83 0.16 90)"  },  // bright golden yellow — bisector of red↔green (≈70° HSL)
  { key: "done",        label: "Done",        color: "oklch(0.68 0.16 150)" },  // green — fixed (140° HSL)
  { key: "cancelled",   label: "Cancelled",   color: "oklch(0.62 0.04 280)" },  // slate
];

function computeRangeStats(rangeKey, dataStats, history) {
  const opt    = RANGE_OPTIONS.find(r => r.key === rangeKey);
  const labels = bucketLabelsFor(rangeKey);
  const now    = new Date();

  // Prior-period reference: shift back by one equivalent period
  const priorRef = new Date(now);
  if      (rangeKey === 'week' || rangeKey === '7d')   priorRef.setDate(priorRef.getDate() - 7);
  else if (rangeKey === 'month' || rangeKey === '30d')  priorRef.setMonth(priorRef.getMonth() - 1);
  else if (rangeKey === 'year'  || rangeKey === '365d') priorRef.setFullYear(priorRef.getFullYear() - 1);

  const curr  = countInBuckets(history, bucketBounds(rangeKey, now));
  const prior = countInBuckets(history, bucketBounds(rangeKey, priorRef));

  const series = {
    created:        curr.created,
    'in-progress':  curr['in-progress'],
    blocked:        curr.blocked,
    postponed:      curr.postponed,
    done:           curr.done,
    cancelled:      curr.cancelled,
  };

  const sum            = arr => arr.reduce((a, b) => a + b, 0);
  const totalCreated   = sum(curr.created);
  const totalCompleted = sum(curr.done);
  const priorCreated   = sum(prior.created);
  const priorCompleted = sum(prior.done);

  const pct = (c, p) => p === 0 ? (c > 0 ? 100 : 0) : Math.round(((c - p) / p) * 100);

  const periodWeeks     = { week: 1, '7d': 1, month: 4.3, '30d': 4.3, year: 52, '365d': 52 }[rangeKey];
  const throughput      = +(totalCompleted / periodWeeks).toFixed(1);
  const priorThroughput = +(priorCompleted / periodWeeks).toFixed(1);

  const completionRate      = totalCreated   > 0 ? Math.round((totalCompleted / totalCreated)   * 100) : 0;
  const priorCompletionRate = priorCreated   > 0 ? Math.round((priorCompleted / priorCreated)   * 100) : 0;

  const cycle = dataStats.avgInProgressDays ?? 0;

  return {
    opt,
    labels,
    series,
    totals: { created: totalCreated, completed: totalCompleted },
    kpis: {
      created:    { value: totalCreated,   delta: pct(totalCreated,   priorCreated)   },
      completed:  { value: totalCompleted, delta: pct(totalCompleted, priorCompleted) },
      throughput: { value: throughput,     delta: pct(throughput, priorThroughput), unit: '/wk' },
      cycle:      { value: cycle,          delta: 0, unit: 'd', deltaInverse: true },
      rate:       { value: completionRate, delta: completionRate - priorCompletionRate, unit: '%' },
    },
  };
}

function StatsOverview({ dataStats, mostActiveProject, history }) {
  const [range, setRange] = useState("week");
  const [chartMode, setChartMode] = useState("cumulative"); // cumulative | breakdown
  const [hiddenStatuses, setHiddenStatuses] = useState(new Set());
  const stats = useMemo(() => computeRangeStats(range, dataStats, history), [range, dataStats, history]);

  const visibleStatuses = CHART_STATUSES.filter(s => !hiddenStatuses.has(s.key));

  // Both modes show stacked totals; max is bucket sum across visible series.
  const maxBar = useMemo(() => {
    let m = 1;
    for (let i = 0; i < stats.labels.length; i++) {
      const s = visibleStatuses.reduce((acc, st) => acc + stats.series[st.key][i], 0);
      if (s > m) m = s;
    }
    return m;
  }, [stats, visibleStatuses]);

  const dense = stats.labels.length > 12;
  const labelStride = dense ? Math.ceil(stats.labels.length / 8) : 1;

  const toggleStatus = (key) => {
    setHiddenStatuses(prev => {
      const next = new Set(prev);
      if (next.has(key)) next.delete(key); else next.add(key);
      return next;
    });
  };

  return (
    <section className="card span-2 stats-card">
      <div className="card-head stats-head">
        <div>
          <h3>Stats overview</h3>
          <span className="card-sub">{stats.opt.label.toLowerCase()} · most active in <strong>{mostActiveProject}</strong></span>
        </div>
        <div className="range-switch" role="tablist" aria-label="Stats range">
          {RANGE_OPTIONS.map(opt => (
            <button
              key={opt.key}
              role="tab"
              aria-selected={range === opt.key}
              className={`range-btn ${range === opt.key ? "active" : ""}`}
              onClick={() => setRange(opt.key)}
            >
              {opt.label}
            </button>
          ))}
        </div>
      </div>

      <div className="kpi-grid">
        <Kpi label="Created"   {...stats.kpis.created}/>
        <Kpi label="Completed" {...stats.kpis.completed}/>
        <Kpi label="Throughput" {...stats.kpis.throughput}/>
        <Kpi label="Avg cycle" {...stats.kpis.cycle}/>
        <Kpi label="Completion rate" {...stats.kpis.rate}/>
      </div>

      <div className="chart-head">
        <div className="chart-legend" role="group" aria-label="Toggle status series">
          {chartMode === "breakdown" ? (
            CHART_STATUSES.map(s => {
              const off = hiddenStatuses.has(s.key);
              return (
                <button
                  key={s.key}
                  className={`legend-chip ${off ? "off" : ""}`}
                  onClick={() => toggleStatus(s.key)}
                  title={off ? `Show ${s.label}` : `Hide ${s.label}`}
                >
                  <span className="lg-swatch" style={{ background: s.color }}/>
                  {s.label}
                </button>
              );
            })
          ) : (
            <span className="legend-chip static">
              <span className="lg-swatch" style={{ background: "var(--accent)" }}/>
              Total activity
            </span>
          )}
        </div>

        <div className="mode-switch" role="tablist" aria-label="Chart mode">
          <button
            className={`mode-btn ${chartMode === "cumulative" ? "active" : ""}`}
            onClick={() => setChartMode("cumulative")}
            aria-selected={chartMode === "cumulative"}
            role="tab"
            title="Cumulative — single bar per bucket"
          >
            <ModeIconCumulative/> Cumulative
          </button>
          <button
            className={`mode-btn ${chartMode === "breakdown" ? "active" : ""}`}
            onClick={() => setChartMode("breakdown")}
            aria-selected={chartMode === "breakdown"}
            role="tab"
            title="Breakdown — stacked segments per status"
          >
            <ModeIconBreakdown/> Breakdown
          </button>
        </div>
      </div>

      <div className={`stack-bars buckets-${stats.labels.length} mode-${chartMode}`}>
        {stats.labels.map((lbl, i) => {
          const showLabel = i % labelStride === 0;
          const bucketTotal = visibleStatuses.reduce((acc, st) => acc + stats.series[st.key][i], 0);
          const tip = chartMode === "breakdown"
            ? visibleStatuses.map(st => `${st.label} ${stats.series[st.key][i]}`).join(" · ")
            : `total ${bucketTotal}`;

          // Pre-compute % heights and bottoms for breakdown so segments stack
          // without flex rounding errors. Bottom = sum of segments below.
          let acc = 0;
          const segs = chartMode === "breakdown"
            ? visibleStatuses.map(st => {
                const v = stats.series[st.key][i];
                if (v === 0) return null;
                const heightPct = (v / maxBar) * 100;
                const bottomPct = (acc / maxBar) * 100;
                acc += v;
                return { st, v, heightPct, bottomPct };
              }).filter(Boolean)
            : [];

          return (
            <div key={i} className="stack-col" title={`${lbl} — ${tip}`}>
              {chartMode === "breakdown" ? (
                <div className="stack-stack">
                  {segs.map((s, idx) => (
                    <div
                      key={s.st.key}
                      className={`stack-seg ${idx === segs.length - 1 ? "top" : ""}`}
                      style={{
                        background: s.st.color,
                        height: `${s.heightPct}%`,
                        bottom: `${s.bottomPct}%`,
                      }}
                      aria-label={`${s.st.label} ${s.v}`}
                    />
                  ))}
                </div>
              ) : (
                <div className="stack-stack cumulative-stack">
                  <div
                    className="stack-seg cumulative top"
                    style={{ height: `${(bucketTotal / maxBar) * 100}%`, bottom: 0 }}
                    aria-label={`total ${bucketTotal}`}
                  />
                </div>
              )}
              <div className="stack-cap">
                {showLabel ? lbl : ""}
                {showLabel && bucketTotal > 0 && (
                  <span className="stack-total">{bucketTotal}</span>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

const ModeIconCumulative = () => (
  <svg width="14" height="12" viewBox="0 0 14 12" fill="none" aria-hidden>
    <rect x="0.5" y="6" width="3" height="5" fill="currentColor"/>
    <rect x="5.5" y="3" width="3" height="8" fill="currentColor"/>
    <rect x="10.5" y="5" width="3" height="6" fill="currentColor"/>
  </svg>
);
const ModeIconBreakdown = () => (
  <svg width="14" height="12" viewBox="0 0 14 12" fill="none" aria-hidden>
    <rect x="1" y="6" width="3" height="5" fill="currentColor" opacity="0.4"/>
    <rect x="1" y="2" width="3" height="4" fill="currentColor"/>
    <rect x="5.5" y="4" width="3" height="7" fill="currentColor" opacity="0.4"/>
    <rect x="5.5" y="1" width="3" height="3" fill="currentColor"/>
    <rect x="10" y="7" width="3" height="4" fill="currentColor" opacity="0.4"/>
    <rect x="10" y="3" width="3" height="4" fill="currentColor"/>
  </svg>
);

function Kpi({ label, value, delta, unit, accent, deltaInverse }) {
  // For metrics where lower is better (cycle time), invert sign
  const positive = deltaInverse ? delta < 0 : delta > 0;
  const negative = deltaInverse ? delta > 0 : delta < 0;
  const arrow = delta === 0 ? "→" : positive ? "▲" : "▼";
  const cls = delta === 0 ? "flat" : positive ? "up" : "down";
  const formatted = Math.abs(delta) === 0 ? "0" : `${Math.abs(delta)}${unit === "%" ? "pp" : "%"}`;
  return (
    <div className={`kpi ${accent ? "kpi-accent" : ""}`}>
      <div className="kpi-label">{label}</div>
      <div className="kpi-value">
        {value}{unit && <span className="kpi-unit">{unit}</span>}
      </div>
      <div className={`kpi-delta ${cls}`}>
        <span className="kpi-arrow">{arrow}</span> {formatted} <span className="kpi-vs">vs prior</span>
      </div>
    </div>
  );
}

const ICON_STYLES = [
  { value: 'color', label: 'Color',  hint: 'Filled circles with semantic colors' },
  { value: 'flat',  label: 'Flat',   hint: 'Minimal monochrome SVG squares' },
  { value: 'emoji', label: 'Emoji',  hint: 'Native emoji glyphs' },
  { value: 'ascii', label: 'ASCII',  hint: 'Plain text glyphs: [ ] [/] [!] …' },
];

const THEMES = [
  { value: 'system', label: 'System', hint: 'Follow OS light / dark setting' },
  { value: 'light',  label: 'Light',  hint: 'Always light' },
  { value: 'dark',   label: 'Dark',   hint: 'Always dark' },
];

function AppearanceCard({ tweaks, setTweak }) {
  const current = tweaks?.status_style || 'color';
  const theme   = tweaks?.theme || 'system';
  return (
    <section className="card">
      <div className="card-head"><h3>Appearance</h3></div>
      <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', margin: '4px 0 6px' }}>Theme</div>
      <div className="seg" style={{ marginBottom: 14 }}>
        {THEMES.map(t => (
          <button key={t.value}
            className={`seg-btn ${theme === t.value ? 'active' : ''}`}
            title={t.hint}
            onClick={() => setTweak('theme', t.value)}>
            {t.label}
          </button>
        ))}
      </div>
      <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.04em', margin: '4px 0 6px' }}>Status icons</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {ICON_STYLES.map(opt => (
          <label key={opt.value}
            style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '7px 10px', borderRadius: 8, cursor: 'pointer',
              background: current === opt.value ? 'var(--bg-2)' : 'transparent',
              border: `1px solid ${current === opt.value ? 'var(--rule)' : 'transparent'}`,
            }}>
            <input type="radio" name="icon-style" value={opt.value}
              checked={current === opt.value}
              onChange={() => setTweak('status_style', opt.value)}
              style={{ accentColor: 'var(--accent)', flexShrink: 0 }}/>
            <div style={{ display: 'flex', gap: 5, flexShrink: 0 }}>
              {['open','in-progress','blocked','postponed','done','cancelled'].map(s => (
                <StatusStyleContext.Provider key={s} value={opt.value}>
                  <StatusIcon status={s} size={14}/>
                </StatusStyleContext.Provider>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
              <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{opt.label}</span>
              <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{opt.hint}</span>
            </div>
          </label>
        ))}
      </div>
    </section>
  );
}

// ---- Projects card (api mode only, todo 8) ----
// Registry manager: rows come straight from the server (authoritative size /
// missing flags). Rename/remove reuse the SAME app-level handlers the backlog
// sections use, so the ConfirmDialog-with-checkbox and PromptDialog flows have
// exactly one implementation.
function ProjectsCard({ projects, onRegisterProject, onRenameProject, onRemoveProject }) {
  const propRows = () => (projects || []).map(p => ({ name: p.name, path: p.path, size: undefined, missing: !!p.missing }));
  const [rows, setRows]       = useState(propRows);
  const [regPath, setRegPath] = useState('');
  const [regName, setRegName] = useState('');
  const [registering, setRegistering] = useState(false);

  // Re-fetch the registry whenever the app-level project set changes
  // (register/rename/remove/poller reloads); on failure fall back to the
  // app's list so the card never blanks out.
  useEffect(() => {
    let cancelled = false;
    ApiBackend.listProjects()
      .then(list => { if (!cancelled && Array.isArray(list)) setRows(list); })
      .catch(() => { if (!cancelled) setRows(propRows()); });
    return () => { cancelled = true; };
  }, [projects]);

  const submitRegister = (e) => {
    e.preventDefault();
    const path = regPath.trim();
    if (!path || registering) return;
    setRegistering(true);
    // onRegisterProject returns a promise; the app toasts success/error.
    Promise.resolve(onRegisterProject(path, regName.trim() || null))
      .finally(() => {
        setRegistering(false);
        setRegPath('');
        setRegName('');
      });
  };

  return (
    <section className="card span-2">
      <div className="card-head">
        <h3>Projects</h3>
        <span className="card-sub">{rows.length} registered · rename and remove act on the registry, not the file</span>
      </div>
      <table className="backup-table projects-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Path</th>
            <th>Size</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {rows.map(r => (
            <tr key={r.name}>
              <td className="mono">{r.name}</td>
              <td className="mono projects-path" title={r.path}>{r.path}</td>
              <td>{typeof r.size === 'number' ? fmtBytes(r.size) : <span className="muted">—</span>}</td>
              <td>
                {r.missing
                  ? <span className="project-missing-badge">missing</span>
                  : <span className="pill mini ok">✓ ok</span>}
              </td>
              <td className="row-actions-cell">
                <button className="row-btn" disabled={!!r.missing} onClick={() => onRenameProject(r.name)}>
                  <Icon name="edit" size={12}/> Rename
                </button>
                <button className="row-btn" onClick={() => onRemoveProject(r.name)}>
                  <Icon name="trash" size={12}/> Remove
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <form className="projects-register" onSubmit={submitRegister}>
        <input
          type="text"
          className="projects-input"
          placeholder="/path/to/project — directory or .md file"
          value={regPath}
          onChange={e => setRegPath(e.target.value)}
        />
        <input
          type="text"
          className="projects-input projects-input-name"
          placeholder="Display name (optional)"
          value={regName}
          onChange={e => setRegName(e.target.value)}
        />
        <button className="btn-primary" type="submit" disabled={!regPath.trim() || registering}>
          <Icon name="plus" size={12}/> Register
        </button>
      </form>
    </section>
  );
}

function AdminPage({ data, onClose, history, tweaks, setTweak, onForceSave, onForceBackup, onCompact, onRestore, onDownloadBackup, archiveData, onArchiveItems, onRestoreItems, onViewItem, storageMode, projects, onRegisterProject, onRenameProject, onRemoveProject }) {
  const [previewBackup, setPreviewBackup] = useState(null);

  const counts = countByStatus(data.entries);
  const total = countAll(data.entries);
  const maxStat = Math.max(1, ...Object.values(data.stats.statusMix));

  return (
    <div className="admin">
      <div className="admin-head">
        <div>
          <div className="eyebrow">Admin · Maintenance</div>
          <h2>System overview</h2>
        </div>
        <button className="btn-secondary" onClick={onClose}>← Back to backlog</button>
      </div>

      <div className="admin-grid">
        {/* Health */}
        <section className="card span-2">
          <div className="card-head">
            <h3>System health</h3>
            <span className={`pill ${data.health.integrityOk ? "ok" : "warn"}`}>
              {data.health.integrityOk ? "✓ integrity ok" : "checksum mismatch"}
            </span>
          </div>
          <dl className="kv">
            <div><dt>Last save</dt><dd>{fmtTimestamp(data.health.lastSave)}</dd></div>
            <div><dt>Last backup</dt><dd>{fmtTimestamp(data.health.lastBackup)}</dd></div>
            <div><dt>Storage mode</dt><dd>{data.health.mode}</dd></div>
            {data.health.masterPath && (
              <div><dt>File path</dt><dd className="mono small">{data.health.masterPath}</dd></div>
            )}
            <div><dt>Checksum</dt><dd className="mono small">{data.meta.checksum.slice(0, 32)}…</dd></div>
            <div><dt>Saved at</dt><dd className="mono small">{data.meta.saved}</dd></div>
            <div><dt>Entries / history</dt><dd>{data.meta.entryCount} · {data.meta.historyCount}</dd></div>
          </dl>
        </section>

        {/* Storage */}
        <section className="card">
          <div className="card-head">
            <h3>Storage</h3>
            <span className="card-sub mono">{fmtBytes(data.health.masterSize + data.health.backupDirSize + data.health.statsSize + data.health.historySize)} total</span>
          </div>
          <dl className="kv">
            <div><dt>backlog.md</dt><dd>{fmtBytes(data.health.masterSize)} · {data.meta.entryCount} entries</dd></div>
            {data.health.masterPath && (
              <div><dt>Path</dt><dd className="mono small">{data.health.masterPath}</dd></div>
            )}
            <div><dt>history.jsonl</dt><dd>{fmtBytes(data.health.historySize)} · {data.meta.historyCount.toLocaleString()} events</dd></div>
            <div><dt>backups/</dt><dd>{fmtBytes(data.health.backupDirSize)} · {data.health.backupCount} files</dd></div>
            {data.health.backupsPath && (
              <div><dt>Backups</dt><dd className="mono small">{data.health.backupsPath}</dd></div>
            )}
            <div><dt>stats.jsonl</dt><dd>{fmtBytes(data.health.statsSize)} · 90-day rollup</dd></div>
            <div><dt>Oldest event</dt><dd className="mono small">{fmtTimestamp(data.health.historyOldest)}</dd></div>
          </dl>
        </section>

        {/* Projects (api mode only) */}
        {storageMode === 'api' && (
          <ProjectsCard
            projects={projects}
            onRegisterProject={onRegisterProject}
            onRenameProject={onRenameProject}
            onRemoveProject={onRemoveProject}
          />
        )}

        {/* Manual actions */}
        <section className="card">
          <div className="card-head"><h3>Manual actions</h3></div>
          <div className="action-list">
            <button className="action-btn" onClick={onForceSave}>
              <Icon name="save" size={14}/>
              <span className="action-text">
                <span className="action-label">Force save</span>
                <span className="action-meta">last save {fmtRelative(data.health.lastSave)}</span>
              </span>
            </button>
            <button className="action-btn" onClick={onForceBackup}>
              <Icon name="archive" size={14}/>
              <span className="action-text">
                <span className="action-label">Force backup</span>
                <span className="action-meta">{data.health.backupCount} files · {fmtBytes(data.health.backupDirSize)}</span>
              </span>
            </button>
            <button className="action-btn" onClick={onCompact}>
              <Icon name="refresh" size={14}/>
              <span className="action-text">
                <span className="action-label">Compact history</span>
                <span className="action-meta">{data.meta.historyCount.toLocaleString()} events · {fmtBytes(data.health.historySize)} · since {fmtShortDate(data.health.historyOldest)}</span>
              </span>
            </button>
          </div>
        </section>

        {/* Stats overview */}
        <StatsOverview dataStats={data.stats} mostActiveProject={data.stats.mostActiveProject} history={history}/>

        {/* Appearance */}
        <AppearanceCard tweaks={tweaks} setTweak={setTweak}/>

        {/* Status mix */}
        <section className="card">
          <div className="card-head"><h3>Status mix</h3></div>
          <div className="status-mix">
            {STATUSES.map(s => {
              const v = data.stats.statusMix[s.key] || 0;
              return (
                <div key={s.key} className="mix-row">
                  <span className={`glyph status-${s.key}`}>{s.glyph}</span>
                  <span className="mix-label">{s.label}</span>
                  <span className="mix-bar">
                    <span className="mix-fill" style={{ width: `${(v / maxStat) * 100}%` }} />
                  </span>
                  <span className="mix-num">{v}</span>
                </div>
              );
            })}
          </div>
        </section>

        {/* Backup browser */}
        <section className="card span-3">
          <div className="card-head">
            <h3>Backup browser</h3>
            <span className="card-sub">{data.backups.length} files · keeping ≥7 days, ≥30 days of dailies</span>
          </div>
          <table className="backup-table">
            <thead>
              <tr>
                <th>Filename</th>
                <th>Timestamp</th>
                <th>Size</th>
                <th>Entries</th>
                <th>Integrity</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {data.backups.map(b => (
                <tr key={b.name} className={previewBackup === b.name ? "active" : ""}>
                  <td className="mono">{b.name}</td>
                  <td>{fmtTimestamp(b.timestamp)}</td>
                  <td>{fmtBytes(b.size)}</td>
                  <td>{b.entries ?? <span className="muted">—</span>}</td>
                  <td>
                    {b.valid
                      ? <span className="pill mini ok">✓ valid</span>
                      : <span className="pill mini warn"><Icon name="warn" size={10}/> mismatch</span>}
                  </td>
                  <td className="row-actions-cell">
                    <button className="row-btn" onClick={() => setPreviewBackup(previewBackup === b.name ? null : b.name)}>
                      <Icon name="eye" size={12}/> Preview
                    </button>
                    <button className="row-btn" onClick={() => onDownloadBackup(b.name)}>
                      <Icon name="download" size={12}/> Download
                    </button>
                    <button className="row-btn primary" onClick={() => onRestore(b)}>
                      Restore
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {previewBackup && (
            <div className="backup-preview">
              <div className="preview-head">
                <span className="mono">{previewBackup}</span>
                <span className="card-sub">read-only preview</span>
              </div>
              <pre className="preview-body">{`# Backlog

<!-- SECTION: ENTRIES -->

## [P0] 🔥 Personal backlog app
- [x] Markdown parser + integrity marker *(done: 2026-04-29)*
  - [x] Tokenize three sections
  - [x] SHA-256 over entries+history
- [/] Tree renderer with parent-visibility filter *(due: 2026-05-04)*
  - [ ] Expand / collapse animations
  - [ ] Drag handle within priority group *(due: 2026-05-06)*
- [!] File System Access API direct mode *(reason: Need to test on Edge — no machine yet)*
…

<!-- SECTION: HISTORY -->
| Timestamp | Item ID | Action | Details |
…

<!-- SECTION: INTEGRITY -->
<!-- saved: 2026-04-30T19:44:02Z | checksum: sha256:8a1c3e… | entries: 27 | history: 10 -->`}</pre>
            </div>
          )}
        </section>

        {/* Archive manager */}
        <ArchiveCard
          entries={data.entries}
          archiveData={archiveData}
          onArchiveItems={onArchiveItems}
          onRestoreItems={onRestoreItems}
          onViewItem={onViewItem}
          projects={storageMode === 'api' ? projects : []}
        />

        {/* Recent history */}
        <section className="card span-3">
          <div className="card-head">
            <h3>Audit log</h3>
            <span className="card-sub">
              <strong>{data.meta.historyCount.toLocaleString()}</strong> events ·
              {" "}{fmtBytes(data.health.historySize)} ·
              {" "}since {fmtShortDate(data.health.historyOldest)} ·
              {" "}showing latest 10
            </span>
          </div>
          <table className="history-table">
            <thead>
              <tr>
                <th>Timestamp</th>
                <th>Item ID</th>
                <th>Action</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              {history.slice(0, 10).map((h, i) => (
                <tr key={i}>
                  <td className="mono small">{h.timestamp}</td>
                  <td className="mono small">{h.itemId}</td>
                  <td><span className="pill mini neutral">{h.action.replace(/_/g, " ")}</span></td>
                  <td>{h.details}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>
      </div>

    </div>
  );
}

// ---- Archive Manager Card ----
// In multi-project api mode the card scopes to ONE project (select at the
// top): both lists and every count reflect the selection. Writes already
// route per-project in app.jsx (archive/restore group by _projectId), so the
// select is a read-side filter — restore of an item from project X rewrites
// only X's backlog.md + archive.md. Single-project mode renders exactly as
// before (no select).
function ArchiveCard({ entries, archiveData, onArchiveItems, onRestoreItems, onViewItem, projects = [] }) {
  const [selectedIds, setSelectedIds] = useState([]);
  const [filter, setFilter] = useState('done'); // 'done', 'cancelled', 'all'
  const [searchTerm, setSearchTerm] = useState('');
  const [archiveSearchTerm, setArchiveSearchTerm] = useState('');
  const [expandedArchive, setExpandedArchive] = useState(false);
  const isMulti = projects.length > 1;
  const [archivePid, setArchivePid] = useState(projects[0]?.id ?? null);

  // Keep the selection valid across register/rename/remove reloads.
  useEffect(() => {
    if (isMulti && !projects.some(p => p.id === archivePid)) {
      setArchivePid(projects[0]?.id ?? null);
    }
  }, [projects]);

  const pidOf = x => x._projectId ?? projects[0]?.id;
  const scopedBacklog   = isMulti ? entries.filter(e => pidOf(e) === archivePid) : entries;
  const scopedArchive   = isMulti ? (archiveData?.entries || []).filter(e => pidOf(e) === archivePid)
                                  : (archiveData?.entries || []);

  // Find archivable items (done or cancelled)
  const archivableItems = [];
  walkTree(scopedBacklog, (item) => {
    if (filter === 'all' || item.status === filter) {
      if (item.status === 'done' || item.status === 'cancelled') {
        archivableItems.push(item);
      }
    }
  });

  // Filter by search
  const filteredItems = archivableItems.filter(it =>
    !searchTerm || it.title.toLowerCase().includes(searchTerm.toLowerCase())
  );

  // Archive entries
  const archiveEntries = scopedArchive;
  const filteredArchiveItems = [];
  walkTree(archiveEntries, (item) => {
    if (!archiveSearchTerm || item.title.toLowerCase().includes(archiveSearchTerm.toLowerCase())) {
      filteredArchiveItems.push(item);
    }
  });

  const toggleSelect = (id) => {
    setSelectedIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  };

  const selectAll = () => {
    setSelectedIds(filteredItems.map(it => it.id));
  };

  const handleArchive = () => {
    if (selectedIds.length > 0) {
      onArchiveItems(selectedIds);
      setSelectedIds([]);
    }
  };

  return (
    <section className="card span-3">
      <div className="card-head">
        <h3>Archive manager</h3>
        <div className="card-head-right" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {isMulti && (
            <select
              value={archivePid ?? ''}
              onChange={e => setArchivePid(e.target.value)}
              className="archive-filter"
              title="Archive source project"
              aria-label="Archive source project"
            >
              {projects.map(p => (
                <option key={p.id} value={p.id}>{p.name}</option>
              ))}
            </select>
          )}
          <span className="card-sub">
            {archivableItems.length} archivable · {archiveEntries.length} archived
            {isMulti ? ` · ${archivePid}` : ''}
          </span>
        </div>
      </div>

      {/* Archivable items */}
      <div className="archive-section">
        <div className="archive-toolbar">
          <span className="archive-label">Archivable items</span>
          <select value={filter} onChange={e => setFilter(e.target.value)} className="archive-filter">
            <option value="done">Done only</option>
            <option value="cancelled">Cancelled only</option>
            <option value="all">Done + Cancelled</option>
          </select>
          <input
            type="text"
            placeholder="Search..."
            value={searchTerm}
            onChange={e => setSearchTerm(e.target.value)}
            className="archive-search"
          />
          <button className="btn-secondary btn-sm" onClick={selectAll} disabled={filteredItems.length === 0}>
            Select all
          </button>
          <button className="btn-primary btn-sm" onClick={handleArchive} disabled={selectedIds.length === 0}>
            Archive {selectedIds.length > 0 ? `(${selectedIds.length})` : ''}
          </button>
        </div>

        {filteredItems.length === 0 ? (
          <div className="archive-empty">No archivable items found</div>
        ) : (
          <div className="archive-list">
            {filteredItems.slice(0, 20).map(it => (
              <label key={it.id} className="archive-item">
                <input
                  type="checkbox"
                  checked={selectedIds.includes(it.id)}
                  onChange={() => toggleSelect(it.id)}
                />
                <StatusIcon status={it.status} size={14}/>
                <span className="archive-item-title">{it.title}</span>
                {it.children?.length > 0 && (
                  <span className="archive-item-children">+{it.children.length} children</span>
                )}
              </label>
            ))}
            {filteredItems.length > 20 && (
              <div className="archive-more">...and {filteredItems.length - 20} more</div>
            )}
          </div>
        )}
      </div>

      {/* Archive browser */}
      <div className="archive-section">
        <div className="archive-toolbar">
          <span className="archive-label">Archived items ({archiveEntries.length})</span>
          <button className="btn-secondary btn-sm" onClick={() => setExpandedArchive(!expandedArchive)}>
            {expandedArchive ? 'Collapse' : 'Expand'}
          </button>
          {expandedArchive && (
            <input
              type="text"
              placeholder="Search archive..."
              value={archiveSearchTerm}
              onChange={e => setArchiveSearchTerm(e.target.value)}
              className="archive-search"
            />
          )}
        </div>

        {expandedArchive && (
          filteredArchiveItems.length === 0 ? (
            <div className="archive-empty">
              {archiveEntries.length === 0 ? 'Archive is empty' : 'No matches found'}
            </div>
          ) : (
            <div className="archive-list">
              {filteredArchiveItems.slice(0, 30).map(it => (
                <div key={it.id} className="archive-item archived">
                  <StatusIcon status={it.status} size={14}/>
                  <span className="archive-item-title" onDoubleClick={() => onViewItem?.(it)}>{it.title}</span>
                  {it.archived && (
                    <span className="archive-item-date">archived {it.archived}</span>
                  )}
                  <button className="btn-secondary btn-xs" onClick={() => onRestoreItems([it.id])}>Restore</button>
                </div>
              ))}
              {filteredArchiveItems.length > 30 && (
                <div className="archive-more">...and {filteredArchiveItems.length - 30} more</div>
              )}
            </div>
          )
        )}
      </div>
    </section>
  );
}

window.AdminPage = AdminPage;
window.ArchiveCard = ArchiveCard;
window.ProjectsCard = ProjectsCard;