function PendingView() {
  const { state, update } = useStore();
  const TODAY = useToday();
  const today = fmtDate(TODAY);
  const [draft, setDraft] = React.useState('');
  const [filter, setFilter] = React.useState('open');
  const [targetDate, setTargetDate] = React.useState(today);
  const pending = Object.values(state.pending || {}).filter(Boolean).sort((a, b) => {
    const ad = a.status === 'done' ? '9999-12-31' : (a.targetDate || a.sourceDate || '9999-12-31');
    const bd = b.status === 'done' ? '9999-12-31' : (b.targetDate || b.sourceDate || '9999-12-31');
    if (ad !== bd) return ad.localeCompare(bd);
    return String(a.createdAt || '').localeCompare(String(b.createdAt || ''));
  });
  const visible = pending.filter(item => {
    if (filter === 'open') return item.status !== 'done';
    if (filter === 'done') return item.status === 'done';
    if (filter === 'overdue') return item.status !== 'done' && item.targetDate && item.targetDate < today;
    return true;
  });
  const openCount = pending.filter(item => item.status !== 'done').length;
  const overdueCount = pending.filter(item => item.status !== 'done' && item.targetDate && item.targetDate < today).length;

  function addPending() {
    const title = draft.trim();
    if (!title) return;
    const item = createPendingItem(title, today, { targetDate });
    update(prev => ({ ...prev, pending: { ...(prev.pending || {}), [item.id]: item } }));
    setDraft('');
  }

  function patchPending(id, patch) {
    update(prev => ({
      ...prev,
      pending: {
        ...(prev.pending || {}),
        [id]: {
          ...(prev.pending?.[id] || {}),
          ...patch,
        },
      },
    }));
  }

  function completePending(id, done) {
    patchPending(id, { status: done ? 'done' : 'open', completedAt: done ? new Date().toISOString() : '' });
  }

  function deletePending(id) {
    update(prev => {
      const nextPending = { ...(prev.pending || {}) };
      delete nextPending[id];
      return { ...prev, pending: nextPending };
    });
  }

  return (
    <div className="page">
      <PageHead
        kicker="Pending"
        title="Carry-forward queue"
        subtitle="Use this when dinner, work, or fatigue breaks the exact schedule. Nothing is lost; it is deliberately rescheduled."
      />

      <div className="grid three">
        <Stat value={openCount} label="Open items" tone={openCount ? 'amber' : 'accent'} />
        <Stat value={overdueCount} label="Overdue" tone={overdueCount ? 'rose' : 'accent'} />
        <Stat value={pending.length} label="Total captured" />
      </div>

      <div className="panel stack">
        <h2>Add Pending Item</h2>
        <div className="calendar-toolbar">
          <input className="input" value={draft} onChange={event => setDraft(event.target.value)} placeholder="Example: redo SQLAlchemy repository tests" />
          <input className="input" type="date" value={targetDate} onChange={event => setTargetDate(event.target.value)} />
          <select className="select" value={filter} onChange={event => setFilter(event.target.value)}>
            <option value="open">Open</option>
            <option value="overdue">Overdue</option>
            <option value="done">Done</option>
            <option value="all">All</option>
          </select>
          <button className="btn primary" onClick={addPending}>Add</button>
        </div>
      </div>

      <div className="panel">
        {visible.length ? visible.map(item => (
          <div className="pending-row" key={item.id}>
            <div className="between">
              <label className="checkline" style={{ flex: '1 1 auto' }}>
                <input type="checkbox" checked={item.status === 'done'} onChange={event => completePending(item.id, event.target.checked)} />
                <span><strong>{item.title}</strong></span>
              </label>
              <div className="row">
                {item.targetDate && item.targetDate < today && item.status !== 'done' && <Pill tone="weak">overdue</Pill>}
                <Pill tone={item.status === 'done' ? 'done' : 'genai'}>{item.status}</Pill>
              </div>
            </div>
            <div className="grid three">
              <label className="stack">
                <span className="kicker">Target</span>
                <input className="input" type="date" value={item.targetDate || ''} onChange={event => patchPending(item.id, { targetDate: event.target.value })} />
              </label>
              <label className="stack">
                <span className="kicker">Priority</span>
                <select className="select" value={item.priority || 'normal'} onChange={event => patchPending(item.id, { priority: event.target.value })}>
                  <option value="low">low</option>
                  <option value="normal">normal</option>
                  <option value="high">high</option>
                </select>
              </label>
              <label className="stack">
                <span className="kicker">Source</span>
                <input className="input" value={item.sourceDate || ''} onChange={event => patchPending(item.id, { sourceDate: event.target.value })} />
              </label>
            </div>
            <textarea className="textarea" value={item.note || ''} onChange={event => patchPending(item.id, { note: event.target.value })} placeholder="Why is this pending? What exact action closes it?" />
            <div className="row">
              <button className="btn small" onClick={() => patchPending(item.id, { targetDate: today })}>Move to today</button>
              <button className="btn small" onClick={() => patchPending(item.id, { targetDate: addDays(today, 1) })}>Move tomorrow</button>
              <button className="btn small ghost" onClick={() => deletePending(item.id)}>Delete</button>
            </div>
          </div>
        )) : (
          <EmptyState title="No pending items here" body="The queue is clear for the current filter." />
        )}
      </div>
    </div>
  );
}

window.PendingView = PendingView;