Add Podcast Episode Workflow (Lane A / Lane B) with Nuggets steps; released dates from the feed; v2.15.0

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/AdminPage.tsx

@@ -730,7 +730,7 @@ type AdminView =
   | 'start-here'
   | 'about:show-copy' | 'about:bio' | 'about:testimonials'
   | 'contact:profile' | 'contact:copy'
-  | 'podcast:current-series' | 'podcast:highlights' | 'podcast:finished-books' | 'podcast:scripts' | 'podcast:rss'
+  | 'podcast:current-series' | 'podcast:highlights' | 'podcast:finished-books' | 'podcast:scripts' | 'podcast:workflow' | 'podcast:rss'
   | 'nuggets:settings' | 'nuggets:hosts' | 'nuggets:upload-portal' | 'nuggets:announcement' | 'nuggets:guidelines' | 'nuggets:history' | 'nuggets:workflow'
   | 'downloads' | 'custom-links' | 'content-blocks' | 'books' | 'recommended-resources'
   | 'inbox'
@@ -782,6 +782,7 @@ const ADMIN_NAV: NavGroup[] = [
         { kind: 'leaf', view: 'podcast:highlights', label: 'Ep. Highlights' },
         { kind: 'leaf', view: 'podcast:finished-books', label: 'Finished Books' },
         { kind: 'leaf', view: 'podcast:scripts', label: 'Episode Scripts' },
+        { kind: 'leaf', view: 'podcast:workflow', label: 'Episode Workflow' },
         { kind: 'leaf', view: 'podcast:rss', label: 'RSS Feed' },
       ]},
       { kind: 'parent', id: 'nuggets', label: 'Nuggets', children: [
@@ -1798,6 +1799,225 @@ function NuggetsWorkflowAdmin() {
   )
 }
 
+// ── Podcast Episode Workflow (Lane A / Lane B) ─────────────────────────────
+interface PodcastWorkflowItem {
+  key: string
+  season: string
+  episodeNumber: string
+  title: string
+  lane: 'A' | 'B' | 'other'
+  released: boolean
+  releaseDate?: string
+  spotifyUrl?: string
+  hasScript?: boolean
+  planned?: boolean
+  state: WorkflowState
+}
+
+function PodcastWorkflowAdmin({ laneA, laneB }: { laneA: { title: string; season?: number }; laneB: { title: string; season?: number } }) {
+  const [items, setItems] = useState<PodcastWorkflowItem[]>([])
+  const [feedOk, setFeedOk] = useState(true)
+  const [loading, setLoading] = useState(true)
+  const [lane, setLane] = useState<'A' | 'B' | 'other'>('A')
+  const [selectedKey, setSelectedKey] = useState('')
+  const [showReleased, setShowReleased] = useState(false)
+  const [newNumber, setNewNumber] = useState('')
+  const [newTitle, setNewTitle] = useState('')
+  const [error, setError] = useState('')
+
+  const reload = () =>
+    fetch('/api/admin/podcast-workflow')
+      .then(r => r.json())
+      .then(d => { setItems(d.items ?? []); setFeedOk(d.feedOk !== false) })
+      .catch(() => setError('Could not load episodes.'))
+      .finally(() => setLoading(false))
+
+  useEffect(() => { reload() }, [])
+
+  const laneSeason = lane === 'A' ? laneA.season : lane === 'B' ? laneB.season : undefined
+  const hasOther = items.some(i => i.lane === 'other')
+  const inLane = items.filter(i => i.lane === lane)
+  const upcoming = inLane.filter(i => !i.released)
+  const released = inLane.filter(i => i.released)
+  const selected = items.find(i => i.key === selectedKey) ?? null
+
+  const save = async (key: string, patch: Record<string, unknown>) => {
+    setError('')
+    try {
+      const r = await fetch(`/api/admin/podcast-workflow/${encodeURIComponent(key)}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(patch),
+      })
+      const d = await r.json()
+      if (!r.ok) throw new Error(d.message ?? 'Save failed.')
+      setItems(prev => prev.map(i => (i.key === key ? { ...i, state: d.state } : i)))
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Save failed.')
+    }
+  }
+  const patchLocal = (key: string, patch: Partial<WorkflowState>) =>
+    setItems(prev => prev.map(i => (i.key === key ? { ...i, state: { ...i.state, ...patch } } : i)))
+
+  const addPlanned = async () => {
+    setError('')
+    const r = await fetch('/api/admin/podcast-workflow/planned', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ season: laneSeason ? String(laneSeason) : '', episodeNumber: newNumber, title: newTitle }),
+    })
+    const d = await r.json()
+    if (!r.ok) { setError(d.message ?? 'Could not add episode.'); return }
+    setNewNumber(''); setNewTitle('')
+    await reload()
+    setSelectedKey(d.key)
+  }
+  const removePlanned = async (key: string) => {
+    if (!confirm('Remove this planned episode and its progress?')) return
+    await fetch(`/api/admin/podcast-workflow/planned/${encodeURIComponent(key)}`, { method: 'DELETE' })
+    setSelectedKey('')
+    reload()
+  }
+
+  const label = (i: PodcastWorkflowItem) => `${i.episodeNumber ? `Ep ${i.episodeNumber}` : 'Ep'}${i.title ? ` — ${i.title}` : ''}`
+  const doneCount = (i: PodcastWorkflowItem) => (i.released ? WORKFLOW_STEP_DEFS.length : WORKFLOW_STEP_DEFS.filter(s => i.state.steps[s.key]).length)
+
+  const row = (i: PodcastWorkflowItem) => (
+    <button
+      key={i.key}
+      type="button"
+      onClick={() => setSelectedKey(i.key)}
+      style={{
+        display: 'block', width: '100%', textAlign: 'left', padding: '8px 10px', marginBottom: 6,
+        border: `1px solid ${i.key === selectedKey ? '#8a6d2f' : 'var(--color-border, #e5e0d5)'}`,
+        borderRadius: 6, background: 'transparent', cursor: 'pointer', color: 'inherit',
+      }}
+    >
+      <strong>{label(i)}</strong>
+      <div style={{ fontSize: '0.78rem', opacity: 0.75 }}>
+        {i.released ? `Released ${i.releaseDate || ''}` : `${doneCount(i)}/${WORKFLOW_STEP_DEFS.length} steps`}
+        {!i.released && i.hasScript ? ' · script ready' : ''}
+      </div>
+    </button>
+  )
+
+  return (
+    <section className="admin-panel-section" aria-label="Podcast episode workflow">
+      <div className="admin-panel-head">
+        <h2>Podcast — Episode Workflow</h2>
+        <p>Every episode for each series: what’s still in progress, and what’s already out (dates come from your Spotify feed).</p>
+      </div>
+      {!feedOk && <p style={{ color: '#c0392b' }}>Couldn’t reach the podcast feed, so released episodes may be missing right now.</p>}
+      {error && <p style={{ color: '#c0392b' }}>{error}</p>}
+      <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
+        {([['A', laneA.title || 'Primary series'], ['B', laneB.title || 'Second series']] as const).map(([k, t]) => (
+          <button key={k} type="button" className={lane === k ? 'btn-admin-save' : 'btn-admin-ghost'} onClick={() => { setLane(k); setSelectedKey('') }}>
+            Lane {k} — {t} ({items.filter(i => i.lane === k && !i.released).length} in progress)
+          </button>
+        ))}
+        {hasOther && (
+          <button type="button" className={lane === 'other' ? 'btn-admin-save' : 'btn-admin-ghost'} onClick={() => { setLane('other'); setSelectedKey('') }}>
+            Other ({items.filter(i => i.lane === 'other' && !i.released).length} in progress)
+          </button>
+        )}
+      </div>
+      {lane !== 'other' && !laneSeason && (
+        <p className="admin-stats-note">Set this lane’s Podcast Season Number in Current Series so its episodes can be matched.</p>
+      )}
+
+      {loading ? <p className="admin-stats-note">Loading…</p> : (
+        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(220px, 300px) 1fr', gap: 20, alignItems: 'start' }}>
+          <div>
+            <strong style={{ fontSize: '0.82rem' }}>Not released yet</strong>
+            <div style={{ marginTop: 6 }}>
+              {upcoming.length === 0 && <p className="admin-stats-note">Nothing in progress.</p>}
+              {upcoming.map(row)}
+            </div>
+            {lane !== 'other' && (
+              <div style={{ display: 'flex', gap: 6, margin: '8px 0 14px', flexWrap: 'wrap' }}>
+                <input type="number" min={1} placeholder="Ep #" value={newNumber} onChange={e => setNewNumber(e.target.value)} style={{ width: 70 }} aria-label="New episode number" />
+                <input type="text" placeholder="Title (optional)" value={newTitle} onChange={e => setNewTitle(e.target.value)} style={{ flex: 1, minWidth: 120 }} aria-label="New episode title" />
+                <button type="button" className="btn-admin-add" onClick={addPlanned} disabled={!newNumber}>Add</button>
+              </div>
+            )}
+            <label style={{ fontSize: '0.82rem', display: 'block', marginBottom: 6 }}>
+              <input type="checkbox" checked={showReleased} onChange={e => setShowReleased(e.target.checked)} /> Show released ({released.length})
+            </label>
+            {showReleased && released.map(row)}
+          </div>
+
+          <div>
+            {!selected ? <p className="admin-stats-note">Select an episode to work on.</p> : (
+              <>
+                <h3 style={{ marginTop: 0 }}>{label(selected)}</h3>
+                {selected.released ? (
+                  <p style={{ fontSize: '0.86rem' }}>
+                    Released {selected.releaseDate}
+                    {selected.spotifyUrl && <> · <a href={selected.spotifyUrl} target="_blank" rel="noopener noreferrer">Listen</a></>}
+                  </p>
+                ) : (
+                  <p style={{ fontSize: '0.86rem', opacity: 0.8 }}>
+                    {selected.hasScript ? 'Script uploaded.' : 'No script yet.'} This moves to Released on its own once it shows up in the feed.
+                  </p>
+                )}
+                <ol style={{ paddingLeft: 0, listStyle: 'none', margin: 0 }}>
+                  {WORKFLOW_STEP_DEFS.map((s, idx) => {
+                    const completedAt = selected.state.steps[s.key]
+                    const checked = selected.released || Boolean(completedAt)
+                    return (
+                      <li key={s.key} style={{ padding: '12px 0', borderTop: '1px solid var(--color-border, #e5e0d5)' }}>
+                        <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', cursor: selected.released ? 'default' : 'pointer' }}>
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            disabled={selected.released}
+                            onChange={e => save(selected.key, { steps: { [s.key]: e.target.checked } })}
+                            style={{ marginTop: 4 }}
+                          />
+                          <span>
+                            <strong>{idx + 1}. {s.label}</strong>
+                            <span style={{ display: 'block', fontSize: '0.8rem', opacity: 0.7 }}>
+                              {s.hint}{completedAt && !selected.released ? ` · done ${new Date(completedAt).toLocaleString()}` : ''}
+                            </span>
+                          </span>
+                        </label>
+                        {s.key === 'coldOpen' && (
+                          <textarea
+                            rows={4}
+                            placeholder="Cold open script / hook…"
+                            value={selected.state.coldOpenText}
+                            disabled={selected.released}
+                            onChange={e => patchLocal(selected.key, { coldOpenText: e.target.value })}
+                            onBlur={e => save(selected.key, { coldOpenText: e.target.value })}
+                            style={{ width: '100%', marginTop: 8 }}
+                          />
+                        )}
+                      </li>
+                    )
+                  })}
+                </ol>
+                <div className="admin-field" style={{ marginTop: 12 }}>
+                  <label htmlFor="pw-notes">Notes</label>
+                  <textarea
+                    id="pw-notes"
+                    rows={3}
+                    value={selected.state.notes}
+                    onChange={e => patchLocal(selected.key, { notes: e.target.value })}
+                    onBlur={e => save(selected.key, { notes: e.target.value })}
+                  />
+                </div>
+                {selected.planned && !selected.released && !selected.hasScript && (
+                  <button type="button" className="btn-admin-remove" onClick={() => removePlanned(selected.key)}>Remove planned episode</button>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}
+
 export default function AdminPage({ content, onSave, onLogout }: Props) {
   const normalizedContent = normalizeSiteContentForAdmin(content)
   const [form, setForm] = useState<SiteContent>(normalizedContent)
@@ -5992,6 +6212,7 @@ const [dashboardNow, setDashboardNow] = useState(() => new Date())
           )}
 
           {/* EPISODE SCRIPTS */}
+          {adminView === 'podcast:workflow' && <PodcastWorkflowAdmin laneA={{ title: form.seriesTitle, season: form.seriesSeason }} laneB={{ title: form.secondSeries?.title ?? '', season: form.secondSeries?.season }} />}
           {adminView === 'podcast:scripts' && (
             <section className="admin-panel-section">
               <div className="admin-panel-head">