import { useEffect, useRef, useState } from 'react'
import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'
import type { ChangeEvent } from 'react'
import { Link } from 'react-router-dom'
import type { SiteContent, CustomLink, CustomBlock, ArchivedSeries, ArchivedSeriesResourceLink, ArchivedSeriesNote, ColossiansStudySection, StudyProgram, RedirectRule, PodcastFeaturedLink, SeoSettings, LegalSettings } from './content'
import { DEFAULTS } from './content'
import { AnalyticsPanel } from './components/AnalyticsPanel'
import { AdminCollapsibleCard } from './components/AdminCollapsibleCard'
import { useAutosave } from './hooks/useAutosave'

interface SortableLessonSectionProps {
  section: ColossiansStudySection
  study: StudyProgram
  updateStudySection: (studyId: string, sectionId: string, field: keyof ColossiansStudySection, value: string | string[] | number) => void
  removeStudySection: (studyId: string, sectionId: string) => void
}

function SortableLessonSection({ section, study, updateStudySection, removeStudySection }: SortableLessonSectionProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: section.id })
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
    background: isDragging ? '#f8f7f2' : undefined,
    border: isDragging ? '2px solid #e0c070' : undefined,
    marginBottom: '0.5rem',
  }

  return (
    <details ref={setNodeRef} style={style} className="admin-collapsible-card" open={false}>
      <summary className="admin-collapsible-summary" {...attributes} {...listeners} style={{ cursor: 'grab', userSelect: 'none' }}>
        <div>
          <strong>Lesson {section.reference || section.id}</strong>
          <p>{section.title || 'Untitled section'}</p>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
          <a href={`/study/${study.slug}/${section.id}`} target="_blank" rel="noopener noreferrer" className="btn-admin-secondary" onClick={e => e.stopPropagation()}>Preview</a>
          <span className="admin-collapsible-hint">Expand to edit lesson</span>
        </div>
      </summary>
      <div className="admin-collapsible-body">
        <div className="admin-array-row">
          <div className="admin-array-fields">
            <div className="admin-field">
              <label htmlFor={`study-section-chapter-${study.id}-${section.id}`}>Chapter</label>
              <select id={`study-section-chapter-${study.id}-${section.id}`} value={section.chapter} onChange={e => updateStudySection(study.id, section.id, 'chapter', Number(e.target.value) || 1)}>
                {Array.from({ length: Math.max(study.numberOfChapters, section.chapter, 1) }, (_, index) => index + 1).map(chapterNumber => (
                  <option key={chapterNumber} value={chapterNumber}>Chapter {chapterNumber}</option>
                ))}
              </select>
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-reference-${study.id}-${section.id}`}>Passage Reference</label>
              <input id={`study-section-reference-${study.id}-${section.id}`} type="text" value={section.reference} placeholder="1:1-2" onChange={e => updateStudySection(study.id, section.id, 'reference', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-title-${study.id}-${section.id}`}>Section Title</label>
              <input id={`study-section-title-${study.id}-${section.id}`} type="text" value={section.title} placeholder="Paul's Greeting" onChange={e => updateStudySection(study.id, section.id, 'title', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-audio-${study.id}-${section.id}`}>Spotify Embed URL (optional)</label>
              <input id={`study-section-audio-${study.id}-${section.id}`} type="url" value={section.audioEmbedUrl ?? ''} placeholder="https://open.spotify.com/embed/episode/..." onChange={e => updateStudySection(study.id, section.id, 'audioEmbedUrl', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-released-${study.id}-${section.id}`}>Release Date (optional)</label>
              <input id={`study-section-released-${study.id}-${section.id}`} type="datetime-local" value={section.releasedAt ? new Date(section.releasedAt).toISOString().slice(0, 16) : ''} onChange={e => {
                const val = e.target.value;
                if (val) {
                  const date = new Date(val + ':00Z');
                  updateStudySection(study.id, section.id, 'releasedAt', date.toISOString());
                } else {
                  updateStudySection(study.id, section.id, 'releasedAt', '');
                }
              }} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-summary-${study.id}-${section.id}`}>Short Summary</label>
              <textarea id={`study-section-summary-${study.id}-${section.id}`} rows={3} value={section.summary} placeholder="One to two sentences that summarize the section." onChange={e => updateStudySection(study.id, section.id, 'summary', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-announcement-${study.id}-${section.id}`}>Lesson Announcement</label>
              <textarea id={`study-section-announcement-${study.id}-${section.id}`} rows={3} value={section.announcement ?? ''} placeholder="A short instructor announcement for this lesson." onChange={e => updateStudySection(study.id, section.id, 'announcement', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-passage-${study.id}-${section.id}`}>Passage Text</label>
              <textarea id={`study-section-passage-${study.id}-${section.id}`} rows={4} value={section.passageText} placeholder="Paste the passage text here." onChange={e => updateStudySection(study.id, section.id, 'passageText', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-commentary-${study.id}-${section.id}`}>Commentary</label>
              <textarea id={`study-section-commentary-${study.id}-${section.id}`} rows={10} value={section.commentary} placeholder="Add your teaching notes and explanation here. Press Enter twice to start a new paragraph." onChange={e => updateStudySection(study.id, section.id, 'commentary', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-greek-${study.id}-${section.id}`}>Greek Words</label>
              <textarea id={`study-section-greek-${study.id}-${section.id}`} rows={4} value={(section.greekNotes ?? []).join('\n')} placeholder="One note per line" onChange={e => updateStudySection(study.id, section.id, 'greekNotes', e.target.value.split('\n').map(line => line.trim()).filter(Boolean))} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-focus-${study.id}-${section.id}`}>Focus Question</label>
              <input id={`study-section-focus-${study.id}-${section.id}`} type="text" value={section.focusQuestion ?? ''} placeholder="Shown on the lesson card (defaults to first study question)" onChange={e => updateStudySection(study.id, section.id, 'focusQuestion', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-questions-${study.id}-${section.id}`}>Study Questions</label>
              <textarea id={`study-section-questions-${study.id}-${section.id}`} rows={5} value={(section.studyQuestions ?? []).join('\n')} placeholder="One question per line" onChange={e => updateStudySection(study.id, section.id, 'studyQuestions', e.target.value.split('\n').map(line => line.trim()).filter(Boolean))} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-checkpoint-prompt-${study.id}-${section.id}`}>Checkpoint Prompt</label>
              <input id={`study-section-checkpoint-prompt-${study.id}-${section.id}`} type="text" value={section.checkpointPrompt ?? ''} placeholder="A short prompt for the checkpoint" onChange={e => updateStudySection(study.id, section.id, 'checkpointPrompt', e.target.value)} />
            </div>
            <div className="admin-field">
              <label htmlFor={`study-section-checkpoint-questions-${study.id}-${section.id}`}>Checkpoint Questions</label>
              <textarea id={`study-section-checkpoint-questions-${study.id}-${section.id}`} rows={5} value={(section.checkpointQuestions ?? []).join('\n')} placeholder="One checkpoint question per line" onChange={e => updateStudySection(study.id, section.id, 'checkpointQuestions', e.target.value.split('\n').map(line => line.trim()).filter(Boolean))} />
              <p className="admin-field-help">Optional reflection questions that learners answer before completing the lesson.</p>
            </div>
          </div>
          <button type="button" className="btn-admin-remove" onClick={() => removeStudySection(study.id, section.id)}>Remove Lesson</button>
        </div>
      </div>
    </details>
  )
}

interface StudyUserRecord {
  id: string
  username: string
  displayName: string
  createdAt: string | null
  lastLoginAt: string | null
  enrolledStudies: Array<{ slug: string; title: string }>
  noteCount: number
  subscribeNewsletter: boolean
  studyRemindersEnabled: boolean
}

function StudyUsersPanel({ studies }: { studies: StudyProgram[] }) {
  const [users, setUsers] = useState<StudyUserRecord[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')
  const [expandedId, setExpandedId] = useState<string | null>(null)
  const [editDisplayName, setEditDisplayName] = useState<Record<string, string>>({})
  const [newPassword, setNewPassword] = useState<Record<string, string>>({})
  const [msg, setMsg] = useState<Record<string, string>>({})
  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)

  function flashMsg(id: string, text: string) {
    setMsg(prev => ({ ...prev, [id]: text }))
    setTimeout(() => setMsg(prev => { const n = { ...prev }; delete n[id]; return n }), 4000)
  }

  useEffect(() => {
    fetch('/api/admin/study-users')
      .then(r => r.json())
      .then((d: { users: StudyUserRecord[] }) => { setUsers(d.users ?? []); setLoading(false) })
      .catch(() => setLoading(false))
  }, [])

  async function patchUser(id: string, body: Record<string, string>) {
    const res = await fetch(`/api/admin/study-users/${id}`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    })
    const data = await res.json()
    if (!res.ok) throw new Error(data.message ?? 'Error')
    return data
  }

  async function handleSaveDisplayName(user: StudyUserRecord) {
    try {
      const name = editDisplayName[user.id] ?? user.displayName
      await patchUser(user.id, { displayName: name })
      setUsers(prev => prev.map(u => u.id === user.id ? { ...u, displayName: name } : u))
      flashMsg(user.id, 'Display name updated.')
    } catch (e) { flashMsg(user.id, e instanceof Error ? e.message : 'Error') }
  }

  async function handleResetPassword(user: StudyUserRecord) {
    const pw = newPassword[user.id] ?? ''
    if (pw.length < 8) { flashMsg(user.id, 'Password must be at least 8 characters.'); return }
    try {
      await patchUser(user.id, { newPassword: pw })
      setNewPassword(prev => { const n = { ...prev }; delete n[user.id]; return n })
      flashMsg(user.id, 'Password reset. Their active sessions have been signed out.')
    } catch (e) { flashMsg(user.id, e instanceof Error ? e.message : 'Error') }
  }

  async function handleEnroll(user: StudyUserRecord, slug: string) {
    try {
      const data = await patchUser(user.id, { addEnrollment: slug })
      setUsers(prev => prev.map(u => {
        if (u.id !== user.id) return u
        const study = studies.find(s => s.slug === slug)
        const already = u.enrolledStudies.find(e => e.slug === slug)
        return { ...u, enrolledStudies: already ? u.enrolledStudies : [...u.enrolledStudies, { slug, title: study?.title ?? slug }] }
      }))
      flashMsg(user.id, `Enrolled in ${slug}.`)
      return data
    } catch (e) { flashMsg(user.id, e instanceof Error ? e.message : 'Error') }
  }

  async function handleUnenroll(user: StudyUserRecord, slug: string) {
    try {
      await patchUser(user.id, { removeEnrollment: slug })
      setUsers(prev => prev.map(u => u.id === user.id ? { ...u, enrolledStudies: u.enrolledStudies.filter(e => e.slug !== slug) } : u))
      flashMsg(user.id, `Removed from ${slug}.`)
    } catch (e) { flashMsg(user.id, e instanceof Error ? e.message : 'Error') }
  }

  async function handleDelete(id: string) {
    try {
      await fetch(`/api/admin/study-users/${id}`, { method: 'DELETE' })
      setUsers(prev => prev.filter(u => u.id !== id))
      setConfirmDeleteId(null)
      setExpandedId(null)
    } catch { /* ignore */ }
  }

  const filtered = users.filter(u =>
    u.username.toLowerCase().includes(search.toLowerCase()) ||
    u.displayName.toLowerCase().includes(search.toLowerCase())
  )

  if (loading) return <p className="admin-stats-note">Loading study users…</p>

  return (
    <section className="admin-panel-section" aria-label="Study Users">
      <div className="admin-panel-head">
        <h2>Study Users</h2>
        <p>Manage student accounts — reset passwords, update display names, adjust enrollments, or delete accounts.</p>
      </div>

      <div className="admin-field" style={{ maxWidth: '360px', marginBottom: '1.25rem' }}>
        <input
          type="search"
          placeholder="Search by email or display name…"
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
      </div>

      {filtered.length === 0 && <p className="admin-stats-note">{users.length === 0 ? 'No study users yet.' : 'No users match your search.'}</p>}

      <div className="admin-study-users-list">
        {filtered.map(user => {
          const isExpanded = expandedId === user.id
          const unenrolledStudies = studies.filter(s => !user.enrolledStudies.find(e => e.slug === s.slug))
          return (
            <div key={user.id} className={`admin-study-user-card${isExpanded ? ' admin-study-user-card--open' : ''}`}>
              <button
                type="button"
                className="admin-study-user-header"
                onClick={() => {
                  setExpandedId(isExpanded ? null : user.id)
                  setEditDisplayName(prev => ({ ...prev, [user.id]: user.displayName }))
                }}
              >
                <div className="admin-study-user-header-left">
                  <strong>{user.displayName || user.username}</strong>
                  {user.displayName && <span className="admin-study-user-email">{user.username}</span>}
                </div>
                <div className="admin-study-user-header-right">
                  <span className="admin-study-user-pill">{user.enrolledStudies.length} enrolled</span>
                  <span className="admin-study-user-pill">{user.noteCount} notes</span>
                  <span style={{ color: '#5a5440', fontSize: '0.8rem' }}>{isExpanded ? '▲' : '▼'}</span>
                </div>
              </button>

              {isExpanded && (
                <div className="admin-study-user-body">
                  <div className="admin-study-user-meta">
                    <span>Joined: {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : '—'}</span>
                    <span>Last login: {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleDateString() : '—'}</span>
                    <span>Newsletter: {user.subscribeNewsletter ? 'Yes' : 'No'}</span>
                    <span>Reminders: {user.studyRemindersEnabled ? 'On' : 'Off'}</span>
                  </div>

                  {/* Display Name */}
                  <div className="admin-study-user-section">
                    <h4>Display Name</h4>
                    <div className="admin-study-user-row">
                      <input
                        type="text"
                        value={editDisplayName[user.id] ?? user.displayName}
                        onChange={e => setEditDisplayName(prev => ({ ...prev, [user.id]: e.target.value }))}
                        placeholder="Display name"
                        maxLength={80}
                      />
                      <button type="button" className="btn-admin-save" onClick={() => handleSaveDisplayName(user)}>Save</button>
                    </div>
                  </div>

                  {/* Password Reset */}
                  <div className="admin-study-user-section">
                    <h4>Reset Password</h4>
                    <div className="admin-study-user-row">
                      <input
                        type="text"
                        value={newPassword[user.id] ?? ''}
                        onChange={e => setNewPassword(prev => ({ ...prev, [user.id]: e.target.value }))}
                        placeholder="New password (min 8 chars)"
                        autoComplete="off"
                      />
                      <button type="button" className="btn-admin-save" onClick={() => handleResetPassword(user)}>Reset</button>
                    </div>
                    <p className="admin-stats-note" style={{ marginTop: '0.25rem' }}>This immediately signs them out of all active sessions.</p>
                  </div>

                  {/* Enrollments */}
                  <div className="admin-study-user-section">
                    <h4>Enrollments</h4>
                    {user.enrolledStudies.length === 0
                      ? <p className="admin-stats-note">Not enrolled in any studies.</p>
                      : (
                        <ul className="admin-study-user-enrollments">
                          {user.enrolledStudies.map(e => (
                            <li key={e.slug}>
                              <span>{e.title}</span>
                              <button type="button" className="btn-admin-remove" style={{ fontSize: '0.78rem', padding: '0.2rem 0.6rem' }} onClick={() => handleUnenroll(user, e.slug)}>Remove</button>
                            </li>
                          ))}
                        </ul>
                      )
                    }
                    {unenrolledStudies.length > 0 && (
                      <div className="admin-study-user-row" style={{ marginTop: '0.5rem' }}>
                        <select
                          defaultValue=""
                          onChange={e => { if (e.target.value) { handleEnroll(user, e.target.value); e.target.value = '' } }}
                        >
                          <option value="">Enroll in a study…</option>
                          {unenrolledStudies.map(s => <option key={s.slug} value={s.slug}>{s.title}</option>)}
                        </select>
                      </div>
                    )}
                  </div>

                  {msg[user.id] && <p className="admin-study-user-msg">{msg[user.id]}</p>}

                  {/* Delete */}
                  <div className="admin-study-user-section" style={{ borderTop: '1px solid rgba(201,168,76,0.1)', paddingTop: '0.75rem', marginTop: '0.5rem' }}>
                    {confirmDeleteId === user.id ? (
                      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
                        <span style={{ fontSize: '0.85rem', color: '#e05c5c' }}>Delete this account permanently?</span>
                        <button type="button" className="btn-admin-remove" onClick={() => handleDelete(user.id)}>Yes, Delete</button>
                        <button type="button" className="btn-admin-reset" onClick={() => setConfirmDeleteId(null)}>Cancel</button>
                      </div>
                    ) : (
                      <button type="button" className="btn-admin-remove" style={{ fontSize: '0.82rem' }} onClick={() => setConfirmDeleteId(user.id)}>Delete Account</button>
                    )}
                  </div>
                </div>
              )}
            </div>
          )
        })}
      </div>
    </section>
  )
}

function EmailTemplatesPanel({
  form,
  handleChange,
  renderSaveStatus,
}: {
  form: SiteContent
  handleChange: (key: StringField, value: string) => void
  renderSaveStatus: () => React.ReactNode
}) {
  const [expandedEmail, setExpandedEmail] = useState<string | null>(null)

  function EmailTemplateCard({
    type, icon, title, trigger, autoVars, fieldKeys, openKey,
  }: {
    type: 'newsletter' | 'study' | 'transactional'
    icon: string
    title: string
    trigger: string
    autoVars?: string
    fieldKeys: string[]
    openKey: string
  }) {
    const isOpen = expandedEmail === openKey
    return (
      <div className={`admin-et-card admin-et-card--${type}${isOpen ? ' admin-et-card--open' : ''}`}>
        <button
          type="button"
          className="admin-et-card-header"
          onClick={() => setExpandedEmail(isOpen ? null : openKey)}
        >
          <span className="admin-et-card-icon" aria-hidden="true">{icon}</span>
          <div className="admin-et-card-meta">
            <div className="admin-et-card-title-row">
              <span className={`admin-et-badge admin-et-badge--${type}`}>{type}</span>
              <strong className="admin-et-card-title">{title}</strong>
            </div>
            <p className="admin-et-card-trigger">⚡ {trigger}</p>
          </div>
          <span className="admin-et-card-chevron">{isOpen ? '▲' : '▼'}</span>
        </button>
        {isOpen && (
          <div className="admin-et-card-body">
            {autoVars && (
              <p className="admin-et-card-vars">
                <span className="admin-et-card-vars-label">Auto-inserted:</span> {autoVars}
              </p>
            )}
            {fieldKeys.map(key => {
              const field = FIELDS.find(f => f.key === key && f.section === 'email-templates')
              if (!field) return null
              return (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-et-${key}`}>{field.label}</label>
                  {field.multiline
                    ? <textarea id={`field-et-${key}`} rows={3} value={form[key as StringField] as string} onChange={e => handleChange(key as StringField, e.target.value)} />
                    : <input id={`field-et-${key}`} type="text" value={form[key as StringField] as string} onChange={e => handleChange(key as StringField, e.target.value)} />
                  }
                </div>
              )
            })}
          </div>
        )}
      </div>
    )
  }

  return (
    <section className="admin-panel-section" aria-label="Email Templates">
      <div className="admin-panel-head">
        <h2>Email Templates</h2>
        <p>Every automated email the site sends — edit subject lines, body copy, and sign-offs. Publish to apply changes.</p>
      </div>

      <EmailTemplateCard type="newsletter" icon="📬" title="Newsletter Welcome"
        trigger="Someone subscribes via the homepage form or contact page"
        autoVars="Subscriber's first name, Spotify / Apple / Amazon links"
        fieldKeys={['welcomeEmailSubject','welcomeEmailGreetingPrefix','welcomeEmailIntro','welcomeEmailCurrentSeries','welcomeEmailStartHereTitle','welcomeEmailStartHereSummary','welcomeEmailStartHereUrl','welcomeEmailStartHereLinkLabel','welcomeEmailWhatToExpect1','welcomeEmailWhatToExpect2','welcomeEmailWhatToExpect3','welcomeEmailScripture','welcomeEmailScriptureRef','welcomeEmailSignoff','welcomeEmailSpotifyUrl','welcomeEmailSpotifyBtnLabel','welcomeEmailAppleUrl','welcomeEmailAppleBtnLabel','welcomeEmailAmazonUrl']}
        openKey="newsletter-welcome" />

      <EmailTemplateCard type="study" icon="📖" title="Study Account — New Account"
        trigger="A student creates a study account"
        autoVars="Student's display name, link to study hub, link to account page"
        fieldKeys={['studyWelcomeEmailSubject','studyWelcomeEmailBody','studyWelcomeEmailCtaLabel','studyWelcomeEmailCtaPath','studyWelcomeEmailSignoff']}
        openKey="study-welcome" />

      <EmailTemplateCard type="study" icon="🗑️" title="Study Account — Account Deleted"
        trigger="A student (or admin) deletes a study account"
        autoVars="Student's display name, link to create a new account"
        fieldKeys={['studyDeletedEmailSubject','studyDeletedEmailBody','studyDeletedEmailCtaLabel','studyDeletedEmailCtaPath','studyDeletedEmailSignoff']}
        openKey="study-deleted" />

      <EmailTemplateCard type="study" icon="🔔" title="Study Account — New Lesson Unlocked"
        trigger="A lesson releases for a student who has reminders turned on"
        autoVars="Student's name, lesson title, scripture reference, study track name — button links directly to the lesson (auto-generated, not editable)"
        fieldKeys={['studyReminderEmailSubjectPrefix','studyReminderEmailBody','studyReminderEmailCtaLabel','studyReminderEmailSignoff']}
        openKey="study-reminder" />

      <EmailTemplateCard type="transactional" icon="🔐" title="Account Security — Email Change Confirmation"
        trigger="A student requests to change their account email address"
        autoVars="Button links to a one-time verification URL (auto-generated per request, not editable)"
        fieldKeys={['emailChangeSubject','emailChangeBody','emailChangeCtaLabel']}
        openKey="email-change" />

      <EmailTemplateCard type="transactional" icon="📟" title="Two-Factor Auth — Email Sign-In Code"
        trigger="A student with email-based 2FA signs in, or requests a resend during login"
        autoVars="The 6-digit code is auto-generated and inserted between the body text and expiry note — not editable"
        fieldKeys={['twoFaOtpEmailSubject','twoFaOtpEmailBody','twoFaOtpEmailExpiry']}
        openKey="2fa-otp" />

      {renderSaveStatus()}
    </section>
  )
}

interface Props {
  content: SiteContent
  onSave: (c: SiteContent) => void
  onLogout: () => void | Promise<void>
}

interface BackupPreview {
  filename: string
  sizeBytes: number
  createdAt: string | null
  reason: string
  adminUpdatedAt: string | null
  totalHits: number
  totalVisits: number
}

export interface AdminStats {
  totalHits: number
  realHits: number
  botHits: number
  firstHitAt: string | null
  lastHitAt: string | null
  topPaths: Array<{ path: string; hits: number }>
  topPathsReal: Array<{ path: string; hits: number }>
  topPathsBot: Array<{ path: string; hits: number }>
  last7Days: Array<{ day: string; hits: number }>
  last7DaysReal: Array<{ day: string; hits: number }>
  last7DaysBot: Array<{ day: string; hits: number }>
  last30DaysTotal: number
  last30DaysRealTotal: number
  last30DaysBotTotal: number
  botReasons: Array<{ reason: string; count: number }>
  visitors: {
    totalVisits: number
    uniqueVisitors: number
    returningVisits: number
    firstVisitAt: string | null
    lastVisitAt: string | null
    topCountries: Array<{ name: string; hits: number }>
    topStates: Array<{ name: string; hits: number }>
    topCounties: Array<{ name: string; hits: number }>
    topCities: Array<{ name: string; hits: number }>
    deviceBreakdown: { mobile: number; desktop: number; tablet: number; unknown: number }
    topReferrers: Array<{ referrer: string; count: number }>
    last30DaysReal: Array<{ day: string; hits: number }>
    recentVisits: Array<{
      at: string
      visitorId: string
      ip: string
      path: string
      referrer?: string
      device?: string
      country: string
      state: string
      county: string
      city: string
      returningVisitor: boolean
      visitCount: number
      pageHistory?: Array<{ at: string; path: string; referrer?: string }>
    }>
  }
  writeStatus: {
    hitStats: { ok: boolean; at: string | null; error: string | null }
    visitorStats: { ok: boolean; at: string | null; error: string | null }
    backups: { ok: boolean; at: string | null; error: string | null; file: string | null }
  }
  contactTotals: {
    totalSubmissions: number
    totalQuestions: number
  }
  studyEnrollment: {
    totalUsers: number
    enrolledUsers: number
    totalEnrollments: number
    enrollmentsByStudy: Array<{ slug: string; title: string; count: number }>
    users: Array<{
      id: string
      username: string
      displayName: string
      enrolledStudies: Array<{ slug: string; title: string }>
    }>
  }
}

interface AdminAsset {
  filename: string
  url: string
  sizeBytes: number
  updatedAt: string
  tags?: string[]
}

interface PublishState {
  draftUpdatedAt: string | null
  publishedAt: string | null
}

interface OpsStatus {
  buildCommit: string | null
  buildNumber: string | null
  deployedAt: string | null
  cachePurge: { ok: boolean; at: string | null; error: string | null }
  deployHook: { ok: boolean; at: string | null; error: string | null }
}

interface Question {
  id: string
  submittedAt: string
  firstName: string
  email: string
  question: string
  answer: string
  answeredAt: string | null
  isApproved: boolean
  approvedAt: string | null
}

interface ContactSubmission {
  id: string
  submittedAt: string
  name: string
  email: string
  message: string
  messageType: 'question' | 'testimony' | 'topic' | 'general'
  subscribe: boolean
  archived?: boolean
}

interface ContactReplyDraft {
  submissionId: string
  recipientName: string
  recipientEmail: string
  subject: string
  message: string
}

interface ContactReplyTemplate {
  id: string
  label: string
  subject: string
  message: string
}

interface ContactReplyHistoryItem {
  id: string
  submissionId: string
  toEmail: string
  toName: string
  fromEmail: string
  subject: string
  preview: string
  sentAt: string
}

interface Subscriber {
  name: string
  email: string
  subscribedAt: string
  source: 'contact-form' | 'download'
}

interface ContactReplyConfig {
  fromEmail: string
  fromIdentity: string
  resendApiConfigured: boolean
  canSendReplies: boolean
  note: string
}

type ChecklistPhase = 'pre' | 'post'

interface PodcastChecklistTask {
  id: string
  label: string
  phase: ChecklistPhase
}

interface PodcastChecklistEpisode {
  id: string
  series: string
  episodeNumber: number | null
  title: string
  datePublished: string
  expanded: boolean
  tasks: Record<string, boolean>
}

interface PodcastChecklistData {
  tasks: PodcastChecklistTask[]
  episodes: PodcastChecklistEpisode[]
}

type StringField = Exclude<keyof SiteContent, 'customLinks' | 'customBlocks' | 'archivedSeries' | 'redirects' | 'podcastFeaturedLinks' | 'seo' | 'legal' | 'whereToNextCards' | 'colossiansStudySections' | 'studies'>

type AdminView =
  | 'dashboard' | 'homepage' | 'start-here' | 'about' | 'contact'
  | 'podcast' | 'current-series' | 'episode-highlights' | 'podcast-checklist' | 'archived-series'
  | 'downloads' | 'custom-links' | 'content-blocks'
  | 'questions' | 'analytics' | 'assets' | 'colossians-study'
  | 'emails' | 'subscribers' | 'contacts' | 'study-users' | 'email-templates'
  | 'seo' | 'legal' | 'security' | 'brand' | 'global'

interface AdminSectionLink {
  id: string
  label: string
}

const ADMIN_VIEW_OPTIONS: Array<{ group: string; options: Array<{ value: AdminView; label: string }> }> = [
  {
    group: 'Overview',
    options: [{ value: 'dashboard', label: 'Dashboard' }],
  },
  {
    group: 'Site',
    options: [
      { value: 'homepage', label: 'Homepage' },
      { value: 'start-here', label: 'Start Here' },
      { value: 'about', label: 'About' },
      { value: 'contact', label: 'Contact' },
    ],
  },
  {
    group: 'Content',
    options: [
      { value: 'podcast', label: 'Podcast Hub' },
      { value: 'colossians-study', label: 'Studies' },
      { value: 'downloads', label: 'Downloads' },
      { value: 'custom-links', label: 'Custom Links' },
      { value: 'content-blocks', label: 'Content Blocks' },
    ],
  },
  {
    group: 'Manage',
    options: [
      { value: 'questions', label: 'Questions' },
      { value: 'emails', label: 'Emails' },
      { value: 'contacts', label: 'Contacts' },
      { value: 'subscribers', label: 'Subscribers' },
      { value: 'study-users', label: 'Study Users' },
      { value: 'email-templates', label: 'Email Templates' },
      { value: 'analytics', label: 'Analytics' },
      { value: 'assets', label: 'Asset Manager' },
    ],
  },
  {
    group: 'Configure',
    options: [
      { value: 'global', label: 'Footer & Global' },
      { value: 'seo', label: 'SEO & Redirects' },
      { value: 'legal', label: 'Legal Pages' },
      { value: 'security', label: 'Security' },
      { value: 'brand', label: 'Brand Kit' },
    ],
  },
]

const ADMIN_SECTION_LINKS: Partial<Record<AdminView, AdminSectionLink[]>> = {
  homepage: [
    { id: 'homepage-hero', label: 'Hero' },
    { id: 'homepage-share', label: 'Share Section' },
    { id: 'homepage-prism', label: 'PRISM Block' },
    { id: 'homepage-where-to-next-labels', label: 'Where to Next Labels' },
    { id: 'homepage-where-to-next-cards', label: 'Where to Next Cards' },
  ],
  'start-here': [
    { id: 'start-here-intro', label: 'Intro' },
    { id: 'start-here-step-1', label: 'Step 1' },
    { id: 'start-here-step-2', label: 'Step 2' },
    { id: 'start-here-step-3', label: 'Step 3' },
  ],
  about: [
    { id: 'about-show-copy', label: 'Show Copy' },
    { id: 'about-nate-bio', label: 'Nate Bio' },
    { id: 'about-images', label: 'Images' },
  ],
  contact: [
    { id: 'contact-profile', label: 'Profile' },
    { id: 'contact-intro', label: 'Intro Copy' },
    { id: 'contact-scripture', label: 'Scripture' },
  ],
  downloads: [
    { id: 'downloads-study-guide', label: 'Study Guide' },
    { id: 'downloads-library', label: 'Download Library' },
    { id: 'downloads-previous-studies', label: 'Previous Studies' },
  ],
  global: [
    { id: 'global-footer', label: 'Footer' },
    { id: 'global-header', label: 'Header' },
    { id: 'global-platforms', label: 'Platform URLs' },
    { id: 'global-banner', label: 'Analytics Banner' },
    { id: 'global-welcome-email', label: 'Welcome Email' },
  ],
  seo: [
    { id: 'seo-metadata', label: 'Metadata' },
    { id: 'seo-redirects', label: 'Redirects' },
  ],
  legal: [
    { id: 'legal-privacy', label: 'Privacy' },
    { id: 'legal-terms', label: 'Terms' },
  ],
}

type PodcastTab = 'current-series' | 'episode-highlights' | 'podcast-checklist' | 'archived-series'

type MainContentSection = 'hero' | 'start-here' | 'about' | 'contact' | 'series' | 'share' | 'prism' | 'global' | 'email-templates'

const BRAND_KIT_SWATCHES = [
  { name: 'Rich Black', hex: '#0a0a08', role: 'Primary background' },
  { name: 'Soft Black', hex: '#0f0f0c', role: 'Secondary surfaces' },
  { name: 'Panel Black', hex: '#1a1a15', role: 'Cards and panels' },
  { name: 'Deep Brown', hex: '#2a2518', role: 'Borders and dividers' },
  { name: 'Antique Gold', hex: '#c9a84c', role: 'Primary accent' },
  { name: 'Light Gold', hex: '#e0c070', role: 'Hover and highlight' },
  { name: 'Warm White', hex: '#f0ead8', role: 'Primary text' },
  { name: 'Warm Gray', hex: '#7a7060', role: 'Secondary text' },
] as const

const BRAND_KIT_TYPE = [
  {
    label: 'Brand Font',
    spec: 'Cormorant Garamond · 300/400/600/700 · italic supported',
    sample: 'Verse by Verse with Nate',
  },
  {
    label: 'Subtitle / Small Caps',
    spec: 'Uppercase with tracking for labels, nav, and support text',
    sample: 'A Journey Through Scripture',
  },
  {
    label: 'Body / Quote',
    spec: 'Cormorant Garamond light/italic for long-form text and pull copy',
    sample: 'Verse by verse. Nugget by nugget.',
  },
] as const

const BRAND_KIT_VERIFICATION = [
  'Global font import updated to Cormorant Garamond.',
  'Shared brand variables now define black, gold, border, warm white, and muted text colors.',
  'Live site CSS now references the brand variables for core text and accent styling.',
  'Admin surfaces inherit the same typography and palette tokens used by the public site.',
] as const

const FIELDS: Array<{ key: StringField; label: string; multiline?: boolean; section: MainContentSection }> = [
  { key: 'eyebrow', label: 'Hero Eyebrow Text', section: 'hero' },
  { key: 'heroTagline', label: 'Hero Tagline', section: 'hero' },
  { key: 'heroBtnSpotify', label: 'Hero — Spotify Button Label', section: 'hero' },
  { key: 'heroBtnEpisodes', label: 'Hero — Episodes Button Label', section: 'hero' },
  { key: 'heroBtnStartHere', label: 'Hero — Start Here Button Label', section: 'hero' },
  { key: 'startHereHeading', label: 'Start Here — Heading', section: 'start-here' },
  { key: 'startHereIntro', label: 'Start Here — Intro', multiline: true, section: 'start-here' },
  { key: 'startHereStep1Title', label: 'Start Here — Step 1 Title', section: 'start-here' },
  { key: 'startHereStep1Body', label: 'Start Here — Step 1 Body', multiline: true, section: 'start-here' },
  { key: 'startHereStep1Cta', label: 'Start Here — Step 1 Button Text', section: 'start-here' },
  { key: 'startHereStep2Title', label: 'Start Here — Step 2 Title', section: 'start-here' },
  { key: 'startHereStep2Body', label: 'Start Here — Step 2 Body', multiline: true, section: 'start-here' },
  { key: 'startHereStep2Cta', label: 'Start Here — Step 2 Button Text', section: 'start-here' },
  { key: 'startHereStep3Title', label: 'Start Here — Step 3 Title', section: 'start-here' },
  { key: 'startHereStep3Body', label: 'Start Here — Step 3 Body', multiline: true, section: 'start-here' },
  { key: 'startHereStep3Cta', label: 'Start Here — Step 3 Button Text', section: 'start-here' },
  { key: 'aboutShowHeading', label: 'About Show — Heading', section: 'about' },
  { key: 'aboutShowP1', label: 'About Show — Paragraph 1', multiline: true, section: 'about' },
  { key: 'aboutShowP2', label: 'About Show — Paragraph 2', multiline: true, section: 'about' },
  { key: 'aboutNate', label: 'About Nate', multiline: true, section: 'about' },
  { key: 'aboutPhotoUrl', label: 'About — Nate Portrait Image URL', section: 'about' },
  { key: 'aboutVerseArtUrl', label: 'About — Scripture Artwork Image URL', section: 'about' },
  { key: 'aboutEyebrow', label: 'About — "About Nate" Eyebrow', section: 'about' },
  { key: 'aboutListenBtnLabel', label: 'About — Listen Button Label', section: 'about' },
  { key: 'aboutShowEyebrow', label: 'About — "About the Show" Eyebrow', section: 'about' },
  { key: 'contactPhotoUrl', label: 'Contact — Profile Photo URL', section: 'contact' },
  { key: 'contactEyebrow', label: 'Contact — Section Eyebrow', section: 'contact' },
  { key: 'contactHeading', label: 'Contact — Heading', section: 'contact' },
  { key: 'contactName', label: 'Contact — Profile Name', section: 'contact' },
  { key: 'contactRole', label: 'Contact — Profile Role', section: 'contact' },
  { key: 'contactQuote', label: 'Contact — Quote', multiline: true, section: 'contact' },
  { key: 'contactIntro', label: 'Contact — Intro Text', multiline: true, section: 'contact' },
  { key: 'contactPoint1', label: 'Contact — Point 1', section: 'contact' },
  { key: 'contactPoint2', label: 'Contact — Point 2', section: 'contact' },
  { key: 'contactVerse', label: 'Contact — Scripture Text', section: 'contact' },
  { key: 'contactVerseRef', label: 'Contact — Scripture Reference', section: 'contact' },
  { key: 'episodesSeoIntro', label: 'Episodes Page — SEO Description (hidden from visitors, indexed by search engines)', multiline: true, section: 'series' },
  { key: 'seriesLabel', label: 'Series Label (e.g. "Now Playing")', section: 'series' },
  { key: 'seriesTitle', label: 'Series Title', section: 'series' },
  { key: 'seriesDescription', label: 'Series Description', multiline: true, section: 'series' },
  { key: 'seriesImageUrl', label: 'Series Cover Image URL', section: 'series' },
  { key: 'seriesListenUrl', label: 'Series Listen URL', section: 'series' },
  { key: 'seriesListenBtnLabel', label: 'Series — Listen Button Label', section: 'series' },
  { key: 'seriesDownloadsBtnLabel', label: 'Series — Downloads Button Label', section: 'series' },
  { key: 'studyGuideTitle', label: 'Study Guide Title', section: 'series' },
  { key: 'studyGuideDescription', label: 'Study Guide Description', multiline: true, section: 'series' },
  { key: 'studyGuideUrl', label: 'Study Guide URL (Amazon link)', section: 'series' },
  { key: 'shareHeading', label: 'Share Section — Heading', section: 'share' },
  { key: 'shareP', label: 'Share Section — Paragraph', multiline: true, section: 'share' },
  { key: 'prismVideoUrl', label: 'PRISM — Video URL', section: 'prism' },
  { key: 'prismEyebrow', label: 'PRISM — Eyebrow', section: 'prism' },
  { key: 'prismHeading', label: 'PRISM — Heading', section: 'prism' },
  { key: 'prismIntro', label: 'PRISM — Intro Text', multiline: true, section: 'prism' },
  { key: 'prismPatternIntro', label: 'PRISM — Pattern Intro', multiline: true, section: 'prism' },
  { key: 'prismStep1', label: 'PRISM — Step 1', section: 'prism' },
  { key: 'prismStep2', label: 'PRISM — Step 2', section: 'prism' },
  { key: 'prismStep3', label: 'PRISM — Step 3', section: 'prism' },
  { key: 'prismStep4', label: 'PRISM — Step 4', section: 'prism' },
  { key: 'prismStep5', label: 'PRISM — Step 5', section: 'prism' },
  { key: 'prismOutro', label: 'PRISM — Outro Text', multiline: true, section: 'prism' },
  { key: 'prismClosing', label: 'PRISM — Closing Line', multiline: true, section: 'prism' },
  // Global / Footer / Platform
  { key: 'footerTitle', label: 'Footer — Brand Title', section: 'global' },
  { key: 'footerSubtitle', label: 'Footer — Subtitle', section: 'global' },
  { key: 'footerEmail', label: 'Footer — Contact Email', section: 'global' },
  { key: 'footerCopyright', label: 'Footer — Copyright Line', section: 'global' },
  { key: 'footerPrivacyNote', label: 'Footer — Privacy Note', multiline: true, section: 'global' },
  { key: 'headerFollowLabel', label: 'Header — Follow Button Label', section: 'global' },
  { key: 'cookieBannerText', label: 'Analytics Cookie Banner Text', multiline: true, section: 'global' },
  { key: 'platformSpotifyUrl', label: 'Platform — Spotify URL', section: 'global' },
  { key: 'platformAppleUrl', label: 'Platform — Apple Podcasts URL', section: 'global' },
  { key: 'platformYoutubeUrl', label: 'Platform — YouTube URL', section: 'global' },
  { key: 'platformAmazonUrl', label: 'Platform — Amazon Music URL', section: 'global' },
  { key: 'platformFacebookUrl', label: 'Platform — Facebook URL', section: 'global' },
  { key: 'platformCreatorUrl', label: 'Platform — Creator Profile URL', section: 'global' },
  { key: 'welcomeEmailSubject', label: 'Welcome Email — Subject', section: 'global' },
  { key: 'welcomeEmailGreetingPrefix', label: 'Welcome Email — Greeting Prefix', section: 'global' },
  { key: 'welcomeEmailIntro', label: 'Welcome Email — Intro Paragraph', multiline: true, section: 'global' },
  { key: 'welcomeEmailCurrentSeries', label: 'Welcome Email — Current Series Paragraph', multiline: true, section: 'global' },
  { key: 'welcomeEmailStartHereTitle', label: 'Welcome Email — Start Here Title', section: 'global' },
  { key: 'welcomeEmailStartHereSummary', label: 'Welcome Email — Start Here Summary', multiline: true, section: 'global' },
  { key: 'welcomeEmailStartHereUrl', label: 'Welcome Email — Start Here URL', section: 'global' },
  { key: 'welcomeEmailSpotifyUrl', label: 'Welcome Email — Spotify URL', section: 'global' },
  { key: 'welcomeEmailAppleUrl', label: 'Welcome Email — Apple URL', section: 'global' },
  { key: 'welcomeEmailAmazonUrl', label: 'Welcome Email — Amazon URL', section: 'global' },
  { key: 'welcomeEmailWebsiteUrl', label: 'Welcome Email — Website URL', section: 'global' },
  { key: 'welcomeEmailImageUrl', label: 'Welcome Email — Image URL', section: 'global' },
  { key: 'welcomeEmailWhatToExpect1', label: 'Welcome Email — What to Expect 1', multiline: true, section: 'global' },
  { key: 'welcomeEmailWhatToExpect2', label: 'Welcome Email — What to Expect 2', multiline: true, section: 'global' },
  { key: 'welcomeEmailWhatToExpect3', label: 'Welcome Email — What to Expect 3', multiline: true, section: 'global' },
  { key: 'welcomeEmailScripture', label: 'Welcome Email — Scripture Text', multiline: true, section: 'global' },
  { key: 'welcomeEmailScriptureRef', label: 'Welcome Email — Scripture Reference', section: 'global' },
  { key: 'welcomeEmailSignoff', label: 'Signoff', multiline: true, section: 'global' },
  // ── Email Templates section ──
  { key: 'welcomeEmailSubject', label: 'Subject Line', section: 'email-templates' },
  { key: 'welcomeEmailGreetingPrefix', label: 'Greeting Prefix (before subscriber name)', section: 'email-templates' },
  { key: 'welcomeEmailIntro', label: 'Intro Paragraph', multiline: true, section: 'email-templates' },
  { key: 'welcomeEmailCurrentSeries', label: 'Current Series Blurb', multiline: true, section: 'email-templates' },
  { key: 'welcomeEmailStartHereTitle', label: 'Start Here Episode Title', section: 'email-templates' },
  { key: 'welcomeEmailStartHereSummary', label: 'Start Here Episode Summary', multiline: true, section: 'email-templates' },
  { key: 'welcomeEmailStartHereUrl', label: 'Start Here Episode URL', section: 'email-templates' },
  { key: 'welcomeEmailWhatToExpect1', label: 'What to Expect — Line 1', multiline: true, section: 'email-templates' },
  { key: 'welcomeEmailWhatToExpect2', label: 'What to Expect — Line 2', multiline: true, section: 'email-templates' },
  { key: 'welcomeEmailWhatToExpect3', label: 'What to Expect — Line 3', multiline: true, section: 'email-templates' },
  { key: 'welcomeEmailScripture', label: 'Closing Scripture Text', multiline: true, section: 'email-templates' },
  { key: 'welcomeEmailScriptureRef', label: 'Closing Scripture Reference', section: 'email-templates' },
  { key: 'welcomeEmailSignoff', label: 'Signoff', multiline: true, section: 'email-templates' },
  { key: 'welcomeEmailSpotifyUrl', label: 'Spotify URL', section: 'email-templates' },
  { key: 'welcomeEmailSpotifyBtnLabel', label: '"Listen on Spotify" button label', section: 'email-templates' },
  { key: 'welcomeEmailAppleUrl', label: 'Apple Podcasts URL', section: 'email-templates' },
  { key: 'welcomeEmailAppleBtnLabel', label: '"Apple Podcasts" button label', section: 'email-templates' },
  { key: 'welcomeEmailAmazonUrl', label: 'Amazon Music URL', section: 'email-templates' },
  { key: 'welcomeEmailStartHereLinkLabel', label: '"Start Here" link label', section: 'email-templates' },
  { key: 'studyWelcomeEmailSubject', label: 'Subject Line', section: 'email-templates' },
  { key: 'studyWelcomeEmailBody', label: 'Body Paragraph', multiline: true, section: 'email-templates' },
  { key: 'studyWelcomeEmailCtaLabel', label: 'Button Label', section: 'email-templates' },
  { key: 'studyWelcomeEmailCtaPath', label: 'Button Link (path or full URL)', section: 'email-templates' },
  { key: 'studyWelcomeEmailSignoff', label: 'Signoff', multiline: true, section: 'email-templates' },
  { key: 'studyDeletedEmailSubject', label: 'Subject Line', section: 'email-templates' },
  { key: 'studyDeletedEmailBody', label: 'Body Paragraph', multiline: true, section: 'email-templates' },
  { key: 'studyDeletedEmailCtaLabel', label: 'Button Label', section: 'email-templates' },
  { key: 'studyDeletedEmailCtaPath', label: 'Button Link (path or full URL)', section: 'email-templates' },
  { key: 'studyDeletedEmailSignoff', label: 'Signoff', multiline: true, section: 'email-templates' },
  { key: 'studyReminderEmailSubjectPrefix', label: 'Subject Prefix (lesson title auto-appended)', section: 'email-templates' },
  { key: 'studyReminderEmailBody', label: 'Body Paragraph', multiline: true, section: 'email-templates' },
  { key: 'studyReminderEmailCtaLabel', label: 'Button Label', section: 'email-templates' },
  { key: 'studyReminderEmailSignoff', label: 'Signoff', multiline: true, section: 'email-templates' },
  { key: 'emailChangeSubject', label: 'Subject Line', section: 'email-templates' },
  { key: 'emailChangeBody', label: 'Body Text', multiline: true, section: 'email-templates' },
  { key: 'emailChangeCtaLabel', label: 'Button Label', section: 'email-templates' },
  { key: 'twoFaOtpEmailSubject', label: 'Subject Line', section: 'email-templates' },
  { key: 'twoFaOtpEmailBody', label: 'Body Text (shown above the code)', multiline: true, section: 'email-templates' },
  { key: 'twoFaOtpEmailExpiry', label: 'Expiry / Security Note (shown below the code)', multiline: true, section: 'email-templates' },
]

function normalizeStudies(siteContent: SiteContent): StudyProgram[] {
  if (Array.isArray(siteContent.studies) && siteContent.studies.length > 0) {
    return siteContent.studies.map(study => ({
      ...study,
      homepageEyebrow: typeof study.homepageEyebrow === 'string' ? study.homepageEyebrow : '',
      showOnHomepage: study.showOnHomepage === true,
      showNewTag: study.showNewTag === true,
      newTagLabel: typeof study.newTagLabel === 'string' ? study.newTagLabel : 'NEW',
      numberOfChapters: Number.isInteger(study.numberOfChapters) && study.numberOfChapters >= 1 && study.numberOfChapters <= 999 ? study.numberOfChapters : 1,
    }))
  }

  const fallbackSections = siteContent.colossiansStudySections?.length
    ? siteContent.colossiansStudySections
    : DEFAULTS.colossiansStudySections

  return [
    {
      id: 'study-colossians',
      slug: 'colossians',
      title: 'Colossians: Rooted in Christ',
      description: 'Walk through Colossians in guided lessons with commentary, Greek notes, and discussion prompts.',
      homepageEyebrow: 'New Study',
      showOnHomepage: true,
      showNewTag: true,
      newTagLabel: 'NEW',
      status: 'active',
      difficulty: 'intermediate',
      estimatedHours: 12,
      completionBadge: 'Colossians Completion',
      numberOfChapters: 4,
      sections: fallbackSections,
    },
  ]
}

function normalizeSiteContentForAdmin(siteContent: SiteContent): SiteContent {
  const studies = normalizeStudies(siteContent)
  const colossians = studies.find(study => study.slug === 'colossians')

  return {
    ...siteContent,
    studies,
    colossiansStudySections: colossians?.sections?.length
      ? colossians.sections
      : (siteContent.colossiansStudySections?.length ? siteContent.colossiansStudySections : DEFAULTS.colossiansStudySections),
  }
}

function buildSiteContentForSave(siteContent: SiteContent): SiteContent {
  const normalized = normalizeSiteContentForAdmin(siteContent)
  const colossians = normalized.studies.find(study => study.slug === 'colossians')
  return {
    ...normalized,
    colossiansStudySections: colossians?.sections ?? normalized.colossiansStudySections,
  }
}

export default function AdminPage({ content, onSave, onLogout }: Props) {
  const normalizedContent = normalizeSiteContentForAdmin(content)
  const [form, setForm] = useState<SiteContent>(normalizedContent)
  const [lastSavedSnapshot, setLastSavedSnapshot] = useState(() => JSON.stringify(normalizedContent))
  const [status, setStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
  const [errorMsg, setErrorMsg] = useState('')
  const [adminView, setAdminView] = useState<AdminView>('dashboard')
  const [podcastTab, setPodcastTab] = useState<PodcastTab>('current-series')
  const [stats, setStats] = useState<AdminStats | null>(null)
  const [statsStatus, setStatsStatus] = useState<'loading' | 'ready' | 'error'>('loading')
  const [maintenanceMsg, setMaintenanceMsg] = useState('')
  const [opsMsg, setOpsMsg] = useState('')
  const [backupFiles, setBackupFiles] = useState<BackupPreview[]>([])
  const [selectedBackup, setSelectedBackup] = useState('')
  const [selectedBackupPreview, setSelectedBackupPreview] = useState<BackupPreview | null>(null)

  // TOTP management state
  const [totpEnabled, setTotpEnabled] = useState<boolean | null>(null)
  const [totpSetupQr, setTotpSetupQr] = useState<string | null>(null)
  const [totpSetupSecret, setTotpSetupSecret] = useState<string | null>(null)
  const [totpConfirmCode, setTotpConfirmCode] = useState('')
  const [totpMsg, setTotpMsg] = useState('')
  const [totpRecoveryCodes, setTotpRecoveryCodes] = useState<string[] | null>(null)
  const [publishState, setPublishState] = useState<PublishState>({ draftUpdatedAt: null, publishedAt: null })
  const [assets, setAssets] = useState<AdminAsset[]>([])
  const [assetTagEdits, setAssetTagEdits] = useState<Record<string, string>>({})
  const [opsStatus, setOpsStatus] = useState<OpsStatus | null>(null)
  const [assetUploadPending, setAssetUploadPending] = useState(false)

  const [questions, setQuestions] = useState<Question[]>([])
  const [contactSubmissions, setContactSubmissions] = useState<ContactSubmission[]>([])
  const [contactStatus, setContactStatus] = useState<'loading' | 'ready' | 'error'>('loading')
  const [contactReplyDraft, setContactReplyDraft] = useState<ContactReplyDraft | null>(null)
  const [contactReplyStatus, setContactReplyStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
  const [contactReplyMsg, setContactReplyMsg] = useState('')
  const [contactReplyTemplates, setContactReplyTemplates] = useState<ContactReplyTemplate[]>([])
  const [contactReplyHistory, setContactReplyHistory] = useState<ContactReplyHistoryItem[]>([])
  const [contactReplyConfig, setContactReplyConfig] = useState<ContactReplyConfig | null>(null)
  const [contactTemplateStatus, setContactTemplateStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
  const [emailMailboxView, setEmailMailboxView] = useState<'inbox' | 'archived'>('inbox')
  const [selectedEmailId, setSelectedEmailId] = useState<string | null>(null)
  const [answeredQuestions, setAnsweredQuestions] = useState<{ [key: string]: string }>({})
  const [editingQuestionId, setEditingQuestionId] = useState<string | null>(null)
  const [questionSearch, setQuestionSearch] = useState('')
  const [questionFilter, setQuestionFilter] = useState<'all' | 'pending' | 'approved' | 'answered' | 'unanswered'>('all')
  const [questionPage, setQuestionPage] = useState(0)
  const [selectedQuestionIds, setSelectedQuestionIds] = useState<Set<string>>(new Set())
  const [mobileNavOpen, setMobileNavOpen] = useState(false)
  const [navSearch, setNavSearch] = useState('')
  const [subscribers, setSubscribers] = useState<Subscriber[]>([])
  const [subscriberSearch, setSubscriberSearch] = useState('')
  const [contactSearch, setContactSearch] = useState('')
  const [downloadStats, setDownloadStats] = useState<Record<string, number>>({})
  const [podcastChecklist, setPodcastChecklist] = useState<PodcastChecklistData>({ tasks: [], episodes: [] })
  const [podcastChecklistStatus, setPodcastChecklistStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
  const [podcastChecklistMsg, setPodcastChecklistMsg] = useState('')
  const [dashboardNow, setDashboardNow] = useState(() => new Date())
  const [manualQuestion, setManualQuestion] = useState({
    firstName: '',
    email: '',
    question: '',
    answer: '',
    approve: false,
  })
  const [manualQuestionStatus, setManualQuestionStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
  const [manualQuestionMsg, setManualQuestionMsg] = useState('')
  const [archiveLinkSelectionBySeries, setArchiveLinkSelectionBySeries] = useState<{ [key: string]: string }>({})
  const [previewOpen, setPreviewOpen] = useState(false)
  const previewIframeRef = useRef<HTMLIFrameElement>(null)
  const dragSensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
  const saveStatusTimeoutRef = useRef<number | null>(null)
  const autosaveRestoreCheckedRef = useRef(false)

  const isDirty = JSON.stringify(form) !== lastSavedSnapshot
  const unreadEmailCount = contactSubmissions.filter(s => !s.archived).length
  const unansweredCount = questions.filter(q => !q.answer?.trim()).length
  const navSearchTerm = navSearch.trim().toLowerCase()
  const filteredAdminViewOptions = ADMIN_VIEW_OPTIONS
    .map(group => ({
      ...group,
      options: group.options.filter(option => {
        if (!navSearchTerm) return true
        return `${group.group} ${option.label} ${option.value}`.toLowerCase().includes(navSearchTerm)
      }),
    }))
    .filter(group => group.options.length > 0)

  // Silently saves draft every 30s when there are unsaved changes
  useAutosave(form, isDirty, handleSaveDraft)

  function clearAutosaveDraft() {
    try {
      sessionStorage.removeItem('admin-autosave-draft')
    } catch {
      // Ignore storage failures; the server draft is still the source of truth.
    }
  }

  // Broadcast live form state + active view into the preview iframe whenever they change
  useEffect(() => {
    if (!previewOpen) return
    const timer = setTimeout(() => {
      previewIframeRef.current?.contentWindow?.postMessage(
        { type: 'admin-preview-content', content: form, view: adminView },
        window.location.origin
      )
    }, 150)
    return () => clearTimeout(timer)
  }, [form, adminView, previewOpen])

  useEffect(() => {
    const normalized = normalizeSiteContentForAdmin(content)
    const nextSnapshot = JSON.stringify(normalized)
    setForm(normalized)
    setLastSavedSnapshot(nextSnapshot)
    autosaveRestoreCheckedRef.current = false
  }, [content])

  useEffect(() => {
    if (autosaveRestoreCheckedRef.current) return
    autosaveRestoreCheckedRef.current = true

    try {
      const rawDraft = sessionStorage.getItem('admin-autosave-draft')
      if (!rawDraft) return

      const parsedDraft = JSON.parse(rawDraft) as SiteContent
      const restoredDraft = normalizeSiteContentForAdmin(parsedDraft)
      if (JSON.stringify(restoredDraft) === lastSavedSnapshot) {
        clearAutosaveDraft()
        return
      }

      if (confirm('Restore an unsaved draft from this browser session?')) {
        setForm(restoredDraft)
      }
    } catch {
      clearAutosaveDraft()
    }
  }, [lastSavedSnapshot])

  useEffect(() => {
    return () => {
      if (saveStatusTimeoutRef.current !== null) {
        window.clearTimeout(saveStatusTimeoutRef.current)
      }
    }
  }, [])

  useEffect(() => {
    if (!mobileNavOpen) return

    const previousOverflow = document.body.style.overflow
    document.body.style.overflow = 'hidden'

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        setMobileNavOpen(false)
      }
    }

    window.addEventListener('keydown', handleKeyDown)

    return () => {
      window.removeEventListener('keydown', handleKeyDown)
      document.body.style.overflow = previousOverflow
    }
  }, [mobileNavOpen])

  useEffect(() => {
    const intervalId = window.setInterval(() => {
      setDashboardNow(new Date())
    }, 1000)

    return () => window.clearInterval(intervalId)
  }, [])

  useEffect(() => {
    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
      if (!isDirty) return
      event.preventDefault()
      event.returnValue = ''
    }

    window.addEventListener('beforeunload', handleBeforeUnload)
    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
  }, [isDirty])

  useEffect(() => {
    fetch('/api/admin-auth/status')
      .then(r => r.ok ? r.json() : Promise.reject())
      .then(data => setTotpEnabled(!!(data as { totpEnabled?: boolean }).totpEnabled))
      .catch(() => {})
  }, [])

  useEffect(() => {
    fetch('/api/admin-stats')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load stats'))))
      .then(data => {
        setStats(data as AdminStats)
        setStatsStatus('ready')
      })
      .catch(() => {
        setStatsStatus('error')
      })

    fetch('/api/admin-questions')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load questions'))))
      .then(data => {
        setQuestions((data as { questions: Question[] }).questions ?? [])
      })
      .catch(() => {})

    fetch('/api/admin-contact-submissions')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load contact submissions'))))
      .then(data => {
        setContactSubmissions((data as { submissions: ContactSubmission[] }).submissions ?? [])
        setContactStatus('ready')
      })
      .catch(() => {
        setContactStatus('error')
      })

    fetch('/api/admin-contact-reply-templates')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load reply templates'))))
      .then(data => {
        setContactReplyTemplates((data as { templates: ContactReplyTemplate[] }).templates ?? [])
      })
      .catch(() => {})

    fetch('/api/admin-contact-reply-history')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load reply history'))))
      .then(data => {
        setContactReplyHistory((data as { items: ContactReplyHistoryItem[] }).items ?? [])
      })
      .catch(() => {})

    fetch('/api/admin-reply-config')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load reply config'))))
      .then(data => {
        setContactReplyConfig(data as ContactReplyConfig)
      })
      .catch(() => {})

    fetch('/api/admin-stats/backups')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load backups'))))
      .then(data => {
        const files = Array.isArray((data as { backups?: unknown }).backups) ? (data as { backups: BackupPreview[] }).backups : []
        setBackupFiles(files)
        if (files.length > 0) {
          setSelectedBackup(files[0].filename)
        }
      })
      .catch(() => {})

    fetch('/api/admin-content-state')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load publish state'))))
      .then(data => {
        const state = (data as { publishState?: PublishState }).publishState
        if (state) {
          setPublishState({
            draftUpdatedAt: state.draftUpdatedAt ?? null,
            publishedAt: state.publishedAt ?? null,
          })
        }
      })
      .catch(() => {})

    void reloadAssets()

    fetch('/api/admin-ops/status')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load operations status'))))
      .then(data => {
        setOpsStatus(data as OpsStatus)
      })
      .catch(() => {})

    fetch('/api/admin-subscribers')
      .then(r => (r.ok ? r.json() : Promise.reject()))
      .then(data => setSubscribers((data as { subscribers: Subscriber[] }).subscribers ?? []))
      .catch(() => {})

    fetch('/api/admin-download-stats')
      .then(r => (r.ok ? r.json() : Promise.reject()))
      .then(data => setDownloadStats((data as { counts: Record<string, number> }).counts ?? {}))
      .catch(() => {})

    fetch('/api/admin-podcast-checklist')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Failed to load podcast checklist'))))
      .then(data => {
        const checklist = (data as { checklist?: PodcastChecklistData }).checklist
        if (checklist?.tasks && checklist?.episodes) {
          setPodcastChecklist(checklist)
        }
      })
      .catch(() => {})
  }, [])

  useEffect(() => {
    if (!selectedBackup) {
      setSelectedBackupPreview(null)
      return
    }

    fetch('/api/admin-stats/backup-preview', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ filename: selectedBackup }),
    })
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Preview failed'))))
      .then(data => {
        const preview = (data as { preview?: BackupPreview }).preview ?? null
        setSelectedBackupPreview(preview)
      })
      .catch(() => {
        setSelectedBackupPreview(null)
      })
  }, [selectedBackup])

  async function reloadStats() {
    const r = await fetch('/api/admin-stats')
    if (!r.ok) throw new Error('Could not refresh stats')
    const data = await r.json()
    setStats(data as AdminStats)
    setStatsStatus('ready')
  }

  async function reloadContactSubmissions() {
    const r = await fetch('/api/admin-contact-submissions')
    if (!r.ok) throw new Error('Could not refresh contact submissions')
    const data = await r.json() as { submissions?: ContactSubmission[] }
    setContactSubmissions(Array.isArray(data.submissions) ? data.submissions : [])
    setContactStatus('ready')
  }

  useEffect(() => {
    const visible = contactSubmissions.filter(item => (emailMailboxView === 'archived' ? item.archived === true : item.archived !== true))
    if (visible.length === 0) {
      setSelectedEmailId(null)
      return
    }
    if (!selectedEmailId || !visible.some(item => item.id === selectedEmailId)) {
      setSelectedEmailId(visible[0].id)
    }
  }, [contactSubmissions, emailMailboxView, selectedEmailId])

  useEffect(() => {
    setQuestionPage(0)
  }, [questionSearch, questionFilter])

  async function reloadContactReplyHistory() {
    const r = await fetch('/api/admin-contact-reply-history')
    if (!r.ok) throw new Error('Could not refresh reply history')
    const data = await r.json() as { items?: ContactReplyHistoryItem[] }
    setContactReplyHistory(Array.isArray(data.items) ? data.items : [])
  }

  async function reloadContactReplyTemplates() {
    const r = await fetch('/api/admin-contact-reply-templates')
    if (!r.ok) throw new Error('Could not refresh reply templates')
    const data = await r.json() as { templates?: ContactReplyTemplate[] }
    setContactReplyTemplates(Array.isArray(data.templates) ? data.templates : [])
  }

  async function reloadBackups() {
    const r = await fetch('/api/admin-stats/backups')
    if (!r.ok) throw new Error('Could not refresh backups')
    const data = await r.json() as { backups?: BackupPreview[] }
    const files = Array.isArray(data.backups) ? data.backups : []
    setBackupFiles(files)
    const names = files.map(f => f.filename)
    if (files.length > 0 && !names.includes(selectedBackup)) {
      setSelectedBackup(files[0].filename)
    }
  }

  async function reloadContentFromServer() {
    const draftRes = await fetch('/api/admin-content?source=draft')
    if (draftRes.ok) {
      const draftData = await draftRes.json() as { siteContent?: Partial<SiteContent> }
      if (draftData?.siteContent && typeof draftData.siteContent === 'object') {
        const next = normalizeSiteContentForAdmin({ ...DEFAULTS, ...draftData.siteContent })
        setForm(next)
        onSave(next)
        return
      }
    }

    const publishedRes = await fetch('/api/admin-content')
    if (!publishedRes.ok) return
    const publishedData = await publishedRes.json() as { siteContent?: Partial<SiteContent> }
    if (publishedData?.siteContent && typeof publishedData.siteContent === 'object') {
      const next = normalizeSiteContentForAdmin({ ...DEFAULTS, ...publishedData.siteContent })
      setForm(next)
      onSave(next)
    }
  }

  async function reloadAssets() {
    const r = await fetch('/api/admin-assets')
    if (!r.ok) throw new Error('Could not refresh assets')
    const data = await r.json() as { assets?: AdminAsset[] }
    const incomingAssets = Array.isArray(data.assets) ? data.assets : []
    setAssets(incomingAssets)
    setAssetTagEdits(incomingAssets.reduce<Record<string, string>>((memo, asset) => {
      memo[asset.filename] = (asset.tags ?? []).join(', ')
      return memo
    }, {}))
  }

  async function reloadOpsStatus() {
    const r = await fetch('/api/admin-ops/status')
    if (!r.ok) throw new Error('Could not refresh ops status')
    const data = await r.json() as OpsStatus
    setOpsStatus(data)
  }

  async function handleSaveDraft() {
    const payload = buildSiteContentForSave(form)
    setStatus('saving')
    setErrorMsg('')
    try {
      const res = await fetch('/api/admin-content-draft', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ siteContent: payload }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error((data as { message?: string }).message ?? 'Draft save failed')
      }
      const data = await res.json() as { updatedAt?: string }
      setPublishState(prev => ({ ...prev, draftUpdatedAt: data.updatedAt ?? new Date().toISOString() }))
      setLastSavedSnapshot(JSON.stringify(payload))
      clearAutosaveDraft()
      setStatus('saved')
      if (saveStatusTimeoutRef.current !== null) {
        window.clearTimeout(saveStatusTimeoutRef.current)
      }
      saveStatusTimeoutRef.current = window.setTimeout(() => setStatus('idle'), 3500)
    } catch (err) {
      setErrorMsg(err instanceof Error ? err.message : 'Unknown error')
      setStatus('error')
    }
  }

  async function handlePublishDraft() {
    if (!confirm('Publish current changes to the live site now?')) return
    const payload = buildSiteContentForSave(form)
    setStatus('saving')
    setErrorMsg('')
    try {
      // Always save the current form to draft first so publish never fails from a missing draft
      const draftRes = await fetch('/api/admin-content-draft', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ siteContent: payload }),
      })
      if (!draftRes.ok) {
        const data = await draftRes.json().catch(() => ({}))
        throw new Error((data as { message?: string }).message ?? 'Draft save failed')
      }
      const draftData = await draftRes.json() as { updatedAt?: string }
      setPublishState(prev => ({ ...prev, draftUpdatedAt: draftData.updatedAt ?? new Date().toISOString() }))

      const publishRes = await fetch('/api/admin-content/publish', { method: 'POST' })
      if (!publishRes.ok) {
        const data = await publishRes.json().catch(() => ({}))
        throw new Error((data as { message?: string }).message ?? 'Publish failed')
      }

      const published = await publishRes.json() as { publishedAt?: string }
      const latestRes = await fetch('/api/admin-content?source=draft')
      if (!latestRes.ok) throw new Error('Failed to refresh published content')
      const latest = await latestRes.json() as { siteContent?: Partial<SiteContent> }
      if (latest?.siteContent) {
        const next = normalizeSiteContentForAdmin({ ...DEFAULTS, ...latest.siteContent })
        setForm(next)
        onSave(next)
        setLastSavedSnapshot(JSON.stringify(next))
      }

      setPublishState(prev => ({ ...prev, publishedAt: published.publishedAt ?? new Date().toISOString() }))
      clearAutosaveDraft()
      await reloadStats()
      setStatus('saved')
      if (saveStatusTimeoutRef.current !== null) {
        window.clearTimeout(saveStatusTimeoutRef.current)
      }
      saveStatusTimeoutRef.current = window.setTimeout(() => setStatus('idle'), 3500)
    } catch (err) {
      setErrorMsg(err instanceof Error ? err.message : 'Unknown error')
      setStatus('error')
    }
  }

  function updateSeoField(field: keyof SeoSettings, value: string | string[]) {
    setForm(f => ({
      ...f,
      seo: {
        ...f.seo,
        [field]: value,
      },
    }))
  }

  function updateLegalField(field: keyof LegalSettings, value: string | string[]) {
    setForm(f => ({
      ...f,
      legal: {
        ...f.legal,
        [field]: value,
      },
    }))
  }

  async function handleTotpSetupInit() {
    setTotpMsg('')
    setTotpRecoveryCodes(null)
    const res = await fetch('/api/admin-auth/totp-setup-init', { method: 'POST' })
    const data = await res.json().catch(() => ({})) as { qrDataUrl?: string; secret?: string; message?: string }
    if (!res.ok) { setTotpMsg(data.message ?? 'Setup failed.'); return }
    setTotpSetupQr(data.qrDataUrl ?? null)
    setTotpSetupSecret(data.secret ?? null)
    setTotpConfirmCode('')
  }

  async function handleTotpSetupConfirm(e: React.FormEvent) {
    e.preventDefault()
    setTotpMsg('')
    const res = await fetch('/api/admin-auth/totp-setup-confirm', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ code: totpConfirmCode }),
    })
    const data = await res.json().catch(() => ({})) as { ok?: boolean; recoveryCodes?: string[]; message?: string }
    if (!res.ok) { setTotpMsg(data.message ?? 'Confirmation failed.'); return }
    setTotpEnabled(true)
    setTotpSetupQr(null)
    setTotpSetupSecret(null)
    setTotpConfirmCode('')
    setTotpRecoveryCodes(data.recoveryCodes ?? null)
    setTotpMsg('Two-factor authentication enabled.')
  }

  async function handleTotpDisable() {
    if (!confirm('Disable two-factor authentication? This will make your admin less secure.')) return
    setTotpMsg('')
    const res = await fetch('/api/admin-auth/totp-disable', { method: 'POST' })
    if (res.ok) { setTotpEnabled(false); setTotpRecoveryCodes(null); setTotpMsg('Two-factor authentication disabled.') }
    else { const d = await res.json().catch(() => ({})) as { message?: string }; setTotpMsg(d.message ?? 'Failed to disable TOTP.') }
  }

  async function handleTotpRegenRecovery() {
    if (!confirm('Regenerate recovery codes? Your old codes will stop working immediately.')) return
    setTotpMsg('')
    const res = await fetch('/api/admin-auth/totp-regen-recovery', { method: 'POST' })
    const data = await res.json().catch(() => ({})) as { ok?: boolean; recoveryCodes?: string[]; message?: string }
    if (!res.ok) { setTotpMsg(data.message ?? 'Failed.'); return }
    setTotpRecoveryCodes(data.recoveryCodes ?? null)
    setTotpMsg('New recovery codes generated. Save these now.')
  }

  function addRedirectRule() {
    setForm(f => ({
      ...f,
      redirects: [
        ...(f.redirects ?? []),
        {
          id: Date.now().toString(36),
          path: '/new-short-link',
          target: 'https://',
          statusCode: 301,
        },
      ],
    }))
  }

  function updateRedirectRule(id: string, field: keyof RedirectRule, value: string | number) {
    setForm(f => ({
      ...f,
      redirects: (f.redirects ?? []).map(rule => rule.id === id
        ? {
            ...rule,
            [field]: field === 'statusCode' ? (Number(value) === 302 ? 302 : 301) : value,
          }
        : rule),
    }))
  }

  function removeRedirectRule(id: string) {
    setForm(f => ({ ...f, redirects: (f.redirects ?? []).filter(rule => rule.id !== id) }))
  }

  function addPodcastLink() {
    setForm(f => ({
      ...f,
      podcastFeaturedLinks: [
        ...(f.podcastFeaturedLinks ?? []),
        {
          id: Date.now().toString(36),
          title: '',
          episodeNumber: '',
          summary: '',
          url: '',
          embedUrl: '',
          showNotes: '',
          discussionQuestions: [],
        },
      ],
    }))
  }

  function updatePodcastLink(id: string, field: keyof PodcastFeaturedLink, value: string) {
    setForm(f => ({
      ...f,
      podcastFeaturedLinks: (f.podcastFeaturedLinks ?? []).map(link => link.id === id ? { ...link, [field]: value } : link),
    }))
  }

  function updatePodcastLinkQuestions(id: string, raw: string) {
    const questions = raw.split('\n').map(q => q.trim()).filter(Boolean)
    setForm(f => ({
      ...f,
      podcastFeaturedLinks: (f.podcastFeaturedLinks ?? []).map(link =>
        link.id === id ? { ...link, discussionQuestions: questions } : link
      ),
    }))
  }

  function removePodcastLink(id: string) {
    setForm(f => ({ ...f, podcastFeaturedLinks: (f.podcastFeaturedLinks ?? []).filter(link => link.id !== id) }))
  }

  function addChecklistTask(phase: ChecklistPhase) {
    const id = `task-${Date.now().toString(36)}`
    setPodcastChecklist(prev => ({
      tasks: [...prev.tasks, { id, label: '', phase }],
      episodes: prev.episodes.map(episode => ({
        ...episode,
        tasks: {
          ...episode.tasks,
          [id]: false,
        },
      })),
    }))
  }

  function updateChecklistTask(id: string, field: 'label' | 'phase', value: string) {
    setPodcastChecklist(prev => ({
      ...prev,
      tasks: prev.tasks.map(task => task.id === id
        ? {
            ...task,
            [field]: field === 'phase' ? (value === 'post' ? 'post' : 'pre') : value,
          }
        : task),
    }))
  }

  function removeChecklistTask(id: string) {
    setPodcastChecklist(prev => ({
      tasks: prev.tasks.filter(task => task.id !== id),
      episodes: prev.episodes.map(episode => {
        const nextTasks = { ...episode.tasks }
        delete nextTasks[id]
        return {
          ...episode,
          tasks: nextTasks,
        }
      }),
    }))
  }

  function addChecklistEpisode() {
    const id = `episode-${Date.now().toString(36)}`
    setPodcastChecklist(prev => ({
      ...prev,
      episodes: [
        ...prev.episodes,
        {
          id,
          series: 'Colossians',
          episodeNumber: null,
          title: '',
          datePublished: '',
          expanded: false,
          tasks: Object.fromEntries(prev.tasks.map(task => [task.id, false])),
        },
      ],
    }))
  }

  function updateChecklistEpisode(id: string, field: 'series' | 'episodeNumber' | 'title' | 'datePublished', value: string) {
    setPodcastChecklist(prev => ({
      ...prev,
      episodes: prev.episodes.map(episode => {
        if (episode.id !== id) return episode
        if (field === 'episodeNumber') {
          const parsed = Number.parseInt(value, 10)
          return {
            ...episode,
            episodeNumber: Number.isNaN(parsed) ? null : parsed,
          }
        }
        return {
          ...episode,
          [field]: value,
        }
      }),
    }))
  }

  function toggleChecklistEpisodeTask(episodeId: string, taskId: string) {
    setPodcastChecklist(prev => ({
      ...prev,
      episodes: prev.episodes.map(episode => {
        if (episode.id !== episodeId) return episode
        return {
          ...episode,
          tasks: {
            ...episode.tasks,
            [taskId]: !episode.tasks[taskId],
          },
        }
      }),
    }))
  }

  function resetChecklistEpisode(episodeId: string) {
    setPodcastChecklist(prev => ({
      ...prev,
      episodes: prev.episodes.map(episode => {
        if (episode.id !== episodeId) return episode
        return {
          ...episode,
          datePublished: '',
          tasks: Object.fromEntries(prev.tasks.map(task => [task.id, false])),
        }
      }),
    }))
  }

  function removeChecklistEpisode(id: string) {
    setPodcastChecklist(prev => ({
      ...prev,
      episodes: prev.episodes.filter(episode => episode.id !== id),
    }))
  }

  async function handleSavePodcastChecklist() {
    setPodcastChecklistStatus('saving')
    setPodcastChecklistMsg('')
    try {
      const res = await fetch('/api/admin-podcast-checklist', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ checklist: podcastChecklist }),
      })

      if (!res.ok) {
        const data = await res.json().catch(() => ({})) as { message?: string }
        throw new Error(data.message ?? 'Failed to save checklist')
      }

      const data = await res.json() as { checklist?: PodcastChecklistData }
      if (data.checklist?.tasks && data.checklist?.episodes) {
        setPodcastChecklist(data.checklist)
      }
      setPodcastChecklistStatus('saved')
      setTimeout(() => setPodcastChecklistStatus('idle'), 3000)
    } catch (err) {
      setPodcastChecklistMsg(err instanceof Error ? err.message : 'Failed to save checklist')
      setPodcastChecklistStatus('error')
    }
  }

  async function handleAssetUpload(event: ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0]
    if (!file) return

    setAssetUploadPending(true)
    setOpsMsg('')
    try {
      const dataUrl = await new Promise<string>((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = () => resolve(String(reader.result ?? ''))
        reader.onerror = () => reject(new Error('Failed to read file'))
        reader.readAsDataURL(file)
      })

      const res = await fetch('/api/admin-assets', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ filename: file.name, dataUrl }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error((data as { message?: string }).message ?? 'Upload failed')
      }
      await reloadAssets()
      setOpsMsg('Asset uploaded successfully.')
    } catch (err) {
      setOpsMsg(err instanceof Error ? err.message : 'Upload failed.')
    } finally {
      setAssetUploadPending(false)
      event.target.value = ''
    }
  }

  async function handleDeleteAsset(filename: string) {
    if (!confirm(`Delete asset ${filename}?`)) return
    try {
      const res = await fetch(`/api/admin-assets/${encodeURIComponent(filename)}`, { method: 'DELETE' })
      if (!res.ok) throw new Error('Delete failed')
      await reloadAssets()
      setOpsMsg('Asset deleted.')
    } catch {
      setOpsMsg('Asset delete failed.')
    }
  }

  async function handleSaveAssetTags(filename: string) {
    const tagsText = assetTagEdits[filename] ?? ''
    const tags = tagsText.split(',').map(tag => tag.trim()).filter(Boolean)
    try {
      const res = await fetch(`/api/admin-assets/${encodeURIComponent(filename)}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tags }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error((data as { message?: string }).message ?? 'Save failed')
      }
      await reloadAssets()
      setOpsMsg('Asset tags saved.')
    } catch (err) {
      setOpsMsg(err instanceof Error ? err.message : 'Save failed.')
    }
  }

  async function handlePurgeCache() {
    try {
      const res = await fetch('/api/admin-ops/purge-cache', { method: 'POST' })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error((data as { message?: string }).message ?? 'Cache purge failed')
      }
      await reloadOpsStatus()
      setOpsMsg('Cache purge triggered.')
    } catch (err) {
      setOpsMsg(err instanceof Error ? err.message : 'Cache purge failed.')
    }
  }

  async function handleDeployHook() {
    try {
      const res = await fetch('/api/admin-ops/deploy', { method: 'POST' })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error((data as { message?: string }).message ?? 'Deploy hook failed')
      }
      await reloadOpsStatus()
      setOpsMsg('Deploy hook triggered.')
    } catch (err) {
      setOpsMsg(err instanceof Error ? err.message : 'Deploy hook failed.')
    }
  }

  function maskIp(ip: string) {
    if (!ip || ip === 'unknown') return 'unknown'
    if (ip.includes('.')) {
      const parts = ip.split('.')
      if (parts.length === 4) return `${parts[0]}.${parts[1]}.x.x`
    }
    if (ip.includes(':')) {
      const parts = ip.split(':')
      return `${parts.slice(0, 3).join(':')}:x:x`
    }
    return ip
  }

  async function handleExport() {
    try {
      const r = await fetch('/api/admin-stats/export')
      if (!r.ok) throw new Error('Export failed')
      const data = await r.json()
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `siteforge-admin-export-${new Date().toISOString().slice(0, 10)}.json`
      a.click()
      URL.revokeObjectURL(url)
      setMaintenanceMsg('Export downloaded.')
    } catch {
      setMaintenanceMsg('Export failed.')
    }
  }

  async function handlePrune() {
    const input = prompt('Keep how many days of analytics data?', '180')
    if (input === null) return
    const days = Number(input)
    if (!Number.isFinite(days) || days <= 0) {
      setMaintenanceMsg('Invalid retention days.')
      return
    }
    try {
      const r = await fetch('/api/admin-stats/prune', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ days }),
      })
      if (!r.ok) throw new Error('Prune failed')
      await reloadStats()
      setMaintenanceMsg(`Pruned analytics to ${Math.floor(days)} days.`)
    } catch {
      setMaintenanceMsg('Prune failed.')
    }
  }

  async function handleClear() {
    if (!confirm('Clear ALL analytics data now? This cannot be undone.')) return
    try {
      const r = await fetch('/api/admin-stats/clear', { method: 'POST' })
      if (!r.ok) throw new Error('Clear failed')
      await reloadStats()
      setMaintenanceMsg('All analytics data cleared.')
    } catch {
      setMaintenanceMsg('Clear failed.')
    }
  }

  async function handleBackupNow() {
    try {
      const r = await fetch('/api/admin-stats/backup', { method: 'POST' })
      if (!r.ok) throw new Error('Backup failed')
      await reloadStats()
      await reloadBackups()
      setMaintenanceMsg('Backup snapshot created.')
    } catch {
      setMaintenanceMsg('Backup failed.')
    }
  }

  async function handleRestoreBackup() {
    if (!selectedBackup) {
      setMaintenanceMsg('Select a backup first.')
      return
    }
    if (!confirm(`Restore backup ${selectedBackup}? This will overwrite current admin data and analytics.`)) return
    try {
      const r = await fetch('/api/admin-stats/restore', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ filename: selectedBackup }),
      })
      if (!r.ok) throw new Error('Restore failed')
      await reloadContentFromServer()
      await reloadStats()
      await reloadBackups()
      setMaintenanceMsg(`Restored from ${selectedBackup}. Content fields were refreshed from backup.`)
    } catch {
      setMaintenanceMsg('Restore failed.')
    }
  }

  function formatDate(value: string | null) {
    if (!value) return 'Not available yet'
    const d = new Date(value)
    return Number.isNaN(d.getTime()) ? 'Not available yet' : d.toLocaleString()
  }

  function handleChange(key: StringField, value: string) {
    setForm(f => ({ ...f, [key]: value }))
  }

  function renderImageAssetSelector(value: string | null | undefined, onChange: (value: string) => void, fieldId: string) {
    const assetOptions = [...assets.map(asset => ({ label: asset.filename, value: asset.url }))]
    const currentValue = value?.trim() ?? ''

    if (currentValue && !assetOptions.some(item => item.value === currentValue)) {
      assetOptions.unshift({ label: `Current image (${currentValue})`, value: currentValue })
    }

    if (assetOptions.length === 0) return null

    return (
      <div className="admin-field-asset-picker">
        <label htmlFor={fieldId}>Choose an existing image</label>
        <select id={fieldId} value={assetOptions.some(a => a.value === currentValue) ? currentValue : ''} onChange={e => onChange(e.target.value)}>
          <option value="">Select image</option>
          {assetOptions.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    )
  }

  function renderImagePreview(value: string | null | undefined, alt: string) {
    const src = value?.trim() ?? ''
    if (!src) return null

    return (
      <div className="admin-field-image-preview">
        <span className="admin-field-image-preview-label">Preview</span>
        <img src={src} alt={alt} className="admin-field-image-preview-img" />
      </div>
    )
  }

  function getCustomLinkPlacementLabel(placement: CustomLink['placement']) {
    if (placement === 'platforms') return 'Homepage listen/platform links'
    if (placement === 'footer') return 'Footer navigation links'
    if (placement === 'otherSites') return 'Other site links in footer dropdown'
    if (placement === 'externalSites') return 'Homepage external site links'
    return 'Downloads page (More Resources)'
  }

  function getCustomLinkPreviewPath(placement: CustomLink['placement']) {
    if (placement === 'resources') return '/resources'
    return '/'
  }

  function getContentBlockPageLabel(page: CustomBlock['page']) {
    if (page === 'homepage') return 'Homepage'
    if (page === 'start-here') return 'Start Here'
    if (page === 'episodes') return 'Episodes'
    if (page === 'downloads') return 'Downloads'
    if (page === 'about') return 'About'
    if (page === 'contact') return 'Contact'
    return 'Q&A'
  }

  function getContentBlockPreviewPath(page: CustomBlock['page']) {
    if (page === 'homepage') return '/'
    if (page === 'start-here') return '/start-here'
    if (page === 'episodes') return '/episodes'
    if (page === 'downloads') return '/resources'
    if (page === 'about') return '/about'
    if (page === 'contact') return '/contact'
    return '/questions'
  }

  function renderFileAssetSelector(value: string | null | undefined, onChange: (value: string) => void, fieldId: string) {
    const assetOptions = [...assets.map(asset => ({ label: asset.filename, value: asset.url }))]
    const currentValue = value?.trim() ?? ''

    if (currentValue && !assetOptions.some(item => item.value === currentValue)) {
      assetOptions.unshift({ label: `Current file (${currentValue})`, value: currentValue })
    }

    if (assetOptions.length === 0) return null

    return (
      <div className="admin-field-asset-picker">
        <label htmlFor={fieldId}>Choose an existing file</label>
        <select id={fieldId} value={assetOptions.some(a => a.value === currentValue) ? currentValue : ''} onChange={e => onChange(e.target.value)}>
          <option value="">Select file</option>
          {assetOptions.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    )
  }

  function isImageAsset(filename: string) {
    return /\.(png|jpe?g|webp|gif)$/i.test(filename)
  }

  function confirmLeaveUnsavedChanges() {
    if (!isDirty) return true
    return confirm('You have unsaved changes. Leave this section without saving?')
  }

  function navigateTo(view: AdminView) {
    if (view === adminView) return
    if (!confirmLeaveUnsavedChanges()) return
    setAdminView(view)
    setMobileNavOpen(false)
  }

  function getAdminViewBadge(view: AdminView) {
    if (view === 'questions' && unansweredCount > 0) {
      return { count: unansweredCount, neutral: false }
    }
    if (view === 'emails' && unreadEmailCount > 0) {
      return { count: unreadEmailCount, neutral: false }
    }
    if (view === 'contacts' && contactSubmissions.length > 0) {
      return { count: contactSubmissions.length, neutral: true }
    }
    if (view === 'subscribers' && subscribers.length > 0) {
      return { count: subscribers.length, neutral: true }
    }
    return null
  }

  function renderAdminNavItem(view: AdminView, label: string) {
    const badge = getAdminViewBadge(view)

    return (
      <button
        key={view}
        type="button"
        className={`admin-nav-item${adminView === view ? ' admin-nav-item--active' : ''}`}
        onClick={() => navigateTo(view)}
      >
        {label}
        {badge && (
          <span className={`admin-nav-badge${badge.neutral ? ' admin-nav-badge--neutral' : ''}`}>
            {badge.count}
          </span>
        )}
      </button>
    )
  }

  function jumpToAdminSection(sectionId: string) {
    document.getElementById(sectionId)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }

  function renderSectionJumpNav(view: AdminView) {
    const links = ADMIN_SECTION_LINKS[view] ?? []
    if (links.length < 2) return null

    return (
      <div className="admin-section-jump-nav" aria-label="Jump to section">
        <span className="admin-section-jump-nav-label">Jump to</span>
        <div className="admin-section-jump-nav-links">
          {links.map(link => (
            <button
              key={link.id}
              type="button"
              className="admin-section-jump-nav-btn"
              onClick={() => jumpToAdminSection(link.id)}
            >
              {link.label}
            </button>
          ))}
        </div>
      </div>
    )
  }

  function addLink() {
    setForm(f => ({
      ...f,
      customLinks: [
        ...(f.customLinks ?? []),
        { id: Date.now().toString(36), label: '', url: '', imageUrl: '', placement: 'platforms' as const },
      ],
    }))
  }

  function addOtherSiteLink() {
    setForm(f => ({
      ...f,
      customLinks: [
        ...(f.customLinks ?? []),
        { id: Date.now().toString(36), label: '', url: '', imageUrl: '', placement: 'otherSites' as const },
      ],
    }))
  }

  function addExternalSiteLink() {
    setForm(f => ({
      ...f,
      customLinks: [
        ...(f.customLinks ?? []),
        { id: Date.now().toString(36), label: '', url: '', imageUrl: '', description: '', placement: 'externalSites' as const },
      ],
    }))
  }

  function addResource() {
    setForm(f => ({
      ...f,
      customLinks: [
        ...(f.customLinks ?? []),
        { id: Date.now().toString(36), label: '', url: '', imageUrl: '', description: '', placement: 'resources' as const },
      ],
    }))
  }

  function updateLink(id: string, field: keyof CustomLink, value: string | string[]) {
    setForm(f => ({
      ...f,
      customLinks: (f.customLinks ?? []).map(l => l.id === id ? { ...l, [field]: value } : l),
    }))
  }

  function removeLink(id: string) {
    setForm(f => ({ ...f, customLinks: (f.customLinks ?? []).filter(l => l.id !== id) }))
  }

  function moveLinkToResources(id: string) {
    setForm(f => ({
      ...f,
      customLinks: (f.customLinks ?? []).map(link => (
        link.id === id ? { ...link, placement: 'resources' as const } : link
      )),
    }))
  }

  function addBlock() {
    setForm(f => ({
      ...f,
      customBlocks: [
        ...(f.customBlocks ?? []),
        { id: Date.now().toString(36), heading: '', body: '', page: 'homepage' as const },
      ],
    }))
  }

  function updateBlock(id: string, field: keyof CustomBlock, value: string) {
    setForm(f => ({
      ...f,
      customBlocks: (f.customBlocks ?? []).map(b => b.id === id ? { ...b, [field]: value } : b),
    }))
  }

  function removeBlock(id: string) {
    setForm(f => ({ ...f, customBlocks: (f.customBlocks ?? []).filter(b => b.id !== id) }))
  }

  function addArchivedSeries() {
    setForm(f => ({
      ...f,
      archivedSeries: [
        ...(f.archivedSeries ?? []),
        {
          id: Date.now().toString(36),
          label: 'Archived Study',
          title: '',
          description: '',
          imageUrl: '',
          listenUrl: '',
          studyGuideTitle: '',
          studyGuideDescription: '',
          studyGuideUrl: '',
          resourceLinks: [],
          notes: [],
        },
      ],
    }))
  }

  function updateArchivedSeries(id: string, field: keyof ArchivedSeries, value: string | ArchivedSeriesResourceLink[] | ArchivedSeriesNote[] | { from: number; to: number } | undefined) {
    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => series.id === id ? { ...series, [field]: value } : series),
    }))
  }

  function removeArchivedSeries(id: string) {
    setForm(f => ({ ...f, archivedSeries: (f.archivedSeries ?? []).filter(series => series.id !== id) }))
  }

  function addArchivedSeriesLink(seriesId: string) {
    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => series.id === seriesId
        ? {
            ...series,
            resourceLinks: [
              ...(series.resourceLinks ?? []),
              { id: `${seriesId}-${Date.now().toString(36)}`, label: '', description: '', url: '', amazonUrl: '', amazonLabel: '' },
            ],
          }
        : series),
    }))
  }

  function updateArchivedSeriesLink(seriesId: string, linkId: string, field: keyof ArchivedSeriesResourceLink, value: string) {
    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => series.id === seriesId
        ? {
            ...series,
            resourceLinks: (series.resourceLinks ?? []).map(link => link.id === linkId ? { ...link, [field]: value } : link),
          }
        : series),
    }))
  }

  function removeArchivedSeriesLink(seriesId: string, linkId: string) {
    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => series.id === seriesId
        ? { ...series, resourceLinks: (series.resourceLinks ?? []).filter(link => link.id !== linkId) }
        : series),
    }))
  }

  function addExistingCustomLinkToArchivedSeries(seriesId: string) {
    const selectedLinkId = archiveLinkSelectionBySeries[seriesId]
    if (!selectedLinkId) return

    const source = (form.customLinks ?? []).find(link => link.id === selectedLinkId)
    if (!source) return

    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => {
        if (series.id !== seriesId) return series

        const alreadyExists = (series.resourceLinks ?? []).some(link =>
          link.url.trim().toLowerCase() === source.url.trim().toLowerCase(),
        )

        if (alreadyExists) return series

        return {
          ...series,
          resourceLinks: [
            ...(series.resourceLinks ?? []),
            {
              id: `${seriesId}-${Date.now().toString(36)}`,
              label: source.label,
              description: source.description ?? '',
              url: source.url,
              amazonUrl: source.amazonUrl ?? '',
              amazonLabel: source.amazonLabel ?? '',
            },
          ],
        }
      }),
    }))
  }

  function addAllExistingCustomLinksToArchivedSeries(seriesId: string) {
    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => {
        if (series.id !== seriesId) return series

        const existingUrls = new Set(
          (series.resourceLinks ?? [])
            .map(link => link.url.trim().toLowerCase())
            .filter(Boolean),
        )

        const toAdd = (f.customLinks ?? [])
          .filter(link => link.url.trim().length > 0)
          .filter(link => !existingUrls.has(link.url.trim().toLowerCase()))
          .map(link => ({
            id: `${seriesId}-${Date.now().toString(36)}-${link.id}`,
            label: link.label,
            description: link.description ?? '',
            url: link.url,
            amazonUrl: link.amazonUrl ?? '',
            amazonLabel: link.amazonLabel ?? '',
          }))

        if (toAdd.length === 0) return series

        return {
          ...series,
          resourceLinks: [
            ...(series.resourceLinks ?? []),
            ...toAdd,
          ],
        }
      }),
    }))
  }

  function addArchivedSeriesNote(seriesId: string) {
    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => series.id === seriesId
        ? {
            ...series,
            notes: [
              ...(series.notes ?? []),
              { id: `${seriesId}-note-${Date.now().toString(36)}`, heading: '', body: '' },
            ],
          }
        : series),
    }))
  }

  function updateArchivedSeriesNote(seriesId: string, noteId: string, field: keyof ArchivedSeriesNote, value: string) {
    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => series.id === seriesId
        ? {
            ...series,
            notes: (series.notes ?? []).map(note => note.id === noteId ? { ...note, [field]: value } : note),
          }
        : series),
    }))
  }

  function removeArchivedSeriesNote(seriesId: string, noteId: string) {
    setForm(f => ({
      ...f,
      archivedSeries: (f.archivedSeries ?? []).map(series => series.id === seriesId
        ? { ...series, notes: (series.notes ?? []).filter(note => note.id !== noteId) }
        : series),
    }))
  }

  function addStudyProgram() {
    setForm(f => ({
      ...f,
      studies: [
        ...(f.studies ?? []),
        {
          id: `study-${Date.now().toString(36)}`,
          slug: `new-study-${Date.now().toString(36)}`,
          title: 'New Study',
          description: 'Add study description',
          homepageEyebrow: 'New Study',
          showOnHomepage: false,
          showNewTag: false,
          newTagLabel: 'NEW',
          status: 'planned',
          difficulty: 'beginner',
          estimatedHours: 8,
          completionBadge: 'Study Completion',
          numberOfChapters: 4,
          sections: [],
        },
      ],
    }))
  }

  function updateStudyProgram(studyId: string, field: keyof Omit<StudyProgram, 'sections'>, value: string | number | boolean) {
    setForm(f => ({
      ...f,
      studies: (f.studies ?? []).map(study => study.id === studyId ? { ...study, [field]: value } : study),
    }))
  }

  function removeStudyProgram(studyId: string) {
    setForm(f => ({
      ...f,
      studies: (f.studies ?? []).filter(study => study.id !== studyId),
    }))
  }

  function addStudySection(studyId: string) {
    setForm(f => ({
      ...f,
      studies: (f.studies ?? []).map(study => study.id === studyId
        ? {
            ...study,
            sections: [
              ...(study.sections ?? []),
              {
                id: `${study.slug || 'section'}-${Date.now().toString(36)}`,
                chapter: 1,
                reference: '',
                title: '',
                audioEmbedUrl: '',
                passageText: '',
                summary: '',
                commentary: '',
                greekNotes: [],
                studyQuestions: [],
                checkpointPrompt: '',
                checkpointQuestions: [],
              },
            ],
          }
        : study),
    }))
  }

  function updateStudySection(studyId: string, sectionId: string, field: keyof ColossiansStudySection, value: string | number | string[]) {
    setForm(f => ({
      ...f,
      studies: (f.studies ?? []).map(study => study.id === studyId
        ? {
            ...study,
            sections: (study.sections ?? []).map(section => section.id === sectionId ? { ...section, [field]: value } : section),
          }
        : study),
    }))
  }

  function removeStudySection(studyId: string, sectionId: string) {
    setForm(f => ({
      ...f,
      studies: (f.studies ?? []).map(study => study.id === studyId
        ? { ...study, sections: (study.sections ?? []).filter(section => section.id !== sectionId) }
        : study),
    }))
  }

  function archiveCurrentSeriesSnapshot() {
    const currentTitle = form.seriesTitle.trim()
    if (!currentTitle) {
      alert('Set a current series title first, then archive it.')
      return
    }

    const existing = (form.archivedSeries ?? []).some(
      series => series.title.trim().toLowerCase() === currentTitle.toLowerCase(),
    )

    if (existing && !confirm(`An archived series named "${currentTitle}" already exists. Create another snapshot anyway?`)) {
      return
    }

    const resourceLinks = (form.customLinks ?? [])
      .filter(link => link.placement === 'resources')
      .filter(link => link.label.trim().length > 0 || link.url.trim().length > 0)
      .map(link => ({
        id: `archive-link-${Date.now().toString(36)}-${link.id}`,
        label: link.label,
        url: link.url,
      }))

    const notes = (form.customBlocks ?? [])
      .filter(block => block.heading.trim().length > 0 || block.body.trim().length > 0)
      .map(block => ({
        id: `archive-note-${Date.now().toString(36)}-${block.id}`,
        heading: block.heading,
        body: block.body,
      }))

    const archived: ArchivedSeries = {
      id: `archive-${Date.now().toString(36)}`,
      label: form.seriesLabel?.trim() || 'Archived Study',
      title: form.seriesTitle,
      description: form.seriesDescription,
      imageUrl: form.seriesImageUrl,
      listenUrl: form.seriesListenUrl,
      studyGuideTitle: form.studyGuideTitle,
      studyGuideDescription: form.studyGuideDescription,
      studyGuideUrl: form.studyGuideUrl,
      resourceLinks,
      notes,
    }

    setForm(f => ({
      ...f,
      archivedSeries: [archived, ...(f.archivedSeries ?? [])],
    }))
    navigateTo('archived-series')
  }

  async function handleAnswerQuestion(questionId: string, answer: string) {
    if (!answer.trim()) return
    try {
      const res = await fetch(`/api/admin-questions/${questionId}/answer`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ answer: answer.trim() }),
      })
      if (!res.ok) throw new Error('Failed to answer question')
      setQuestions(qs =>
        qs.map(q =>
          q.id === questionId
            ? { ...q, answer: answer.trim(), answeredAt: new Date().toISOString() }
            : q
        )
      )
      setEditingQuestionId(null)
      setAnsweredQuestions(a => ({ ...a, [questionId]: '' }))
    } catch {
      alert('Failed to save answer')
    }
  }

  async function handleApproveQuestion(questionId: string, approved: boolean) {
    try {
      const res = await fetch(`/api/admin-questions/${questionId}/approve`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ approved }),
      })
      if (!res.ok) throw new Error('Failed to update question')
      setQuestions(qs =>
        qs.map(q =>
          q.id === questionId
            ? { ...q, isApproved: approved, approvedAt: approved ? new Date().toISOString() : null }
            : q
        )
      )
    } catch {
      alert('Failed to update question')
    }
  }

  async function handleDeleteQuestion(questionId: string) {
    if (!confirm('Delete this question permanently?')) return
    try {
      const res = await fetch(`/api/admin-questions/${questionId}`, { method: 'DELETE' })
      if (!res.ok) throw new Error('Failed to delete question')
      setQuestions(qs => qs.filter(q => q.id !== questionId))
      setSelectedQuestionIds(prev => { const next = new Set(prev); next.delete(questionId); return next })
    } catch {
      alert('Failed to delete question')
    }
  }

  async function handleBulkDeleteQuestions() {
    if (selectedQuestionIds.size === 0) return
    if (!confirm(`Delete ${selectedQuestionIds.size} question${selectedQuestionIds.size === 1 ? '' : 's'} permanently?`)) return
    const ids = Array.from(selectedQuestionIds)
    let deletedCount = 0
    for (const id of ids) {
      try {
        const res = await fetch(`/api/admin-questions/${id}`, { method: 'DELETE' })
        if (res.ok) {
          deletedCount++
          setQuestions(qs => qs.filter(q => q.id !== id))
        }
      } catch {
        // continue with remaining
      }
    }
    setSelectedQuestionIds(new Set())
    if (deletedCount < ids.length) alert(`Deleted ${deletedCount} of ${ids.length} questions.`)
  }

  async function handleCreateManualQuestion() {
    if (!manualQuestion.firstName.trim() || !manualQuestion.question.trim()) {
      setManualQuestionStatus('error')
      setManualQuestionMsg('First name and question are required.')
      return
    }

    setManualQuestionStatus('saving')
    setManualQuestionMsg('')

    try {
      const res = await fetch('/api/admin-questions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          firstName: manualQuestion.firstName,
          email: manualQuestion.email,
          question: manualQuestion.question,
          answer: manualQuestion.answer,
          approve: manualQuestion.approve,
        }),
      })

      const data = await res.json().catch(() => ({})) as { question?: Question; message?: string }
      if (!res.ok || !data.question) {
        throw new Error(data.message ?? 'Failed to add question.')
      }

      setQuestions(items => [data.question as Question, ...items])
      setManualQuestion({ firstName: '', email: '', question: '', answer: '', approve: false })
      setManualQuestionStatus('saved')
      setManualQuestionMsg('Question added to draft Q&A list.')
    } catch (err) {
      setManualQuestionStatus('error')
      setManualQuestionMsg(err instanceof Error ? err.message : 'Failed to add question.')
    }
  }

  async function handleDeleteContactSubmission(submissionId: string) {
    if (!confirm('Delete this contact submission permanently?')) return
    try {
      const res = await fetch(`/api/admin-contact-submissions/${encodeURIComponent(submissionId)}`, { method: 'DELETE' })
      if (!res.ok) throw new Error('Failed to delete submission')
      await reloadContactSubmissions()
      await reloadStats()
      setMaintenanceMsg('Contact submission deleted.')
    } catch {
      setMaintenanceMsg('Failed to delete contact submission.')
    }
  }

  async function handleArchiveContactSubmission(submissionId: string, archived: boolean) {
    try {
      const res = await fetch(`/api/admin-contact-submissions/${encodeURIComponent(submissionId)}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ archived }),
      })
      if (!res.ok) throw new Error('Failed to update submission')
      await reloadContactSubmissions()
      await reloadStats()
      setContactReplyMsg(archived ? 'Message archived.' : 'Message moved back to inbox.')
    } catch {
      setContactReplyMsg('Failed to update archive status.')
    }
  }

  function openContactReplyComposer(submission: ContactSubmission) {
    const firstName = submission.name?.trim().split(/\s+/)[0] || 'there'
    setContactReplyDraft({
      submissionId: submission.id,
      recipientName: submission.name,
      recipientEmail: submission.email,
      subject: 'Thanks for reaching out to Verse by Verse with Nate',
      message: `Thank you for reaching out.\n\nI appreciate your message and wanted to follow up personally.`,
    })
    setContactReplyStatus('idle')
    setContactReplyMsg(`Composing a reply to ${firstName}.`) 
  }

  function applyContactReplyTemplate(templateId: string) {
    if (!contactReplyDraft) return
    const template = contactReplyTemplates.find(item => item.id === templateId)
    if (!template) return

    setContactReplyDraft({
      ...contactReplyDraft,
      subject: template.subject,
      message: template.message,
    })
    setContactReplyMsg(`Applied template: ${template.label}.`)
  }

  function addContactReplyTemplate() {
    setContactReplyTemplates(items => ([
      ...items,
      {
        id: Date.now().toString(36),
        label: '',
        subject: '',
        message: '',
      },
    ]))
    setContactTemplateStatus('idle')
  }

  function updateContactReplyTemplate(id: string, field: keyof ContactReplyTemplate, value: string) {
    setContactReplyTemplates(items => items.map(item => item.id === id ? { ...item, [field]: value } : item))
    setContactTemplateStatus('idle')
  }

  function removeContactReplyTemplate(id: string) {
    setContactReplyTemplates(items => items.filter(item => item.id !== id))
    setContactTemplateStatus('idle')
  }

  async function handleSaveContactReplyTemplates() {
    setContactTemplateStatus('saving')
    try {
      const res = await fetch('/api/admin-contact-reply-templates', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ templates: contactReplyTemplates }),
      })
      if (!res.ok) throw new Error('Failed to save templates')
      await reloadContactReplyTemplates()
      setContactTemplateStatus('saved')
      setContactReplyMsg('Reply templates saved.')
    } catch {
      setContactTemplateStatus('error')
      setContactReplyMsg('Failed to save reply templates.')
    }
  }

  async function handleSendContactReply() {
    if (!contactReplyDraft) return
    setContactReplyStatus('sending')
    setContactReplyMsg('')

    try {
      const res = await fetch(`/api/admin-contact-submissions/${encodeURIComponent(contactReplyDraft.submissionId)}/reply`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          subject: contactReplyDraft.subject,
          message: contactReplyDraft.message,
        }),
      })

      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error((data as { message?: string }).message ?? 'Failed to send email.')
      }

      setContactReplyStatus('sent')
      setContactReplyMsg(`Reply sent to ${contactReplyDraft.recipientEmail} from hello@versebyversewithnate.us.`)
      await reloadContactReplyHistory()
      setContactReplyDraft(null)
    } catch (err) {
      setContactReplyStatus('error')
      setContactReplyMsg(err instanceof Error ? err.message : 'Failed to send email.')
    }
  }

  const resourceLinks = (form.customLinks ?? []).filter(link => link.placement === 'resources')
  const archivedResourceCount = (form.archivedSeries ?? []).reduce((count, series) => {
    return count + (series.resourceLinks ?? []).length
  }, 0)

  const filteredAdminQuestions = questions.filter(question => {
    const search = questionSearch.trim().toLowerCase()
    const matchesSearch = !search
      || question.firstName.toLowerCase().includes(search)
      || question.question.toLowerCase().includes(search)
      || question.answer.toLowerCase().includes(search)

    const matchesFilter = (
      questionFilter === 'all'
      || (questionFilter === 'pending' && !question.isApproved)
      || (questionFilter === 'approved' && question.isApproved)
      || (questionFilter === 'answered' && Boolean(question.answer?.trim()))
      || (questionFilter === 'unanswered' && !question.answer?.trim())
    )

    return matchesSearch && matchesFilter
  })

  const QUESTION_PAGE_SIZE = 20
  const totalQuestionPages = Math.max(1, Math.ceil(filteredAdminQuestions.length / QUESTION_PAGE_SIZE))
  const visibleAdminQuestions = filteredAdminQuestions.slice(
    questionPage * QUESTION_PAGE_SIZE,
    (questionPage + 1) * QUESTION_PAGE_SIZE,
  )
  const checklistTaskOrder = [
    'verify_script',
    'read_script',
    'record',
    'mix',
    'edit',
    'video_script',
    'post_spotify',
    'update_website',
    'send_email',
  ]
  const checklistTaskOrderIndex = new Map(checklistTaskOrder.map((id, index) => [id, index]))
  const checklistTasksSorted = [...podcastChecklist.tasks].sort((a, b) => {
    const aIndex = checklistTaskOrderIndex.get(a.id)
    const bIndex = checklistTaskOrderIndex.get(b.id)
    const aKnown = typeof aIndex === 'number'
    const bKnown = typeof bIndex === 'number'

    if (aKnown && bKnown) return aIndex - bIndex
    if (aKnown && !bKnown) return -1
    if (!aKnown && bKnown) return 1
    return a.label.localeCompare(b.label, undefined, { sensitivity: 'base' })
  })
  const checklistPreTasks = checklistTasksSorted.filter(task => task.phase === 'pre')
  const checklistPostTasks = checklistTasksSorted.filter(task => task.phase === 'post')
  const checklistEpisodesSorted = [...podcastChecklist.episodes].sort((a, b) => {
    const isDraft = (episode: PodcastChecklistEpisode) => {
      const hasNumber = episode.episodeNumber !== null
      const hasTitle = Boolean(episode.title?.trim())
      const hasDate = Boolean(episode.datePublished?.trim())
      return !hasNumber && !hasTitle && !hasDate
    }

    const aDraft = isDraft(a)
    const bDraft = isDraft(b)
    if (aDraft && !bDraft) return -1
    if (!aDraft && bDraft) return 1

    const seriesOrder = (series: string) => {
      const key = series.trim().toLowerCase()
      if (key === 'titus') return 0
      if (key === 'colossians') return 1
      return 2
    }

    const bySeries = seriesOrder(a.series) - seriesOrder(b.series)
    if (bySeries !== 0) return bySeries

    const nameSort = a.series.localeCompare(b.series, undefined, { sensitivity: 'base' })
    if (nameSort !== 0) return nameSort

    const aNum = a.episodeNumber
    const bNum = b.episodeNumber
    if (aNum === null && bNum === null) return a.title.localeCompare(b.title, undefined, { sensitivity: 'base' })
    if (aNum === null) return 1
    if (bNum === null) return -1
    if (aNum !== bNum) return aNum - bNum

    return a.title.localeCompare(b.title, undefined, { sensitivity: 'base' })
  })

  function renderSaveStatus() {
    return (
      <>
        {status === 'saved' && <p className="admin-status admin-status--ok">✓ Changes saved.</p>}
        {status === 'error' && <p className="admin-status admin-status--err">✗ {errorMsg}</p>}
      </>
    )
  }

  function renderPodcastChecklistStatus() {
    return (
      <>
        {podcastChecklistStatus === 'saved' && <p className="admin-status admin-status--ok">✓ Checklist saved.</p>}
        {podcastChecklistStatus === 'error' && <p className="admin-status admin-status--err">✗ {podcastChecklistMsg}</p>}
      </>
    )
  }

  return (
    <div className="admin-shell">
      {/* ── Top bar ── */}
      <header className="admin-topbar">
        <div className="admin-topbar-left">
          <button
            type="button"
            className={`admin-mobile-menu-btn${mobileNavOpen ? ' admin-mobile-menu-btn--open' : ''}`}
            onClick={() => setMobileNavOpen(open => !open)}
            aria-expanded={mobileNavOpen}
            aria-controls="admin-sidebar-nav"
          >
            {mobileNavOpen ? 'Close' : 'Menu'}
          </button>
          <div className="admin-topbar-brand">
            <span className="admin-topbar-ornament">✦</span>
            <span className="admin-topbar-title">Site Admin</span>
            <span className="admin-topbar-sub">Verse by Verse with Nate</span>
          </div>
        </div>
        <div className="admin-topbar-state">
          {isDirty && <span className="admin-status admin-status--warn">● Unsaved</span>}
          <span className="admin-topbar-meta">Draft: {formatDate(publishState.draftUpdatedAt)}</span>
          <span className="admin-topbar-meta">Live: {formatDate(publishState.publishedAt)}</span>
        </div>
        <div className="admin-topbar-actions">
          <label className="admin-view-picker" aria-label="Jump to admin section">
            <span className="admin-view-picker-label">Jump to</span>
            <select
              className="admin-view-picker-select"
              value={adminView}
              onChange={e => navigateTo(e.target.value as AdminView)}
            >
              {ADMIN_VIEW_OPTIONS.map(group => (
                <optgroup key={group.group} label={group.group}>
                  {group.options.map(option => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </optgroup>
              ))}
            </select>
          </label>
          <button type="button" className="btn-admin-save" onClick={handleSaveDraft} disabled={status === 'saving' || !isDirty}>
            {status === 'saving' ? 'Saving…' : 'Save Draft'}
          </button>
          <button type="button" className={`btn-admin-reset${previewOpen ? ' btn-admin-reset--active' : ''}`} onClick={() => setPreviewOpen(o => !o)}>
            {previewOpen ? 'Close Preview' : 'Preview'}
          </button>
          <button type="button" className="btn-admin-reset" onClick={handlePublishDraft}>Publish</button>
        </div>
      </header>

      <div className={`admin-layout${previewOpen ? ' admin-layout--split' : ''}`}>
        {/* ── Sidebar ── */}
        <nav id="admin-sidebar-nav" className={`admin-sidebar${mobileNavOpen ? ' admin-sidebar--open' : ''}`} aria-label="Admin navigation">
          <div className="admin-sidebar-meta-links">
            <Link
              to="/"
              className="admin-meta-link"
              onClick={e => {
                if (!confirmLeaveUnsavedChanges()) e.preventDefault()
                else setMobileNavOpen(false)
              }}
            >
              ← Back to site
            </Link>
            <button
              type="button"
              className="admin-meta-link"
              onClick={() => {
                if (!confirmLeaveUnsavedChanges()) return
                setMobileNavOpen(false)
                void onLogout()
              }}
            >
              Log Out
            </button>
          </div>

          <div className="admin-nav-search">
            <label htmlFor="admin-nav-search-input">Find a section</label>
            <input
              id="admin-nav-search-input"
              type="search"
              value={navSearch}
              onChange={e => setNavSearch(e.target.value)}
              placeholder="Search admin..."
            />
          </div>

          {filteredAdminViewOptions.length === 0 ? (
            <p className="admin-stats-note admin-nav-empty">No admin sections match this search.</p>
          ) : (
            filteredAdminViewOptions.map(group => (
              <div key={group.group} className="admin-nav-group">
                <span className="admin-nav-label">{group.group}</span>
                {group.options.map(option => renderAdminNavItem(option.value, option.label))}
              </div>
            ))
          )}
        </nav>

        {mobileNavOpen && <button type="button" className="admin-sidebar-backdrop" aria-label="Close navigation menu" onClick={() => setMobileNavOpen(false)} />}

        {/* ── Content panel ── */}
        <main className="admin-panel">

          {/* DASHBOARD */}
          {adminView === 'dashboard' && (() => {
            const thisWeekHits = stats?.last7Days?.reduce((s, d) => s + d.hits, 0) ?? 0
            const thisWeekReal = stats?.last7DaysReal?.reduce((s, d) => s + d.hits, 0) ?? 0
            const dashboardHour = dashboardNow.getHours()
            const welcomeMessage = dashboardHour < 12
              ? 'Good morning.'
              : dashboardHour < 18
                ? 'Good afternoon.'
                : 'Good evening.'
            const dashboardDateLabel = dashboardNow.toLocaleDateString(undefined, {
              weekday: 'long',
              month: 'long',
              day: 'numeric',
            })
            const dashboardTimeLabel = dashboardNow.toLocaleTimeString(undefined, {
              hour: 'numeric',
              minute: '2-digit',
              second: '2-digit',
            })
            const recentContacts = [...contactSubmissions]
              .sort((a, b) => new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime())
              .slice(0, 5)
            const recentQuestions = [...questions]
              .sort((a, b) => new Date(b.submittedAt ?? '').getTime() - new Date(a.submittedAt ?? '').getTime())
              .slice(0, 5)
            const approvedCount = questions.filter(q => q.isApproved).length
            const answeredCount = questions.filter(q => !!q.answer?.trim()).length
            const topEnrollment = stats?.studyEnrollment?.enrollmentsByStudy?.[0]
            return (
              <section className="admin-panel-section">
                <div className="admin-panel-head">
                  <h2>Dashboard</h2>
                  <p>Quick overview of your ministry site.</p>
                </div>

                <div className="admin-dashboard-welcome">
                  <div>
                    <h3 className="admin-dashboard-welcome-title">{welcomeMessage}</h3>
                    <p className="admin-dashboard-welcome-copy">Here&apos;s what needs your attention and how the site is performing today.</p>
                  </div>
                  <div className="admin-dashboard-clock" aria-label={`Current time ${dashboardTimeLabel} on ${dashboardDateLabel}`}>
                    <span className="admin-dashboard-clock-time">{dashboardTimeLabel}</span>
                    <span className="admin-dashboard-clock-date">{dashboardDateLabel}</span>
                  </div>
                </div>

                <div className="admin-dashboard-grid">
                  <div className={`admin-dashboard-card${unansweredCount > 0 ? ' admin-dashboard-card--alert' : ''}`}>
                    <div className="admin-dashboard-card-value">{unansweredCount}</div>
                    <div className="admin-dashboard-card-label">Unanswered Questions</div>
                    <div className="admin-dashboard-card-sub">{answeredCount} answered · {approvedCount} approved of {questions.length}</div>
                    {unansweredCount > 0 && <button type="button" className="admin-dashboard-card-action" onClick={() => { setQuestionFilter('unanswered'); navigateTo('questions') }}>Answer Now →</button>}
                  </div>
                  <div className={`admin-dashboard-card${unreadEmailCount > 0 ? ' admin-dashboard-card--alert' : ''}`}>
                    <div className="admin-dashboard-card-value">{unreadEmailCount}</div>
                    <div className="admin-dashboard-card-label">Unread Emails</div>
                    <div className="admin-dashboard-card-sub">{contactSubmissions.filter(s => s.archived).length} archived · {contactSubmissions.length} total</div>
                    {unreadEmailCount > 0 && <button type="button" className="admin-dashboard-card-action" onClick={() => navigateTo('emails')}>Open Inbox →</button>}
                  </div>
                  <div className="admin-dashboard-card">
                    <div className="admin-dashboard-card-value">{thisWeekReal.toLocaleString()}</div>
                    <div className="admin-dashboard-card-label">Real Visits (7 Days)</div>
                    <div className="admin-dashboard-card-sub">{thisWeekHits.toLocaleString()} total · {stats?.visitors?.uniqueVisitors?.toLocaleString() ?? '—'} unique all time</div>
                    <button type="button" className="admin-dashboard-card-action" onClick={() => navigateTo('analytics')}>Full Analytics →</button>
                  </div>
                  <div className="admin-dashboard-card">
                    <div className="admin-dashboard-card-value">{subscribers.length}</div>
                    <div className="admin-dashboard-card-label">Email Subscribers</div>
                    <div className="admin-dashboard-card-sub">{contactSubmissions.length} total contact submissions</div>
                    <button type="button" className="admin-dashboard-card-action" onClick={() => navigateTo('subscribers')}>View List →</button>
                  </div>
                  <div className="admin-dashboard-card">
                    <div className="admin-dashboard-card-value">{stats?.studyEnrollment?.totalEnrollments ?? 0}</div>
                    <div className="admin-dashboard-card-label">Study Enrollments</div>
                    <div className="admin-dashboard-card-sub">
                      {stats?.studyEnrollment?.enrolledUsers ?? 0} of {stats?.studyEnrollment?.totalUsers ?? 0} students enrolled
                      {topEnrollment ? ` · Top: ${topEnrollment.title} (${topEnrollment.count})` : ''}
                    </div>
                  </div>
                  <div className="admin-dashboard-card">
                    <div className="admin-dashboard-card-value">{downloadStats['titus-study'] ?? 0}</div>
                    <div className="admin-dashboard-card-label">Titus Study Downloads</div>
                    <div className="admin-dashboard-card-sub">
                      {Object.values(downloadStats).reduce((a, b) => a + b, 0)} total resource downloads
                    </div>
                  </div>
                  {publishState?.publishedAt && (
                    <div className="admin-dashboard-card">
                      <div className="admin-dashboard-card-value" style={{ fontSize: '1rem', marginTop: '0.25rem' }}>{formatDate(publishState.publishedAt)}</div>
                      <div className="admin-dashboard-card-label">Last Published</div>
                      {publishState.draftUpdatedAt && <div className="admin-dashboard-card-sub">Draft updated {formatDate(publishState.draftUpdatedAt)}</div>}
                    </div>
                  )}
                </div>

                <div className="admin-dashboard-activity">
                  <div className="admin-dashboard-activity-col">
                    <h3 className="admin-dashboard-activity-heading">Recent Contacts</h3>
                    {recentContacts.length === 0
                      ? <p className="admin-stats-note">No contacts yet.</p>
                      : (
                        <div className="admin-dashboard-feed">
                          {recentContacts.map(c => (
                            <div key={c.id} className="admin-dashboard-feed-item">
                              <div className="admin-dashboard-feed-meta">
                                <strong>{c.name}</strong>
                                <span className="admin-dashboard-feed-date">{formatDate(c.submittedAt)}</span>
                              </div>
                              <div className="admin-dashboard-feed-email">{c.email}</div>
                              {c.message && <div className="admin-dashboard-feed-preview">{c.message.slice(0, 100)}{c.message.length > 100 ? '…' : ''}</div>}
                            </div>
                          ))}
                          <button type="button" className="admin-dashboard-card-action" style={{ marginTop: '0.5rem' }} onClick={() => navigateTo('contacts')}>View All Contacts →</button>
                        </div>
                      )
                    }
                  </div>
                  <div className="admin-dashboard-activity-col">
                    <h3 className="admin-dashboard-activity-heading">Recent Questions</h3>
                    {recentQuestions.length === 0
                      ? <p className="admin-stats-note">No questions yet.</p>
                      : (
                        <div className="admin-dashboard-feed">
                          {recentQuestions.map(q => (
                            <div key={q.id} className="admin-dashboard-feed-item">
                              <div className="admin-dashboard-feed-meta">
                                <strong>{q.firstName}</strong>
                                <span className={`admin-badge ${q.isApproved ? 'admin-badge--approved' : 'admin-badge--pending'}`} style={{ fontSize: '0.65rem' }}>{q.isApproved ? 'Approved' : 'Pending'}</span>
                                <span className="admin-dashboard-feed-date">{formatDate(q.submittedAt ?? '')}</span>
                              </div>
                              <div className="admin-dashboard-feed-preview">{q.question.slice(0, 100)}{q.question.length > 100 ? '…' : ''}</div>
                            </div>
                          ))}
                          <button type="button" className="admin-dashboard-card-action" style={{ marginTop: '0.5rem' }} onClick={() => navigateTo('questions')}>View All Questions →</button>
                        </div>
                      )
                    }
                  </div>
                </div>

                <div className="admin-dashboard-activity" style={{ marginTop: '1rem' }}>
                  <div className="admin-dashboard-activity-col" style={{ gridColumn: '1 / -1' }}>
                    <h3 className="admin-dashboard-activity-heading">Study Users &amp; Enrollments</h3>
                    {stats?.studyEnrollment?.users?.length
                      ? (
                        <div className="admin-dashboard-feed">
                          {stats.studyEnrollment.users.map(user => (
                            <div key={user.id} className="admin-dashboard-feed-item">
                              <div className="admin-dashboard-feed-meta">
                                <strong>{user.displayName || user.username}</strong>
                                {user.displayName && <span className="admin-dashboard-feed-email">{user.username}</span>}
                              </div>
                              <div className="admin-dashboard-feed-preview">
                                {user.enrolledStudies.length
                                  ? `Enrolled in: ${user.enrolledStudies.map(study => study.title).join(', ')}`
                                  : 'Not enrolled in any studies yet.'}
                              </div>
                            </div>
                          ))}
                        </div>
                      )
                      : <p className="admin-stats-note">No study users yet.</p>
                    }
                  </div>
                </div>
              </section>
            )
          })()}

          {/* CONTACTS */}
          {adminView === 'contacts' && (() => {
            const searchTerm = contactSearch.trim().toLowerCase()
            const grouped = new Map<string, ContactSubmission[]>()

            for (const submission of contactSubmissions) {
              const emailKey = submission.email.trim().toLowerCase()
              const nameKey = submission.name.trim().toLowerCase()
              const key = emailKey || nameKey || submission.id
              const entries = grouped.get(key)
              if (entries) entries.push(submission)
              else grouped.set(key, [submission])
            }

            const rolledUp = Array.from(grouped.values())
              .map(entries => {
                const sortedEntries = [...entries].sort((a, b) => new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime())
                const latest = sortedEntries[0]
                return {
                  ...latest,
                  archived: sortedEntries.every(entry => entry.archived === true),
                  subscribe: sortedEntries.some(entry => entry.subscribe),
                  message: latest.message || sortedEntries.find(entry => entry.message)?.message || '',
                  submissionCount: sortedEntries.length,
                }
              })
              .filter(contact => {
                if (!searchTerm) return true
                return contact.name.toLowerCase().includes(searchTerm)
                  || contact.email.toLowerCase().includes(searchTerm)
                  || contact.message.toLowerCase().includes(searchTerm)
              })
              .sort((a, b) => new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime())

            return (
              <section className="admin-panel-section">
                <div className="admin-panel-head">
                  <h2>Contacts</h2>
                  <p>{rolledUp.length} contacts from {contactSubmissions.length} total submissions — repeat senders are grouped together.</p>
                </div>
                <div className="admin-toolbar" style={{ marginBottom: '1rem', display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
                  <input
                    type="search"
                    placeholder="Search name, email, or message…"
                    value={contactSearch}
                    onChange={e => setContactSearch(e.target.value)}
                    style={{ minWidth: '260px', maxWidth: '440px', width: '100%' }}
                  />
                  <span className="admin-stats-note" style={{ margin: 0 }}>{rolledUp.length} result{rolledUp.length !== 1 ? 's' : ''}</span>
                </div>
                {rolledUp.length === 0
                  ? <p className="admin-stats-note">No contacts{contactSearch ? ' match your search' : ' yet'}.</p>
                  : (
                    <div className="admin-visits-table-wrap">
                      <table className="admin-visits-table">
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Type</th>
                            <th>Subscriber</th>
                            <th>Date</th>
                            <th>Message</th>
                          </tr>
                        </thead>
                        <tbody>
                          {rolledUp.map(c => (
                            <tr key={c.id} className={c.archived ? 'admin-contacts-row--archived' : ''}>
                              <td>
                                <div>{c.name}</div>
                                {c.submissionCount > 1 && <div className="admin-stats-note" style={{ margin: '0.2rem 0 0' }}>{c.submissionCount} submissions</div>}
                              </td>
                              <td><a href={`mailto:${c.email}`}>{c.email}</a></td>
                              <td><span className="admin-badge admin-badge--pending" style={{ fontSize: '0.7rem' }}>{c.messageType ?? 'contact'}</span></td>
                              <td style={{ textAlign: 'center' }}>{c.subscribe ? '✓' : ''}</td>
                              <td style={{ whiteSpace: 'nowrap' }}>{formatDate(c.submittedAt)}</td>
                              <td style={{ maxWidth: '280px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={c.message}>{c.message ?? '—'}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  )
                }
              </section>
            )
          })()}

          {/* SUBSCRIBERS */}
          {adminView === 'subscribers' && (() => {
            const filteredSubs = subscribers.filter(s =>
              !subscriberSearch.trim() ||
              s.name.toLowerCase().includes(subscriberSearch.toLowerCase()) ||
              s.email.toLowerCase().includes(subscriberSearch.toLowerCase())
            )
            return (
              <section className="admin-panel-section">
                <div className="admin-panel-head">
                  <h2>Subscribers</h2>
                  <p>{subscribers.length} people have opted in to email updates.</p>
                </div>
                <div className="admin-toolbar" style={{ marginBottom: '1rem', display: 'flex', gap: '0.75rem', alignItems: 'center', flexWrap: 'wrap' }}>
                  <input
                    type="search"
                    placeholder="Search by name or email…"
                    value={subscriberSearch}
                    onChange={e => setSubscriberSearch(e.target.value)}
                    style={{ minWidth: '240px', maxWidth: '400px', width: '100%' }}
                  />
                  <form method="post" action="/api/admin-subscribers/export" style={{ display: 'inline' }}>
                    <button type="submit" className="btn-admin-reset">Export CSV</button>
                  </form>
                </div>
                {filteredSubs.length === 0 ? (
                  <p className="admin-stats-note">No subscribers{subscriberSearch ? ' match your search' : ' yet'}.</p>
                ) : (
                  <div className="admin-visits-table-wrap">
                    <table className="admin-visits-table">
                      <thead>
                        <tr>
                          <th>Name</th>
                          <th>Email</th>
                          <th>Source</th>
                          <th>Subscribed</th>
                        </tr>
                      </thead>
                      <tbody>
                        {filteredSubs.map((sub, i) => (
                          <tr key={`${sub.email}-${i}`}>
                            <td>{sub.name}</td>
                            <td><a href={`mailto:${sub.email}`}>{sub.email}</a></td>
                            <td>{sub.source === 'download' ? 'Download' : 'Contact Form'}</td>
                            <td>{formatDate(sub.subscribedAt)}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </section>
            )
          })()}

          {/* HOMEPAGE */}
          {adminView === 'homepage' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Homepage</h2>
                <p>Controls the hero, share section, PRISM video block, and "Where to Next" navigation cards.</p>
              </div>

              {renderSectionJumpNav('homepage')}

              <div className="admin-panel-subhead" id="homepage-hero">
                <h3>Hero</h3>
                <p>Primary landing page headline, tag line, and hero call-to-action labels.</p>
              </div>
              {FIELDS.filter(f => f.section === 'hero').map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                    : <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />}
                </div>
              ))}

              <div className="admin-panel-subhead" id="homepage-share">
                <h3>Share Section</h3>
                <p>Controls the share block that points visitors toward the next step.</p>
              </div>
              {FIELDS.filter(f => f.section === 'share').map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                    : <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />}
                </div>
              ))}

              <div className="admin-panel-subhead" id="homepage-prism">
                <h3>PRISM Block</h3>
                <p>Video URL, intro text, pattern steps, and closing copy for the PRISM section.</p>
              </div>
              {FIELDS.filter(f => f.section === 'prism').map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                    : <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />}
                </div>
              ))}

              <div className="admin-panel-subhead" id="homepage-where-to-next-labels">
                <h3>Where to Next — Section Labels</h3>
              </div>
              <div className="admin-field">
                <label htmlFor="field-whereToNextEyebrow">Eyebrow</label>
                <input id="field-whereToNextEyebrow" type="text" value={form.whereToNextEyebrow ?? ''} onChange={e => setForm(f => ({ ...f, whereToNextEyebrow: e.target.value }))} />
              </div>
              <div className="admin-field">
                <label htmlFor="field-whereToNextHeading">Heading</label>
                <input id="field-whereToNextHeading" type="text" value={form.whereToNextHeading ?? ''} onChange={e => setForm(f => ({ ...f, whereToNextHeading: e.target.value }))} />
              </div>

              <div className="admin-panel-subhead" id="homepage-where-to-next-cards">
                <h3>Where to Next — Navigation Cards</h3>
                <p>Edit the title, description, and link path for each card.</p>
              </div>
              {(form.whereToNextCards ?? []).map((card, idx) => (
                <div key={card.id} className="admin-array-row">
                  <div className="admin-array-fields">
                    <div className="admin-field">
                      <label htmlFor={`wtn-title-${card.id}`}>Card {idx + 1} — Title</label>
                      <input id={`wtn-title-${card.id}`} type="text" value={card.title} onChange={e => setForm(f => ({ ...f, whereToNextCards: (f.whereToNextCards ?? []).map(c => c.id === card.id ? { ...c, title: e.target.value } : c) }))} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`wtn-desc-${card.id}`}>Card {idx + 1} — Description</label>
                      <input id={`wtn-desc-${card.id}`} type="text" value={card.description} onChange={e => setForm(f => ({ ...f, whereToNextCards: (f.whereToNextCards ?? []).map(c => c.id === card.id ? { ...c, description: e.target.value } : c) }))} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`wtn-path-${card.id}`}>Card {idx + 1} — Link Path</label>
                      <input id={`wtn-path-${card.id}`} type="text" value={card.path} onChange={e => setForm(f => ({ ...f, whereToNextCards: (f.whereToNextCards ?? []).map(c => c.id === card.id ? { ...c, path: e.target.value } : c) }))} />
                    </div>
                  </div>
                  <button type="button" className="btn-admin-remove" onClick={() => setForm(f => ({ ...f, whereToNextCards: (f.whereToNextCards ?? []).filter(c => c.id !== card.id) }))}>Remove</button>
                </div>
              ))}
              <button
                type="button"
                className="btn-admin-add"
                onClick={() => setForm(f => ({ ...f, whereToNextCards: [...(f.whereToNextCards ?? []), { id: Date.now().toString(36), title: '', description: '', path: '/' }] }))}
              >
                + Add Card
              </button>
              {renderSaveStatus()}
            </section>
          )}

          {/* START HERE */}
          {adminView === 'start-here' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Start Here Page</h2>
                <p>Edit the /start-here page — heading, intro, and the three step cards.</p>
              </div>

              {renderSectionJumpNav('start-here')}

              <div className="admin-panel-subhead" id="start-here-intro">
                <h3>Intro</h3>
                <p>Top-level heading and opening copy for the page.</p>
              </div>
              {FIELDS.filter(f => ['startHereHeading', 'startHereIntro'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                    : <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />}
                </div>
              ))}

              <div className="admin-panel-subhead" id="start-here-step-1">
                <h3>Step 1</h3>
              </div>
              {FIELDS.filter(f => ['startHereStep1Title', 'startHereStep1Body', 'startHereStep1Cta'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                    : <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />}
                </div>
              ))}

              <div className="admin-panel-subhead" id="start-here-step-2">
                <h3>Step 2</h3>
              </div>
              {FIELDS.filter(f => ['startHereStep2Title', 'startHereStep2Body', 'startHereStep2Cta'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                    : <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />}
                </div>
              ))}

              <div className="admin-panel-subhead" id="start-here-step-3">
                <h3>Step 3</h3>
              </div>
              {FIELDS.filter(f => ['startHereStep3Title', 'startHereStep3Body', 'startHereStep3Cta'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                    : <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />}
                </div>
              ))}
              {renderSaveStatus()}
            </section>
          )}

          {/* ABOUT */}
          {adminView === 'about' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>About</h2>
                <p>Manage the main show description, Nate bio, and about images.</p>
              </div>

              {renderSectionJumpNav('about')}

              <div className="admin-panel-subhead" id="about-show-copy">
                <h3>Show Copy</h3>
                <p>Top section content that explains the show and listening invitation.</p>
              </div>
              {FIELDS.filter(f => ['aboutShowHeading', 'aboutShowP1', 'aboutShowP2', 'aboutShowEyebrow', 'aboutListenBtnLabel'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline ? (
                    <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                  ) : (
                    <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                  )}
                </div>
              ))}

              <div className="admin-panel-subhead" id="about-nate-bio">
                <h3>Nate Bio</h3>
                <p>Profile eyebrow and biography copy for the About Nate block.</p>
              </div>
              {FIELDS.filter(f => ['aboutEyebrow', 'aboutNate'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline ? (
                    <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                  ) : (
                    <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                  )}
                </div>
              ))}

              <div className="admin-panel-subhead" id="about-images">
                <h3>Images</h3>
                <p>Portrait and scripture artwork used on the About page.</p>
              </div>
              {FIELDS.filter(f => ['aboutPhotoUrl', 'aboutVerseArtUrl'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline ? (
                    <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                  ) : (
                    <>
                      <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                      {(key.includes('ImageUrl') || key.includes('PhotoUrl') || key.includes('ArtUrl')) && renderImageAssetSelector(form[key] as string, value => handleChange(key, value), `field-${key}-asset`)}
                      {key === 'aboutPhotoUrl' && <p className="admin-field-note">This controls the portrait shown on the left side of the About page.</p>}
                      {key === 'aboutVerseArtUrl' && <p className="admin-field-note">This controls the scripture artwork shown under the “About the Show” text. It is separate from the Contact page image.</p>}
                      {key === 'aboutPhotoUrl' && renderImagePreview(form[key] as string, 'About page portrait preview')}
                      {key === 'aboutVerseArtUrl' && renderImagePreview(form[key] as string, 'About page scripture artwork preview')}
                    </>
                  )}
                </div>
              ))}
              {renderSaveStatus()}
            </section>
          )}

          {/* CONTACT */}
          {adminView === 'contact' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Contact</h2>
                <p>Manage the contact page profile image and contact copy.</p>
              </div>

              {renderSectionJumpNav('contact')}

              <div className="admin-panel-subhead" id="contact-profile">
                <h3>Profile</h3>
                <p>Name, role, headline, and image shown at the top of the contact page.</p>
              </div>
              {FIELDS.filter(f => ['contactPhotoUrl', 'contactEyebrow', 'contactHeading', 'contactName', 'contactRole'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline ? (
                    <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                  ) : (
                    <>
                      <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                      {(key.includes('ImageUrl') || key.includes('PhotoUrl')) && renderImageAssetSelector(form[key] as string, value => handleChange(key, value), `field-${key}-asset`)}
                      {(key.includes('ImageUrl') || key.includes('PhotoUrl')) && renderImagePreview(form[key] as string, `${label} preview`)}
                    </>
                  )}
                </div>
              ))}

              <div className="admin-panel-subhead" id="contact-intro">
                <h3>Intro Copy</h3>
                <p>Intro paragraph, quote, and main contact bullet points.</p>
              </div>
              {FIELDS.filter(f => ['contactQuote', 'contactIntro', 'contactPoint1', 'contactPoint2'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline ? (
                    <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                  ) : (
                    <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                  )}
                </div>
              ))}

              <div className="admin-panel-subhead" id="contact-scripture">
                <h3>Scripture</h3>
              </div>
              {FIELDS.filter(f => ['contactVerse', 'contactVerseRef'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline ? (
                    <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                  ) : (
                    <>
                      <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                      {(key.includes('ImageUrl') || key.includes('PhotoUrl')) && renderImageAssetSelector(form[key] as string, value => handleChange(key, value), `field-${key}-asset`)}
                      {(key.includes('ImageUrl') || key.includes('PhotoUrl')) && renderImagePreview(form[key] as string, `${label} preview`)}
                    </>
                  )}
                </div>
              ))}
              {renderSaveStatus()}
            </section>
          )}

          {/* PODCAST HUB */}
          {adminView === 'podcast' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Podcast Hub</h2>
                <p>Manage all podcast-related content from one place.</p>
              </div>
              <div className="admin-tabs admin-tabs--podcast">
                <button type="button" className={`admin-tab${podcastTab === 'current-series' ? ' admin-tab--active' : ''}`} onClick={() => setPodcastTab('current-series')}>Current Series</button>
                <button type="button" className={`admin-tab${podcastTab === 'episode-highlights' ? ' admin-tab--active' : ''}`} onClick={() => setPodcastTab('episode-highlights')}>Ep. Highlights</button>
                <button type="button" className={`admin-tab${podcastTab === 'podcast-checklist' ? ' admin-tab--active' : ''}`} onClick={() => setPodcastTab('podcast-checklist')}>Production Checklist</button>
                <button type="button" className={`admin-tab${podcastTab === 'archived-series' ? ' admin-tab--active' : ''}`} onClick={() => setPodcastTab('archived-series')}>Archived Series</button>
              </div>
            </section>
          )}

          {/* CURRENT SERIES */}
          {(adminView === 'current-series' || (adminView === 'podcast' && podcastTab === 'current-series')) && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Current Series</h2>
                <p>Update the active series card shown on the homepage and episodes page.</p>
              </div>
              {FIELDS.filter(f => f.section === 'series' && !['studyGuideTitle', 'studyGuideDescription', 'studyGuideUrl'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline ? (
                    <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={4} />
                  ) : (
                    <>
                      <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                      {(key.includes('ImageUrl') || key.includes('PhotoUrl')) && renderImageAssetSelector(form[key] as string, value => handleChange(key, value), `field-${key}-asset`)}
                      {(key.includes('ImageUrl') || key.includes('PhotoUrl')) && renderImagePreview(form[key] as string, `${label} preview`)}
                    </>
                  )}
                </div>
              ))}
              <p className="admin-stats-note">Companion study guide title, description, and Amazon link are now managed in Downloads.</p>
              {renderSaveStatus()}
            </section>
          )}

          {/* EPISODE HIGHLIGHTS */}
          {(adminView === 'episode-highlights' || (adminView === 'podcast' && podcastTab === 'episode-highlights')) && (
            <section className="admin-panel-section" aria-label="Episode highlights">
              <div className="admin-panel-head">
                <h2>Episode Highlights</h2>
                <p>Featured episodes shown on the Episodes page. Fill in discussion questions, show notes, or an embed URL and the highlight automatically gets its own detail page at <code>/episodes/[id]</code>.</p>
              </div>
              {(form.podcastFeaturedLinks ?? []).length === 0 && (
                <p className="admin-stats-note">No episode highlights yet. Add one below.</p>
              )}
              {(form.podcastFeaturedLinks ?? []).map(item => (
                <AdminCollapsibleCard
                  key={item.id}
                  title={item.title || 'Untitled episode highlight'}
                  subtitle={item.episodeNumber ? `Episode ${item.episodeNumber}` : 'No episode number yet'}
                >
                  <div className="admin-array-row">
                      <div className="admin-array-fields">
                        <div className="admin-field">
                          <label htmlFor={`podcast-ep-${item.id}`}>Episode Number</label>
                          <input id={`podcast-ep-${item.id}`} type="text" placeholder="e.g. 42" value={item.episodeNumber ?? ''} onChange={e => updatePodcastLink(item.id, 'episodeNumber', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`podcast-title-${item.id}`}>Title</label>
                          <input id={`podcast-title-${item.id}`} type="text" value={item.title} onChange={e => updatePodcastLink(item.id, 'title', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`podcast-summary-${item.id}`}>Summary</label>
                          <textarea id={`podcast-summary-${item.id}`} rows={2} value={item.summary} onChange={e => updatePodcastLink(item.id, 'summary', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`podcast-url-${item.id}`}>Platform URL (external link)</label>
                          <input id={`podcast-url-${item.id}`} type="text" placeholder="https://open.spotify.com/..." value={item.url} onChange={e => updatePodcastLink(item.id, 'url', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`podcast-embed-${item.id}`}>Embed URL (optional — enables in-page player)</label>
                          <input id={`podcast-embed-${item.id}`} type="text" placeholder="https://open.spotify.com/embed/episode/..." value={item.embedUrl ?? ''} onChange={e => updatePodcastLink(item.id, 'embedUrl', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`podcast-notes-${item.id}`}>Show Notes</label>
                          <textarea id={`podcast-notes-${item.id}`} rows={4} placeholder="Key points, scripture references, timestamps..." value={item.showNotes ?? ''} onChange={e => updatePodcastLink(item.id, 'showNotes', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`podcast-dq-${item.id}`}>Discussion Questions (one per line)</label>
                          <textarea id={`podcast-dq-${item.id}`} rows={5} placeholder="What stood out to you in this passage?" value={(item.discussionQuestions ?? []).join('\n')} onChange={e => updatePodcastLinkQuestions(item.id, e.target.value)} />
                        </div>
                      </div>
                      <button type="button" className="btn-admin-remove" onClick={() => removePodcastLink(item.id)}>Remove</button>
                    </div>
                </AdminCollapsibleCard>
              ))}
              <button type="button" className="btn-admin-add" onClick={addPodcastLink}>+ Add Episode Highlight</button>
              {renderSaveStatus()}
            </section>
          )}

          {/* PODCAST CHECKLIST */}
          {(adminView === 'podcast-checklist' || (adminView === 'podcast' && podcastTab === 'podcast-checklist')) && (
            <section className="admin-panel-section" aria-label="Podcast production checklist">
              <div className="admin-panel-head">
                <h2>Podcast Production Checklist</h2>
                <p>Track production progress for each episode. Add as many tasks and episodes as you need, then save.</p>
              </div>

              <div className="admin-content-summary">
                <article className="admin-summary-card">
                  <h3>Total Episodes</h3>
                  <p>{podcastChecklist.episodes.length}</p>
                </article>
                <article className="admin-summary-card">
                  <h3>Pre-Publish Tasks</h3>
                  <p>{checklistPreTasks.length}</p>
                </article>
                <article className="admin-summary-card">
                  <h3>Post-Publish Tasks</h3>
                  <p>{checklistPostTasks.length}</p>
                </article>
              </div>

              <AdminCollapsibleCard
                title="Task Template"
                subtitle={`${podcastChecklist.tasks.length} tasks configured`}
                className="admin-collapsible-card--group"
              >
                  <div className="admin-archive-subsection-actions" style={{ marginBottom: '0.75rem' }}>
                    <button type="button" className="btn-admin-add" onClick={() => addChecklistTask('pre')}>+ Add Pre-Publish Task</button>
                    <button type="button" className="btn-admin-add" onClick={() => addChecklistTask('post')}>+ Add Post-Publish Task</button>
                  </div>

                  {podcastChecklist.tasks.length === 0 && (
                    <p className="admin-stats-note">No tasks yet. Add a pre-publish or post-publish task above.</p>
                  )}

                  {checklistTasksSorted.map(task => (
                    <div key={task.id} className="admin-array-row admin-array-row--nested">
                      <div className="admin-array-fields" style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: '1fr minmax(11rem, 15rem)' }}>
                        <div className="admin-field">
                          <label htmlFor={`checklist-task-label-${task.id}`}>Task Name</label>
                          <input
                            id={`checklist-task-label-${task.id}`}
                            type="text"
                            value={task.label}
                            onChange={e => updateChecklistTask(task.id, 'label', e.target.value)}
                            placeholder="e.g. Upload transcript"
                          />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`checklist-task-phase-${task.id}`}>Phase</label>
                          <select
                            id={`checklist-task-phase-${task.id}`}
                            value={task.phase}
                            onChange={e => updateChecklistTask(task.id, 'phase', e.target.value)}
                          >
                            <option value="pre">Pre-Publish</option>
                            <option value="post">Post-Publish</option>
                          </select>
                        </div>
                      </div>
                      <button type="button" className="btn-admin-remove" onClick={() => removeChecklistTask(task.id)}>Remove</button>
                    </div>
                  ))}
              </AdminCollapsibleCard>

              <div className="admin-archive-subsection">
                <div className="admin-archive-subsection-head">
                  <h5>Episodes</h5>
                  <div className="admin-archive-subsection-actions">
                    <button type="button" className="btn-admin-add" onClick={addChecklistEpisode}>+ Add Episode</button>
                    <button type="button" className="btn-admin-save" onClick={handleSavePodcastChecklist} disabled={podcastChecklistStatus === 'saving'}>
                      {podcastChecklistStatus === 'saving' ? 'Saving Checklist…' : 'Save Checklist'}
                    </button>
                  </div>
                </div>

                {podcastChecklist.episodes.length === 0 && (
                  <p className="admin-stats-note">No episodes yet. Add one above to start tracking progress.</p>
                )}

                {checklistEpisodesSorted.map(episode => {
                  const doneCount = checklistTasksSorted.reduce((count, task) => count + (episode.tasks[task.id] ? 1 : 0), 0)
                  const totalCount = checklistTasksSorted.length
                  const nextTask = checklistTasksSorted.find(task => !episode.tasks[task.id])
                  const episodeLabelParts = [episode.series?.trim()]
                  if (episode.episodeNumber !== null) {
                    episodeLabelParts.push(String(episode.episodeNumber))
                  }
                  if (episode.title?.trim()) {
                    episodeLabelParts.push(episode.title.trim())
                  }
                  const episodeLabel = episodeLabelParts.filter(Boolean).join(' - ') || 'Untitled'

                  return (
                    <AdminCollapsibleCard
                      key={episode.id}
                      title={episodeLabel}
                      subtitle={totalCount > 0
                        ? `${doneCount}/${totalCount} tasks completed • Next: ${nextTask?.label ?? 'All done'}`
                        : 'No tasks assigned yet'}
                    >
                        <div className="admin-array-row admin-array-row--nested">
                          <div className="admin-array-fields" style={{ display: 'grid', gap: '0.75rem', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))' }}>
                            <div className="admin-field">
                              <label htmlFor={`checklist-series-${episode.id}`}>Series</label>
                              <input
                                id={`checklist-series-${episode.id}`}
                                type="text"
                                value={episode.series}
                                onChange={e => updateChecklistEpisode(episode.id, 'series', e.target.value)}
                                placeholder="Colossians"
                              />
                            </div>
                            <div className="admin-field">
                              <label htmlFor={`checklist-episode-number-${episode.id}`}>Episode Number</label>
                              <input
                                id={`checklist-episode-number-${episode.id}`}
                                type="number"
                                value={episode.episodeNumber ?? ''}
                                onChange={e => updateChecklistEpisode(episode.id, 'episodeNumber', e.target.value)}
                                min={0}
                              />
                            </div>
                            <div className="admin-field">
                              <label htmlFor={`checklist-title-${episode.id}`}>Title (optional)</label>
                              <input
                                id={`checklist-title-${episode.id}`}
                                type="text"
                                value={episode.title}
                                onChange={e => updateChecklistEpisode(episode.id, 'title', e.target.value)}
                                placeholder="Grace that Trains Us"
                              />
                            </div>
                            <div className="admin-field">
                              <label htmlFor={`checklist-date-${episode.id}`}>Date Published</label>
                              <input
                                id={`checklist-date-${episode.id}`}
                                type="date"
                                value={episode.datePublished}
                                onChange={e => updateChecklistEpisode(episode.id, 'datePublished', e.target.value)}
                              />
                            </div>
                          </div>
                        </div>

                        {checklistPreTasks.length > 0 && (
                          <div className="admin-archive-subsection">
                            <div className="admin-archive-subsection-head">
                              <h5>Pre-Publish Tasks</h5>
                            </div>
                            <div className="admin-array-fields">
                              {checklistPreTasks.map(task => (
                                <label key={task.id} style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
                                  <input
                                    type="checkbox"
                                    checked={episode.tasks[task.id] === true}
                                    onChange={() => toggleChecklistEpisodeTask(episode.id, task.id)}
                                  />
                                  <span>{task.label || 'Untitled task'}</span>
                                </label>
                              ))}
                            </div>
                          </div>
                        )}

                        {checklistPostTasks.length > 0 && (
                          <div className="admin-archive-subsection">
                            <div className="admin-archive-subsection-head">
                              <h5>Post-Publish Tasks</h5>
                            </div>
                            <div className="admin-array-fields">
                              {checklistPostTasks.map(task => (
                                <label key={task.id} style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
                                  <input
                                    type="checkbox"
                                    checked={episode.tasks[task.id] === true}
                                    onChange={() => toggleChecklistEpisodeTask(episode.id, task.id)}
                                  />
                                  <span>{task.label || 'Untitled task'}</span>
                                </label>
                              ))}
                            </div>
                          </div>
                        )}

                        <div style={{ display: 'flex', gap: '0.6rem', marginTop: '0.8rem' }}>
                          <button type="button" className="btn-admin-remove" onClick={() => resetChecklistEpisode(episode.id)}>Reset Progress</button>
                          <button type="button" className="btn-admin-remove" onClick={() => removeChecklistEpisode(episode.id)}>Remove Episode</button>
                        </div>
                    </AdminCollapsibleCard>
                  )
                })}
              </div>

              {renderPodcastChecklistStatus()}
            </section>
          )}

          {/* ARCHIVED SERIES */}
          {(adminView === 'archived-series' || (adminView === 'podcast' && podcastTab === 'archived-series')) && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Archived Series</h2>
                <p>Move finished studies here so users can still access old resources after you switch the current series.</p>
              </div>
              <div className="admin-archive-helper">
                <h3>Archive Current Series</h3>
                <p>Use this when you move from one study to the next. It creates a pre-filled archived entry from the current series, study guide, custom resource links, and custom content blocks.</p>
                <button type="button" className="btn-admin-add" onClick={archiveCurrentSeriesSnapshot}>+ Archive Current Series Snapshot</button>
              </div>
              {(form.archivedSeries ?? []).length === 0 && (
                <p className="admin-stats-note">No archived series yet.</p>
              )}
              {(form.archivedSeries ?? []).map(series => (
                <div key={series.id} className="admin-archive-card">
                  <div className="admin-archive-card-head">
                    <div>
                      <h4>{series.title || 'Untitled archived series'}</h4>
                      <p>{series.label || 'Archived Study'}</p>
                    </div>
                    <button type="button" className="btn-admin-remove" onClick={() => removeArchivedSeries(series.id)}>Remove Series</button>
                  </div>
                  <div className="admin-array-fields">
                    <div className="admin-field">
                      <label htmlFor={`archive-label-${series.id}`}>Label</label>
                      <input id={`archive-label-${series.id}`} type="text" value={series.label} placeholder="Archived Study" onChange={e => updateArchivedSeries(series.id, 'label', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`archive-title-${series.id}`}>Series Title</label>
                      <input id={`archive-title-${series.id}`} type="text" value={series.title} placeholder="Study of Titus: Sound Doctrine" onChange={e => updateArchivedSeries(series.id, 'title', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`archive-description-${series.id}`}>Description</label>
                      <textarea id={`archive-description-${series.id}`} value={series.description} rows={4} placeholder="Describe the archived study and why it still matters." onChange={e => updateArchivedSeries(series.id, 'description', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`archive-image-${series.id}`}>Cover Image URL</label>
                      <input id={`archive-image-${series.id}`} type="text" value={series.imageUrl} placeholder="/images/titus-cover.png" onChange={e => updateArchivedSeries(series.id, 'imageUrl', e.target.value)} />
                      {renderImageAssetSelector(series.imageUrl, value => updateArchivedSeries(series.id, 'imageUrl', value), `archive-image-${series.id}-asset`)}
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`archive-listen-${series.id}`}>Listen URL</label>
                      <input id={`archive-listen-${series.id}`} type="url" value={series.listenUrl} placeholder="https://..." onChange={e => updateArchivedSeries(series.id, 'listenUrl', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`archive-guide-title-${series.id}`}>Study Guide Title</label>
                      <input id={`archive-guide-title-${series.id}`} type="text" value={series.studyGuideTitle} placeholder="Companion Study Guide" onChange={e => updateArchivedSeries(series.id, 'studyGuideTitle', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`archive-guide-description-${series.id}`}>Study Guide Description</label>
                      <textarea id={`archive-guide-description-${series.id}`} value={series.studyGuideDescription} rows={3} placeholder="Describe the archived guide or workbook." onChange={e => updateArchivedSeries(series.id, 'studyGuideDescription', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`archive-guide-url-${series.id}`}>Study Guide URL</label>
                      <input id={`archive-guide-url-${series.id}`} type="url" value={series.studyGuideUrl} placeholder="https://..." onChange={e => updateArchivedSeries(series.id, 'studyGuideUrl', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label>Episode Range (for archive grouping on Episodes page)</label>
                      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
                        <input type="number" value={series.episodeRange?.from ?? ''} placeholder="First ep #" min={1} style={{ width: '7rem' }} onChange={e => { const from = parseInt(e.target.value, 10); updateArchivedSeries(series.id, 'episodeRange', { from: isNaN(from) ? 0 : from, to: series.episodeRange?.to ?? 0 }) }} />
                        <span style={{ color: 'var(--brand-gold)' }}>to</span>
                        <input type="number" value={series.episodeRange?.to ?? ''} placeholder="Last ep #" min={1} style={{ width: '7rem' }} onChange={e => { const to = parseInt(e.target.value, 10); updateArchivedSeries(series.id, 'episodeRange', { from: series.episodeRange?.from ?? 0, to: isNaN(to) ? 0 : to }) }} />
                      </div>
                      <p className="admin-stats-note" style={{ marginTop: '0.35rem' }}>Episodes in this range will be grouped under this series on the public Episodes page.</p>
                    </div>
                  </div>
                  <div className="admin-archive-subsection">
                    <div className="admin-archive-subsection-head">
                      <h5>Archived Resource Links</h5>
                      <div className="admin-archive-subsection-actions">
                        <select value={archiveLinkSelectionBySeries[series.id] ?? ''} onChange={e => setArchiveLinkSelectionBySeries(prev => ({ ...prev, [series.id]: e.target.value }))}>
                          <option value="">Pick existing custom link…</option>
                          {(form.customLinks ?? []).filter(link => link.url.trim().length > 0).map(link => (
                            <option key={`pick-${series.id}-${link.id}`} value={link.id}>{link.label || link.url}</option>
                          ))}
                        </select>
                        <button type="button" className="btn-admin-add" onClick={() => addExistingCustomLinkToArchivedSeries(series.id)} disabled={!archiveLinkSelectionBySeries[series.id]}>+ Add Picked Link</button>
                        <button type="button" className="btn-admin-add" onClick={() => addAllExistingCustomLinksToArchivedSeries(series.id)} disabled={(form.customLinks ?? []).filter(link => link.url.trim().length > 0).length === 0}>+ Add All Custom Links</button>
                        <button type="button" className="btn-admin-add" onClick={() => addArchivedSeriesLink(series.id)}>+ Add Blank Link</button>
                      </div>
                    </div>
                    {(series.resourceLinks ?? []).length === 0 && <p className="admin-stats-note">No archived resource links yet.</p>}
                    {(series.resourceLinks ?? []).map(link => (
                      <div key={link.id} className="admin-array-row admin-array-row--nested">
                        <div className="admin-array-fields">
                          <div className="admin-field">
                            <label htmlFor={`archive-link-label-${link.id}`}>Label</label>
                            <input id={`archive-link-label-${link.id}`} type="text" value={link.label} placeholder="Episode guide" onChange={e => updateArchivedSeriesLink(series.id, link.id, 'label', e.target.value)} />
                          </div>
                          <div className="admin-field">
                            <label htmlFor={`archive-link-url-${link.id}`}>URL</label>
                            <input id={`archive-link-url-${link.id}`} type="url" value={link.url} placeholder="https://..." onChange={e => updateArchivedSeriesLink(series.id, link.id, 'url', e.target.value)} />
                          </div>
                          <div className="admin-field">
                            <label htmlFor={`archive-link-amazon-url-${link.id}`}>Amazon URL (optional)</label>
                            <input id={`archive-link-amazon-url-${link.id}`} type="url" value={link.amazonUrl ?? ''} placeholder="https://amazon.com/..." onChange={e => updateArchivedSeriesLink(series.id, link.id, 'amazonUrl', e.target.value)} />
                          </div>
                          <div className="admin-field">
                            <label htmlFor={`archive-link-amazon-label-${link.id}`}>Amazon Button Label</label>
                            <input id={`archive-link-amazon-label-${link.id}`} type="text" value={link.amazonLabel ?? ''} placeholder="Get it on Amazon" onChange={e => updateArchivedSeriesLink(series.id, link.id, 'amazonLabel', e.target.value)} />
                          </div>
                        </div>
                        <button type="button" className="btn-admin-remove" onClick={() => removeArchivedSeriesLink(series.id, link.id)}>Remove</button>
                      </div>
                    ))}
                  </div>
                  <div className="admin-archive-subsection">
                    <div className="admin-archive-subsection-head">
                      <h5>Archived Notes / Blocks</h5>
                      <button type="button" className="btn-admin-add" onClick={() => addArchivedSeriesNote(series.id)}>+ Add Note Block</button>
                    </div>
                    {(series.notes ?? []).length === 0 && <p className="admin-stats-note">No archived note blocks yet.</p>}
                    {(series.notes ?? []).map(note => (
                      <div key={note.id} className="admin-array-row admin-array-row--nested">
                        <div className="admin-array-fields">
                          <div className="admin-field">
                            <label htmlFor={`archive-note-heading-${note.id}`}>Heading</label>
                            <input id={`archive-note-heading-${note.id}`} type="text" value={note.heading} placeholder="Titus overview" onChange={e => updateArchivedSeriesNote(series.id, note.id, 'heading', e.target.value)} />
                          </div>
                          <div className="admin-field">
                            <label htmlFor={`archive-note-body-${note.id}`}>Body</label>
                            <textarea id={`archive-note-body-${note.id}`} value={note.body} rows={3} placeholder="Add archived notes, explanation, or links context." onChange={e => updateArchivedSeriesNote(series.id, note.id, 'body', e.target.value)} />
                          </div>
                        </div>
                        <button type="button" className="btn-admin-remove" onClick={() => removeArchivedSeriesNote(series.id, note.id)}>Remove</button>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
              <button type="button" className="btn-admin-add" onClick={addArchivedSeries}>+ Add Archived Series</button>
              {renderSaveStatus()}
            </section>
          )}

          {/* DOWNLOADS */}
          {adminView === 'downloads' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Downloads</h2>
                <p>Manage the featured study guide, current download library, and previous series downloads.</p>
              </div>

              {renderSectionJumpNav('downloads')}

              <div className="admin-content-summary">
                <div className="admin-summary-card"><h3>Companion Study Guide</h3><p>Included</p></div>
                <div className="admin-summary-card"><h3>Current Downloads</h3><p>{resourceLinks.length}</p></div>
                <div className="admin-summary-card"><h3>Previous Study Downloads</h3><p>{archivedResourceCount}</p></div>
                <div className="admin-summary-card"><h3>Total Library Items</h3><p>{resourceLinks.length + archivedResourceCount}</p></div>
              </div>

              <div className="admin-section-header" id="downloads-study-guide">
                <h3>Companion Study Guide</h3>
                <p>This is the featured primary download at the top of the Downloads page.</p>
              </div>
              <div className="admin-array-row">
                <div className="admin-array-fields">
                  <div className="admin-field">
                    <label htmlFor="resources-study-guide-title">Title</label>
                    <input id="resources-study-guide-title" type="text" value={form.studyGuideTitle} placeholder="Companion Study Guide" onChange={e => handleChange('studyGuideTitle', e.target.value)} />
                  </div>
                  <div className="admin-field">
                    <label htmlFor="resources-study-guide-description">Description</label>
                    <textarea id="resources-study-guide-description" rows={3} value={form.studyGuideDescription} placeholder="Describe the study guide download." onChange={e => handleChange('studyGuideDescription', e.target.value)} />
                  </div>
                  <div className="admin-field">
                    <label htmlFor="resources-study-guide-download-url">Primary Download URL</label>
                    <input id="resources-study-guide-download-url" type="url" value={form.studyGuideDownloadUrl} placeholder="/uploads/new-guide.pdf or https://..." onChange={e => handleChange('studyGuideDownloadUrl', e.target.value)} />
                    {renderFileAssetSelector(form.studyGuideDownloadUrl, value => handleChange('studyGuideDownloadUrl', value), 'resources-study-guide-download-url-asset')}
                    <p className="admin-stats-note">This is the file URL the main guide download form will deliver after submission.</p>
                  </div>
                  <div className="admin-field">
                    <label htmlFor="resources-study-guide-url">Printed Copy URL (Amazon button)</label>
                    <input id="resources-study-guide-url" type="url" value={form.studyGuideUrl} placeholder="https://..." onChange={e => handleChange('studyGuideUrl', e.target.value)} />
                  </div>
                  <div className="admin-field">
                    <label htmlFor="resources-study-guide-amazon-label">Amazon Button Label</label>
                    <input id="resources-study-guide-amazon-label" type="text" value={form.studyGuideAmazonButtonLabel} placeholder="Get it on Amazon" onChange={e => handleChange('studyGuideAmazonButtonLabel', e.target.value)} />
                  </div>
                </div>
              </div>

              <div className="admin-section-header" id="downloads-library">
                <h3>Download Library</h3>
                <p>Manage the current downloads shown below the featured guide.</p>
              </div>
              {resourceLinks.length === 0 && <p className="admin-stats-note">No resources yet.</p>}
              {resourceLinks.map(link => (
                <AdminCollapsibleCard
                  key={link.id}
                  title={link.label || 'Untitled download'}
                  subtitle={link.description || 'Current download item'}
                >
                  <div className="admin-array-row">
                      <div className="admin-array-fields">
                        <div className="admin-field">
                          <label htmlFor={`resource-label-${link.id}`}>Label</label>
                          <input id={`resource-label-${link.id}`} type="text" value={link.label} placeholder="Resource title" onChange={e => updateLink(link.id, 'label', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`resource-url-${link.id}`}>URL</label>
                          <input id={`resource-url-${link.id}`} type="url" value={link.url} placeholder="https://..." onChange={e => updateLink(link.id, 'url', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`resource-description-${link.id}`}>Description</label>
                          <textarea id={`resource-description-${link.id}`} rows={3} value={link.description ?? ''} placeholder="Description shown on the download page" onChange={e => updateLink(link.id, 'description', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`resource-amazon-url-${link.id}`}>Amazon URL (optional)</label>
                          <input id={`resource-amazon-url-${link.id}`} type="url" value={link.amazonUrl ?? ''} placeholder="https://amazon.com/..." onChange={e => updateLink(link.id, 'amazonUrl', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`resource-amazon-label-${link.id}`}>Amazon Button Label</label>
                          <input id={`resource-amazon-label-${link.id}`} type="text" value={link.amazonLabel ?? ''} placeholder="Get it on Amazon" onChange={e => updateLink(link.id, 'amazonLabel', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`resource-image-${link.id}`}>Image URL</label>
                          <input id={`resource-image-${link.id}`} type="text" value={link.imageUrl ?? ''} placeholder="/uploads/example.png" onChange={e => updateLink(link.id, 'imageUrl', e.target.value)} />
                          {renderImageAssetSelector(link.imageUrl, value => updateLink(link.id, 'imageUrl', value), `resource-image-${link.id}-asset`)}
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`resource-tags-${link.id}`}>Tags</label>
                          <input id={`resource-tags-${link.id}`} type="text" value={(link.tags ?? []).join(', ')} placeholder="sermon, bible study, faith" onChange={e => updateLink(link.id, 'tags', e.target.value.split(',').map(tag => tag.trim()).filter(Boolean))} />
                        </div>
                      </div>
                      <button type="button" className="btn-admin-remove" onClick={() => removeLink(link.id)}>Remove</button>
                    </div>
                </AdminCollapsibleCard>
              ))}
              <button type="button" className="btn-admin-add" onClick={addResource}>+ Add Download</button>

              <div className="admin-section-header" id="downloads-previous-studies">
                <h3>Previous Study Downloads</h3>
                <p>These downloads appear in the Previous Studies area of the download library.</p>
              </div>
              {(form.archivedSeries ?? []).length === 0 && (
                <p className="admin-stats-note">No archived series yet. Add one in Archived Series, then manage its downloads here.</p>
              )}
              {(form.archivedSeries ?? []).map(series => (
                <AdminCollapsibleCard
                  key={series.id}
                  title={series.title || 'Untitled archived series'}
                  subtitle={`${(series.resourceLinks ?? []).length} download${(series.resourceLinks ?? []).length === 1 ? '' : 's'}`}
                  hint="Expand to manage"
                  className="admin-collapsible-card--group"
                >
                    <div className="admin-archive-subsection">
                      <div className="admin-archive-subsection-head">
                        <h5>{series.title || 'Untitled archived series'}</h5>
                        <button type="button" className="btn-admin-add" onClick={() => addArchivedSeriesLink(series.id)}>+ Add Link</button>
                      </div>
                      {(series.resourceLinks ?? []).length === 0 && <p className="admin-stats-note">No archived resource links yet.</p>}
                      {(series.resourceLinks ?? []).map(link => (
                        <AdminCollapsibleCard
                          key={link.id}
                          title={link.label || 'Untitled archived download'}
                          subtitle={link.description || 'Previous study download'}
                          className="admin-collapsible-card--nested"
                        >
                          <div className="admin-array-row admin-array-row--nested">
                              <div className="admin-array-fields">
                                <div className="admin-field">
                                  <label htmlFor={`resources-archive-link-label-${link.id}`}>Label</label>
                                  <input id={`resources-archive-link-label-${link.id}`} type="text" value={link.label} placeholder="Episode guide" onChange={e => updateArchivedSeriesLink(series.id, link.id, 'label', e.target.value)} />
                                </div>
                                <div className="admin-field">
                                  <label htmlFor={`resources-archive-link-url-${link.id}`}>URL</label>
                                  <input id={`resources-archive-link-url-${link.id}`} type="url" value={link.url} placeholder="https://..." onChange={e => updateArchivedSeriesLink(series.id, link.id, 'url', e.target.value)} />
                                </div>
                                <div className="admin-field">
                                  <label htmlFor={`resources-archive-link-description-${link.id}`}>Description</label>
                                  <textarea id={`resources-archive-link-description-${link.id}`} rows={3} value={link.description ?? ''} placeholder="Description shown on the download page" onChange={e => updateArchivedSeriesLink(series.id, link.id, 'description', e.target.value)} />
                                </div>
                                <div className="admin-field">
                                  <label htmlFor={`resources-archive-link-amazon-url-${link.id}`}>Amazon URL (optional)</label>
                                  <input id={`resources-archive-link-amazon-url-${link.id}`} type="url" value={link.amazonUrl ?? ''} placeholder="https://amazon.com/..." onChange={e => updateArchivedSeriesLink(series.id, link.id, 'amazonUrl', e.target.value)} />
                                </div>
                                <div className="admin-field">
                                  <label htmlFor={`resources-archive-link-amazon-label-${link.id}`}>Amazon Button Label</label>
                                  <input id={`resources-archive-link-amazon-label-${link.id}`} type="text" value={link.amazonLabel ?? ''} placeholder="Get it on Amazon" onChange={e => updateArchivedSeriesLink(series.id, link.id, 'amazonLabel', e.target.value)} />
                                </div>
                              </div>
                              <button type="button" className="btn-admin-remove" onClick={() => removeArchivedSeriesLink(series.id, link.id)}>Remove</button>
                            </div>
                        </AdminCollapsibleCard>
                      ))}
                    </div>
                </AdminCollapsibleCard>
              ))}
              {renderSaveStatus()}
            </section>
          )}

          {/* CUSTOM LINKS */}
          {adminView === 'custom-links' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Custom Links</h2>
                <p>Add links to show in platform buttons, footer navigation, or the More Resources download library.</p>
              </div>

              <div className="admin-panel-subhead">
                <h3>Homepage External Links</h3>
                <p>Links shown on the homepage, separate from the footer.</p>
              </div>
              {(form.customLinks ?? []).filter(link => link.placement === 'externalSites').length === 0 && (
                <p className="admin-stats-note">No homepage external links yet.</p>
              )}
              {(form.customLinks ?? []).filter(link => link.placement === 'externalSites').map(link => (
                <div key={link.id} className="admin-array-row">
                  <div className="admin-array-fields">
                    <div className="admin-field">
                      <label htmlFor={`external-site-link-label-${link.id}`}>Label</label>
                      <input id={`external-site-link-label-${link.id}`} type="text" value={link.label} placeholder="e.g. Bible study partner" onChange={e => updateLink(link.id, 'label', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`external-site-link-url-${link.id}`}>URL</label>
                      <input id={`external-site-link-url-${link.id}`} type="url" value={link.url} placeholder="https://..." onChange={e => updateLink(link.id, 'url', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`external-site-link-description-${link.id}`}>Description</label>
                      <textarea id={`external-site-link-description-${link.id}`} rows={3} value={link.description ?? ''} placeholder="Short description shown on the homepage" onChange={e => updateLink(link.id, 'description', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`external-site-link-image-${link.id}`}>Image URL</label>
                      <input id={`external-site-link-image-${link.id}`} type="text" value={link.imageUrl ?? ''} placeholder="/uploads/example.png" onChange={e => updateLink(link.id, 'imageUrl', e.target.value)} />
                      {renderImageAssetSelector(link.imageUrl, value => updateLink(link.id, 'imageUrl', value), `external-site-link-image-${link.id}-asset`)}
                      {renderImagePreview(link.imageUrl, `${link.label || 'External site link'} image preview`)}
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`external-site-link-tags-${link.id}`}>Tags</label>
                      <input id={`external-site-link-tags-${link.id}`} type="text" value={(link.tags ?? []).join(', ')} placeholder="external, homepage, ministry" onChange={e => updateLink(link.id, 'tags', e.target.value.split(',').map(tag => tag.trim()).filter(Boolean))} />
                    </div>
                    <div className="admin-field">
                      <label>Quick Action</label>
                      <button type="button" className="btn-admin-apply" onClick={() => updateLink(link.id, 'placement', 'footer')}>Move to Footer Nav</button>
                    </div>
                    <div className="admin-field">
                      <label>Shows On</label>
                      <p className="admin-stats-note">{getCustomLinkPlacementLabel(link.placement)}</p>
                      <a href={getCustomLinkPreviewPath(link.placement)} target="_blank" rel="noopener noreferrer" className="btn-admin-secondary">Preview Destination Page</a>
                    </div>
                  </div>
                  <button type="button" className="btn-admin-remove" onClick={() => removeLink(link.id)}>Remove</button>
                </div>
              ))}
              <button type="button" className="btn-admin-add" onClick={addExternalSiteLink}>+ Add Homepage External Link</button>

              <div className="admin-panel-subhead">
                <h3>Platform + Footer Links</h3>
                <p>Links that appear on the listen buttons row or footer nav.</p>
              </div>
              {(form.customLinks ?? []).filter(link => link.placement !== 'resources' && link.placement !== 'otherSites' && link.placement !== 'externalSites').length === 0 && (
                <p className="admin-stats-note">No custom links yet.</p>
              )}
              {(form.customLinks ?? []).filter(link => link.placement !== 'resources' && link.placement !== 'otherSites' && link.placement !== 'externalSites').map(link => (
                <div key={link.id} className="admin-array-row">
                  <div className="admin-array-fields">
                    <div className="admin-field">
                      <label htmlFor={`link-label-${link.id}`}>Label</label>
                      <input id={`link-label-${link.id}`} type="text" value={link.label} placeholder="e.g. iHeart Radio" onChange={e => updateLink(link.id, 'label', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`link-url-${link.id}`}>URL</label>
                      <input id={`link-url-${link.id}`} type="url" value={link.url} placeholder="https://..." onChange={e => updateLink(link.id, 'url', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`link-image-${link.id}`}>Image URL</label>
                      <input id={`link-image-${link.id}`} type="text" value={link.imageUrl ?? ''} placeholder="/uploads/example.png" onChange={e => updateLink(link.id, 'imageUrl', e.target.value)} />
                      {renderImageAssetSelector(link.imageUrl, value => updateLink(link.id, 'imageUrl', value), `link-image-${link.id}-asset`)}
                      {renderImagePreview(link.imageUrl, `${link.label || 'Custom link'} image preview`)}
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`link-tags-${link.id}`}>Tags</label>
                      <input id={`link-tags-${link.id}`} type="text" value={(link.tags ?? []).join(', ')} placeholder="listen, podcast, study" onChange={e => updateLink(link.id, 'tags', e.target.value.split(',').map(tag => tag.trim()).filter(Boolean))} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`link-placement-${link.id}`}>Show in</label>
                      <select id={`link-placement-${link.id}`} value={link.placement} onChange={e => updateLink(link.id, 'placement', e.target.value)}>
                        <option value="platforms">Platform Buttons (Listen section)</option>
                        <option value="footer">Footer Nav</option>
                        <option value="resources">More Resources Section</option>
                      </select>
                    </div>
                    <div className="admin-field">
                      <label>Quick Action</label>
                      <button type="button" className="btn-admin-apply" onClick={() => moveLinkToResources(link.id)}>Move to Resources</button>
                    </div>
                    <div className="admin-field">
                      <label>Shows On</label>
                      <p className="admin-stats-note">{getCustomLinkPlacementLabel(link.placement)}</p>
                      <a href={getCustomLinkPreviewPath(link.placement)} target="_blank" rel="noopener noreferrer" className="btn-admin-secondary">Preview Destination Page</a>
                    </div>
                  </div>
                  <button type="button" className="btn-admin-remove" onClick={() => removeLink(link.id)}>Remove</button>
                </div>
              ))}
              <button type="button" className="btn-admin-add" onClick={addLink}>+ Add Platform/Footer Link</button>

              <div className="admin-panel-subhead">
                <h3>Other Site Links</h3>
                <p>External links you want to surface in the footer dropdown.</p>
              </div>
              {(form.customLinks ?? []).filter(link => link.placement === 'otherSites').length === 0 && (
                <p className="admin-stats-note">No other site links yet.</p>
              )}
              {(form.customLinks ?? []).filter(link => link.placement === 'otherSites').map(link => (
                <div key={link.id} className="admin-array-row">
                  <div className="admin-array-fields">
                    <div className="admin-field">
                      <label htmlFor={`other-site-link-label-${link.id}`}>Label</label>
                      <input id={`other-site-link-label-${link.id}`} type="text" value={link.label} placeholder="e.g. Recommended ministry" onChange={e => updateLink(link.id, 'label', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`other-site-link-url-${link.id}`}>URL</label>
                      <input id={`other-site-link-url-${link.id}`} type="url" value={link.url} placeholder="https://..." onChange={e => updateLink(link.id, 'url', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`other-site-link-image-${link.id}`}>Image URL</label>
                      <input id={`other-site-link-image-${link.id}`} type="text" value={link.imageUrl ?? ''} placeholder="/uploads/example.png" onChange={e => updateLink(link.id, 'imageUrl', e.target.value)} />
                      {renderImageAssetSelector(link.imageUrl, value => updateLink(link.id, 'imageUrl', value), `other-site-link-image-${link.id}-asset`)}
                      {renderImagePreview(link.imageUrl, `${link.label || 'Other site link'} image preview`)}
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`other-site-link-tags-${link.id}`}>Tags</label>
                      <input id={`other-site-link-tags-${link.id}`} type="text" value={(link.tags ?? []).join(', ')} placeholder="external, ministry, study" onChange={e => updateLink(link.id, 'tags', e.target.value.split(',').map(tag => tag.trim()).filter(Boolean))} />
                    </div>
                    <div className="admin-field">
                      <label>Quick Action</label>
                      <button type="button" className="btn-admin-apply" onClick={() => updateLink(link.id, 'placement', 'footer')}>Move to Footer Nav</button>
                    </div>
                    <div className="admin-field">
                      <label>Shows On</label>
                      <p className="admin-stats-note">{getCustomLinkPlacementLabel(link.placement)}</p>
                      <a href={getCustomLinkPreviewPath(link.placement)} target="_blank" rel="noopener noreferrer" className="btn-admin-secondary">Preview Destination Page</a>
                    </div>
                  </div>
                  <button type="button" className="btn-admin-remove" onClick={() => removeLink(link.id)}>Remove</button>
                </div>
              ))}
              <button type="button" className="btn-admin-add" onClick={addOtherSiteLink}>+ Add Other Site Link</button>

              <div className="admin-panel-subhead">
                <h3>More Resources Links</h3>
                <p>These create cards in Downloads → More guides, worksheets, and past study downloads.</p>
              </div>
              {(form.customLinks ?? []).filter(link => link.placement === 'resources').length === 0 && (
                <p className="admin-stats-note">No resource links yet.</p>
              )}
              {(form.customLinks ?? []).filter(link => link.placement === 'resources').map(link => (
                <div key={link.id} className="admin-array-row">
                  <div className="admin-array-fields">
                    <div className="admin-field">
                      <label htmlFor={`resources-link-label-${link.id}`}>Label</label>
                      <input id={`resources-link-label-${link.id}`} type="text" value={link.label} placeholder="Resource title" onChange={e => updateLink(link.id, 'label', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`resources-link-url-${link.id}`}>Download URL</label>
                      <input id={`resources-link-url-${link.id}`} type="url" value={link.url} placeholder="https://..." onChange={e => updateLink(link.id, 'url', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`resources-link-description-${link.id}`}>Description</label>
                      <textarea id={`resources-link-description-${link.id}`} rows={3} value={link.description ?? ''} placeholder="Description shown on the download page" onChange={e => updateLink(link.id, 'description', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`resources-link-image-${link.id}`}>Image URL</label>
                      <input id={`resources-link-image-${link.id}`} type="text" value={link.imageUrl ?? ''} placeholder="/uploads/example.png" onChange={e => updateLink(link.id, 'imageUrl', e.target.value)} />
                      {renderImageAssetSelector(link.imageUrl, value => updateLink(link.id, 'imageUrl', value), `resources-link-image-${link.id}-asset`)}
                      {renderImagePreview(link.imageUrl, `${link.label || 'Resource link'} image preview`)}
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`resources-link-amazon-url-${link.id}`}>Amazon URL (optional)</label>
                      <input id={`resources-link-amazon-url-${link.id}`} type="url" value={link.amazonUrl ?? ''} placeholder="https://amazon.com/..." onChange={e => updateLink(link.id, 'amazonUrl', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`resources-link-amazon-label-${link.id}`}>Amazon Button Label</label>
                      <input id={`resources-link-amazon-label-${link.id}`} type="text" value={link.amazonLabel ?? ''} placeholder="Get it on Amazon" onChange={e => updateLink(link.id, 'amazonLabel', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`resources-link-tags-${link.id}`}>Tags</label>
                      <input id={`resources-link-tags-${link.id}`} type="text" value={(link.tags ?? []).join(', ')} placeholder="worksheet, study, pdf" onChange={e => updateLink(link.id, 'tags', e.target.value.split(',').map(tag => tag.trim()).filter(Boolean))} />
                    </div>
                    <div className="admin-field">
                      <label>Quick Action</label>
                      <button type="button" className="btn-admin-apply" onClick={() => updateLink(link.id, 'placement', 'platforms')}>Move to Platform Buttons</button>
                    </div>
                    <div className="admin-field">
                      <label>Shows On</label>
                      <p className="admin-stats-note">{getCustomLinkPlacementLabel(link.placement)}</p>
                      <a href={getCustomLinkPreviewPath(link.placement)} target="_blank" rel="noopener noreferrer" className="btn-admin-secondary">Preview Destination Page</a>
                    </div>
                  </div>
                  <button type="button" className="btn-admin-remove" onClick={() => removeLink(link.id)}>Remove</button>
                </div>
              ))}
              <button type="button" className="btn-admin-add" onClick={addResource}>+ Add Resource Link</button>
              {renderSaveStatus()}
            </section>
          )}

          {/* CONTENT BLOCKS */}
          {adminView === 'content-blocks' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Content Blocks</h2>
                <p>Add extra text sections to any page. Choose which page each block appears on.</p>
              </div>
              {(form.customBlocks ?? []).length === 0 && <p className="admin-stats-note">No custom content blocks yet.</p>}
              {(form.customBlocks ?? []).map(block => (
                <div key={block.id} className="admin-array-row">
                  <div className="admin-array-fields">
                    <div className="admin-field">
                      <label htmlFor={`block-page-${block.id}`}>Page</label>
                      <select id={`block-page-${block.id}`} value={block.page ?? 'downloads'} onChange={e => updateBlock(block.id, 'page', e.target.value)}>
                        <option value="homepage">Homepage</option>
                        <option value="start-here">Start Here</option>
                        <option value="episodes">Episodes</option>
                        <option value="downloads">Downloads</option>
                        <option value="about">About</option>
                        <option value="contact">Contact</option>
                        <option value="questions">Q&amp;A</option>
                      </select>
                      <p className="admin-stats-note">Shows on: {getContentBlockPageLabel(block.page ?? 'downloads')}</p>
                      <a href={getContentBlockPreviewPath(block.page ?? 'downloads')} target="_blank" rel="noopener noreferrer" className="btn-admin-secondary">Preview Destination Page</a>
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`block-heading-${block.id}`}>Heading</label>
                      <input id={`block-heading-${block.id}`} type="text" value={block.heading} placeholder="Section heading" onChange={e => updateBlock(block.id, 'heading', e.target.value)} />
                    </div>
                    <div className="admin-field">
                      <label htmlFor={`block-body-${block.id}`}>Body Text</label>
                      <textarea id={`block-body-${block.id}`} value={block.body} rows={3} placeholder="Write your content here…" onChange={e => updateBlock(block.id, 'body', e.target.value)} />
                    </div>
                  </div>
                  <button type="button" className="btn-admin-remove" onClick={() => removeBlock(block.id)}>Remove</button>
                </div>
              ))}
              <button type="button" className="btn-admin-add" onClick={addBlock}>+ Add Content Block</button>
              {renderSaveStatus()}
            </section>
          )}

          {/* STUDIES */}
          {adminView === 'colossians-study' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Studies</h2>
                <p>Manage multiple study tracks and their lesson sections (text, commentary, Greek notes, audio, and questions).</p>
              </div>

              {(form.studies ?? []).length === 0 && <p className="admin-stats-note">No studies yet.</p>}

              {(form.studies ?? []).map(study => (
                <AdminCollapsibleCard
                  key={study.id}
                  title={`${study.title || 'Untitled study'} · /study/${study.slug || 'slug'}`}
                  subtitle={study.description || 'Study description'}
                  open={false}
                >
                    <div className="admin-array-row" style={{ marginBottom: '1rem' }}>
                      <div className="admin-array-fields">
                        <div className="admin-field">
                          <label htmlFor={`study-title-${study.id}`}>Study Title</label>
                          <input id={`study-title-${study.id}`} type="text" value={study.title} placeholder="Colossians: Rooted in Christ" onChange={e => updateStudyProgram(study.id, 'title', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`study-slug-${study.id}`}>Slug</label>
                          <input id={`study-slug-${study.id}`} type="text" value={study.slug} placeholder="colossians" onChange={e => updateStudyProgram(study.id, 'slug', e.target.value.trim().toLowerCase().replace(/[^a-z0-9-]/g, '-'))} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`study-status-${study.id}`}>Status</label>
                          <select id={`study-status-${study.id}`} value={study.status} onChange={e => updateStudyProgram(study.id, 'status', e.target.value)}>
                            <option value="active">Active</option>
                            <option value="planned">Planned</option>
                          </select>
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`study-description-${study.id}`}>Description</label>
                          <textarea id={`study-description-${study.id}`} rows={3} value={study.description} placeholder="Brief description for the study hub card" onChange={e => updateStudyProgram(study.id, 'description', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`study-home-eyebrow-${study.id}`}>Homepage Card Eyebrow</label>
                          <input id={`study-home-eyebrow-${study.id}`} type="text" value={study.homepageEyebrow ?? ''} placeholder="New Study" onChange={e => updateStudyProgram(study.id, 'homepageEyebrow', e.target.value)} />
                        </div>
                        <div className="admin-field">
                          <label htmlFor={`study-new-tag-label-${study.id}`}>NEW Tag Label</label>
                          <input id={`study-new-tag-label-${study.id}`} type="text" value={study.newTagLabel ?? 'NEW'} placeholder="NEW" onChange={e => updateStudyProgram(study.id, 'newTagLabel', e.target.value)} />
                        </div>
                        <div className="admin-field" style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
                          <input id={`study-home-feature-${study.id}`} type="checkbox" checked={study.showOnHomepage === true} onChange={e => updateStudyProgram(study.id, 'showOnHomepage', e.target.checked)} />
                          <label htmlFor={`study-home-feature-${study.id}`}>Feature this study card on homepage</label>
                        </div>
                        <div className="admin-field" style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
                          <input id={`study-show-new-tag-${study.id}`} type="checkbox" checked={study.showNewTag === true} onChange={e => updateStudyProgram(study.id, 'showNewTag', e.target.checked)} />
                          <label htmlFor={`study-show-new-tag-${study.id}`}>Show NEW tag on homepage card</label>
                        </div>
                      </div>
                      <div className="admin-field">
                        <label htmlFor={`study-chapters-${study.id}`}>Number of Chapters</label>
                        <input id={`study-chapters-${study.id}`} type="number" min="1" max="999" value={study.numberOfChapters} placeholder="4" onChange={e => updateStudyProgram(study.id, "numberOfChapters", Number(e.target.value) || 1)} />
                      </div>
                      <button type="button" className="btn-admin-remove" onClick={() => removeStudyProgram(study.id)}>Remove Study</button>
                    </div>

                    {(study.sections ?? []).length === 0 && (
                      <p className="admin-stats-note">No sections yet for this study.</p>
                    )}

                    <DndContext
                      sensors={dragSensors}
                      collisionDetection={closestCenter}
                      onDragEnd={({ active, over }) => {
                        const overId = over?.id
                        if (!overId || active.id === overId) return
                        setForm(f => {
                          const studies = f.studies.map(s => {
                            if (s.id !== study.id) return s
                            const oldIndex = s.sections.findIndex(sec => sec.id === active.id)
                            const newIndex = s.sections.findIndex(sec => sec.id === overId)
                            if (oldIndex === -1 || newIndex === -1) return s
                            const newSections = arrayMove(s.sections, oldIndex, newIndex)
                            return { ...s, sections: newSections }
                          })
                          return { ...f, studies }
                        })
                      }}
                    >
                      <SortableContext
                        items={(study.sections ?? []).map(section => section.id)}
                        strategy={verticalListSortingStrategy}
                      >
                        {(study.sections ?? []).map(section => (
                          <SortableLessonSection
                            key={section.id}
                            section={section}
                            study={study}
                            updateStudySection={updateStudySection}
                            removeStudySection={removeStudySection}
                          />
                        ))}
                      </SortableContext>
                    </DndContext>


                    <button type="button" className="btn-admin-add" onClick={() => addStudySection(study.id)}>+ Add Lesson Section</button>
                </AdminCollapsibleCard>
              ))}

              <button type="button" className="btn-admin-add" onClick={addStudyProgram}>+ Add Study Program</button>
              {renderSaveStatus()}
            </section>
          )}

          {/* GLOBAL / FOOTER & PLATFORM */}
          {adminView === 'global' && (
            <section className="admin-panel-section">
              <div className="admin-panel-head">
                <h2>Footer &amp; Global Settings</h2>
                <p>Edit the site footer text, platform links, header label, and analytics cookie banner.</p>
              </div>

              {renderSectionJumpNav('global')}

              <div className="admin-panel-subhead" id="global-footer"><h3>Footer</h3></div>
              {FIELDS.filter(f => f.section === 'global' && ['footerTitle','footerSubtitle','footerEmail','footerCopyright','footerPrivacyNote'].includes(f.key)).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={3} />
                    : (
                      <>
                        <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                        {key.includes('ImageUrl') && renderImageAssetSelector(form[key] as string, value => handleChange(key, value), `field-${key}-asset`)}
                        {key.includes('ImageUrl') && renderImagePreview(form[key] as string, `${label} preview`)}
                      </>
                    )}
                </div>
              ))}

              <div className="admin-panel-subhead" id="global-header"><h3>Header</h3></div>
              {FIELDS.filter(f => f.section === 'global' && f.key === 'headerFollowLabel').map(({ key, label }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                </div>
              ))}

              <div className="admin-panel-subhead" id="global-platforms"><h3>Platform URLs</h3></div>
              {FIELDS.filter(f => f.section === 'global' && f.key.startsWith('platform')).map(({ key, label }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />
                </div>
              ))}

              <div className="admin-panel-subhead" id="global-banner"><h3>Analytics Banner</h3></div>
              {FIELDS.filter(f => f.section === 'global' && f.key === 'cookieBannerText').map(({ key, label }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={3} />
                </div>
              ))}

              <div className="admin-panel-subhead" id="global-welcome-email"><h3>Welcome Email</h3></div>
              {FIELDS.filter(f => f.section === 'global' && f.key.startsWith('welcomeEmail')).map(({ key, label, multiline }) => (
                <div className="admin-field" key={key}>
                  <label htmlFor={`field-${key}`}>{label}</label>
                  {multiline
                    ? <textarea id={`field-${key}`} value={form[key] as string} onChange={e => handleChange(key, e.target.value)} rows={3} />
                    : <input id={`field-${key}`} type="text" value={form[key] as string} onChange={e => handleChange(key, e.target.value)} />}
                </div>
              ))}

              {renderSaveStatus()}
            </section>
          )}

          {/* EMAIL TEMPLATES */}
          {adminView === 'email-templates' && (
            <EmailTemplatesPanel form={form} handleChange={handleChange} renderSaveStatus={renderSaveStatus} />
          )}

          {/* QUESTIONS */}
          {adminView === 'questions' && (
            <section className="admin-panel-section" aria-label="Q&A Management">
              <div className="admin-panel-head">
                <h2>Bible Questions &amp; Answers</h2>
                <p>Manage submitted questions, add manual questions, provide answers, and approve for public display.</p>
              </div>

              <div className="admin-actions admin-actions--maintenance" style={{ alignItems: 'center' }}>
                <input
                  type="text"
                  value={questionSearch}
                  onChange={e => setQuestionSearch(e.target.value)}
                  placeholder="Search by name, question, or answer..."
                  style={{ minWidth: '320px', maxWidth: '520px', width: '100%' }}
                />
                <button type="button" className={`btn-admin-reset${questionFilter === 'all' ? ' btn-admin-reset--active' : ''}`} onClick={() => setQuestionFilter('all')}>All</button>
                <button type="button" className={`btn-admin-reset${questionFilter === 'pending' ? ' btn-admin-reset--active' : ''}`} onClick={() => setQuestionFilter('pending')}>Pending</button>
                <button type="button" className={`btn-admin-reset${questionFilter === 'approved' ? ' btn-admin-reset--active' : ''}`} onClick={() => setQuestionFilter('approved')}>Approved</button>
                <button type="button" className={`btn-admin-reset${questionFilter === 'answered' ? ' btn-admin-reset--active' : ''}`} onClick={() => setQuestionFilter('answered')}>Answered</button>
                <button type="button" className={`btn-admin-reset${questionFilter === 'unanswered' ? ' btn-admin-reset--active' : ''}`} onClick={() => setQuestionFilter('unanswered')}>Unanswered</button>
              </div>
              <p className="admin-stats-note">Showing {filteredAdminQuestions.length} of {questions.length} questions.</p>

              {selectedQuestionIds.size > 0 && (
                <div className="admin-bulk-toolbar">
                  <span>{selectedQuestionIds.size} selected</span>
                  <button type="button" className="btn-admin-remove" onClick={handleBulkDeleteQuestions}>Delete Selected</button>
                  <button type="button" className="btn-admin-reset" onClick={() => setSelectedQuestionIds(new Set())}>Deselect All</button>
                </div>
              )}

              <div className="admin-visits-table-wrap">
                <h3>Add Question Manually</h3>
                <div className="admin-array-row">
                  <div className="admin-array-fields">
                    <div className="admin-field">
                      <label htmlFor="manual-question-first-name">First Name</label>
                      <input
                        id="manual-question-first-name"
                        type="text"
                        value={manualQuestion.firstName}
                        onChange={e => setManualQuestion(curr => ({ ...curr, firstName: e.target.value }))}
                        placeholder="Nate"
                      />
                    </div>
                    <div className="admin-field">
                      <label htmlFor="manual-question-email">Email (optional)</label>
                      <input
                        id="manual-question-email"
                        type="email"
                        value={manualQuestion.email}
                        onChange={e => setManualQuestion(curr => ({ ...curr, email: e.target.value }))}
                        placeholder="optional@email.com"
                      />
                    </div>
                    <div className="admin-field">
                      <label htmlFor="manual-question-question">Question</label>
                      <textarea
                        id="manual-question-question"
                        rows={3}
                        value={manualQuestion.question}
                        onChange={e => setManualQuestion(curr => ({ ...curr, question: e.target.value }))}
                        placeholder="Type the question you want to add to the Q&A list..."
                      />
                    </div>
                    <div className="admin-field">
                      <label htmlFor="manual-question-answer">Answer (optional)</label>
                      <textarea
                        id="manual-question-answer"
                        rows={3}
                        value={manualQuestion.answer}
                        onChange={e => setManualQuestion(curr => ({ ...curr, answer: e.target.value }))}
                        placeholder="Optional: add an answer now"
                      />
                    </div>
                    <div className="admin-field">
                      <label htmlFor="manual-question-approve">Approve Immediately</label>
                      <select
                        id="manual-question-approve"
                        value={manualQuestion.approve ? 'yes' : 'no'}
                        onChange={e => setManualQuestion(curr => ({ ...curr, approve: e.target.value === 'yes' }))}
                      >
                        <option value="no">No</option>
                        <option value="yes">Yes</option>
                      </select>
                    </div>
                  </div>
                  <button
                    type="button"
                    className="btn-admin-save"
                    onClick={handleCreateManualQuestion}
                    disabled={manualQuestionStatus === 'saving'}
                  >
                    {manualQuestionStatus === 'saving' ? 'Adding…' : 'Add Question'}
                  </button>
                </div>
                {manualQuestionMsg && (
                  <p className={`admin-status ${manualQuestionStatus === 'error' ? 'admin-status--err' : 'admin-status--ok'}`}>
                    {manualQuestionMsg}
                  </p>
                )}
              </div>

              {questions.length === 0 ? (
                <p className="admin-stats-note">No questions submitted yet.</p>
              ) : filteredAdminQuestions.length === 0 ? (
                <p className="admin-stats-note">No questions match this filter.</p>
              ) : (
                <div className="admin-questions-list">
                  {visibleAdminQuestions.map(question => (
                    <div key={question.id} className={`admin-question-card${selectedQuestionIds.has(question.id) ? ' admin-question-card--selected' : ''}`}>
                      <div className="admin-question-header">
                        <label className="admin-question-checkbox" title="Select question">
                          <input
                            type="checkbox"
                            checked={selectedQuestionIds.has(question.id)}
                            onChange={e => {
                              setSelectedQuestionIds(prev => {
                                const next = new Set(prev)
                                if (e.target.checked) next.add(question.id)
                                else next.delete(question.id)
                                return next
                              })
                            }}
                          />
                        </label>
                        <div>
                          <p className="admin-question-meta"><strong>{question.firstName}</strong> • {formatDate(question.submittedAt)}</p>
                          <p className="admin-question-text"><strong>Q:</strong> {question.question}</p>
                        </div>
                        <div className="admin-question-status">
                          <span className={`admin-badge ${question.isApproved ? 'admin-badge--approved' : 'admin-badge--pending'}`}>
                            {question.isApproved ? 'Approved' : 'Pending'}
                          </span>
                          {question.answer && <span className="admin-badge admin-badge--answered">Answered</span>}
                        </div>
                      </div>
                      {question.answer && (
                        <div className="admin-question-answer">
                          <p><strong>A:</strong> {question.answer}</p>
                        </div>
                      )}
                      {editingQuestionId === question.id ? (
                        <div className="admin-question-editor">
                          <textarea
                            value={answeredQuestions[question.id] ?? question.answer ?? ''}
                            onChange={e => setAnsweredQuestions(a => ({ ...a, [question.id]: e.target.value }))}
                            rows={4}
                            placeholder="Type your answer here..."
                          />
                          <div className="admin-question-editor-actions">
                            <button type="button" className="btn-admin-save" onClick={() => handleAnswerQuestion(question.id, answeredQuestions[question.id] ?? '')}>Save Answer</button>
                            <button type="button" className="btn-admin-reset" onClick={() => setEditingQuestionId(null)}>Cancel</button>
                          </div>
                        </div>
                      ) : (
                        <div className="admin-question-actions">
                          <button type="button" className="btn-admin-reset" onClick={() => { setEditingQuestionId(question.id); setAnsweredQuestions(a => ({ ...a, [question.id]: question.answer ?? '' })) }}>
                            {question.answer ? 'Edit Answer' : 'Add Answer'}
                          </button>
                          <button type="button" className={`btn-admin-${question.isApproved ? 'remove' : 'reset'}`} onClick={() => handleApproveQuestion(question.id, !question.isApproved)}>
                            {question.isApproved ? 'Unapprove' : 'Approve'}
                          </button>
                          <button type="button" className="btn-admin-remove" onClick={() => handleDeleteQuestion(question.id)}>Delete</button>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              )}

              {filteredAdminQuestions.length > QUESTION_PAGE_SIZE && (
                <div className="qa-pagination" style={{ marginTop: '1rem', justifyContent: 'flex-start' }}>
                  <button
                    type="button"
                    className="qa-page-btn"
                    onClick={() => setQuestionPage(p => Math.max(0, p - 1))}
                    disabled={questionPage === 0}
                  >
                    Prev
                  </button>
                  <span className="qa-page-info">Page {questionPage + 1} / {totalQuestionPages}</span>
                  <button
                    type="button"
                    className="qa-page-btn"
                    onClick={() => setQuestionPage(p => Math.min(totalQuestionPages - 1, p + 1))}
                    disabled={questionPage >= totalQuestionPages - 1}
                  >
                    Next
                  </button>
                </div>
              )}
            </section>
          )}

          {/* STUDY USERS */}
          {adminView === 'study-users' && <StudyUsersPanel studies={normalizeStudies(form)} />}

          {/* ANALYTICS */}
          {adminView === 'analytics' && (
            <AnalyticsPanel
              stats={stats}
              statsStatus={statsStatus}
              opsStatus={opsStatus}
              formatDate={formatDate}
              maskIp={maskIp}
              maintenanceMsg={maintenanceMsg}
              selectedBackup={selectedBackup}
              backupFiles={backupFiles}
              selectedBackupPreview={selectedBackupPreview}
              onBackupSelect={setSelectedBackup}
              onRestore={handleRestoreBackup}
              onExport={handleExport}
              onBackupNow={handleBackupNow}
              onPrune={handlePrune}
              onClear={handleClear}
              onPurgeCache={handlePurgeCache}
              onDeployHook={handleDeployHook}
              onRefreshStatus={() => { void reloadOpsStatus() }}
            />
          )}

          {/* EMAILS */}
          {adminView === 'emails' && (
            <section className="admin-panel-section" aria-label="Email center">
              <div className="admin-panel-head">
                <h2>Email Center</h2>
                <p>Manage inbound contact emails, archive threads, reply with templates, and review sent history.</p>
              </div>

              {contactReplyConfig && (
                <div className="admin-restore-preview" style={{ marginBottom: '0.9rem' }}>
                  <h3>Sender Status</h3>
                  <p><strong>From:</strong> {contactReplyConfig.fromIdentity}</p>
                  <p><strong>Resend Configured:</strong> {contactReplyConfig.resendApiConfigured ? 'Yes' : 'No'}</p>
                  <p><strong>Can Send Replies:</strong> {contactReplyConfig.canSendReplies ? 'Yes' : 'No'}</p>
                  <p>{contactReplyConfig.note}</p>
                </div>
              )}

              <div className="admin-actions admin-actions--maintenance" style={{ marginBottom: '0.75rem' }}>
                <button type="button" className={`btn-admin-reset${emailMailboxView === 'inbox' ? ' btn-admin-reset--active' : ''}`} onClick={() => setEmailMailboxView('inbox')}>Inbox</button>
                <button type="button" className={`btn-admin-reset${emailMailboxView === 'archived' ? ' btn-admin-reset--active' : ''}`} onClick={() => setEmailMailboxView('archived')}>Archived</button>
              </div>

              {contactStatus === 'loading' && <p className="admin-stats-note">Loading emails…</p>}
              {contactStatus === 'error' && <p className="admin-stats-note">Could not load contact submissions.</p>}

              {contactStatus === 'ready' && (
                <div className="admin-email-layout">
                  <aside className="admin-email-list">
                    {contactSubmissions.filter(item => (emailMailboxView === 'archived' ? item.archived === true : item.archived !== true)).length === 0 && (
                      <p className="admin-stats-note">No messages in this mailbox.</p>
                    )}
                    {contactSubmissions
                      .filter(item => (emailMailboxView === 'archived' ? item.archived === true : item.archived !== true))
                      .map(item => (
                        <button
                          key={item.id}
                          type="button"
                          className={`admin-email-list-item${selectedEmailId === item.id ? ' admin-email-list-item--active' : ''}`}
                          onClick={() => setSelectedEmailId(item.id)}
                        >
                          <div className="admin-email-list-head">
                            <strong>{item.name}</strong>
                            <span>{formatDate(item.submittedAt)}</span>
                          </div>
                          <p>{item.message}</p>
                        </button>
                      ))}
                  </aside>

                  <div className="admin-email-detail">
                    {(() => {
                      const visible = contactSubmissions.filter(item => (emailMailboxView === 'archived' ? item.archived === true : item.archived !== true))
                      const selected = visible.find(item => item.id === selectedEmailId) ?? null
                      if (!selected) return <p className="admin-stats-note">Select an email to view details.</p>

                      return (
                        <>
                          <div className="admin-email-meta">
                            <p><strong>From:</strong> {selected.name} &lt;{selected.email}&gt;</p>
                            <p><strong>Type:</strong> {selected.messageType}</p>
                            <p><strong>Subscribed:</strong> {selected.subscribe ? 'Yes' : 'No'}</p>
                            <p><strong>Received:</strong> {formatDate(selected.submittedAt)}</p>
                          </div>

                          <div className="admin-email-body">
                            <p>{selected.message}</p>
                          </div>

                          <div className="admin-actions admin-actions--maintenance">
                            <button type="button" className="btn-admin-save admin-email-action-btn" onClick={() => openContactReplyComposer(selected)}>Reply</button>
                            <button
                              type="button"
                              className="btn-admin-reset admin-email-action-btn"
                              onClick={() => handleArchiveContactSubmission(selected.id, !(selected.archived === true))}
                            >
                              {selected.archived === true ? 'Move to Inbox' : 'Archive'}
                            </button>
                            <button type="button" className="btn-admin-remove admin-email-action-btn" onClick={() => handleDeleteContactSubmission(selected.id)}>Delete</button>
                          </div>
                        </>
                      )
                    })()}
                  </div>
                </div>
              )}

              {contactReplyDraft && (
                <div className="admin-array-row" style={{ marginTop: '1rem' }}>
                  <div className="admin-array-fields">
                    {contactReplyTemplates.length > 0 && (
                      <div className="admin-field">
                        <label htmlFor="reply-template">Saved Template</label>
                        <select id="reply-template" defaultValue="" onChange={e => applyContactReplyTemplate(e.target.value)}>
                          <option value="">Choose a template…</option>
                          {contactReplyTemplates.map(template => (
                            <option key={template.id} value={template.id}>{template.label}</option>
                          ))}
                        </select>
                      </div>
                    )}
                    <div className="admin-field">
                      <label htmlFor="reply-to">To</label>
                      <input id="reply-to" type="text" value={`${contactReplyDraft.recipientName} <${contactReplyDraft.recipientEmail}>`} readOnly />
                    </div>
                    <div className="admin-field">
                      <label htmlFor="reply-from">From</label>
                      <input id="reply-from" type="text" value="hello@versebyversewithnate.us" readOnly />
                    </div>
                    <div className="admin-field">
                      <label htmlFor="reply-subject">Subject</label>
                      <input
                        id="reply-subject"
                        type="text"
                        value={contactReplyDraft.subject}
                        onChange={e => setContactReplyDraft(draft => draft ? { ...draft, subject: e.target.value } : draft)}
                      />
                    </div>
                    <div className="admin-field">
                      <label htmlFor="reply-message">Message</label>
                      <textarea
                        id="reply-message"
                        rows={8}
                        value={contactReplyDraft.message}
                        onChange={e => setContactReplyDraft(draft => draft ? { ...draft, message: e.target.value } : draft)}
                      />
                      <p className="admin-stats-note">This will be wrapped in a professional HTML email template automatically.</p>
                    </div>
                  </div>
                  <div style={{ display: 'flex', gap: '0.5rem' }}>
                    <button type="button" className="btn-admin-save" onClick={handleSendContactReply} disabled={contactReplyStatus === 'sending'}>
                      {contactReplyStatus === 'sending' ? 'Sending…' : 'Send Reply'}
                    </button>
                    <button
                      type="button"
                      className="btn-admin-reset"
                      onClick={() => {
                        setContactReplyDraft(null)
                        setContactReplyStatus('idle')
                        setContactReplyMsg('')
                      }}
                    >
                      Cancel
                    </button>
                  </div>
                </div>
              )}

              {contactReplyMsg && <p className="admin-stats-note">{contactReplyMsg}</p>}

              <AdminCollapsibleCard
                title="Saved Reply Templates"
                subtitle={`${contactReplyTemplates.length} template${contactReplyTemplates.length === 1 ? '' : 's'} configured`}
              >
                  {contactReplyTemplates.length === 0 && <p className="admin-stats-note">No saved templates yet.</p>}
                  {contactReplyTemplates.map(template => (
                    <AdminCollapsibleCard
                      key={template.id}
                      title={template.label || 'Untitled template'}
                      subtitle={template.subject || 'No subject set'}
                      className="admin-collapsible-card--nested"
                    >
                      <div className="admin-array-row admin-array-row--nested">
                          <div className="admin-array-fields">
                            <div className="admin-field">
                              <label htmlFor={`reply-template-label-${template.id}`}>Label</label>
                              <input id={`reply-template-label-${template.id}`} type="text" value={template.label} onChange={e => updateContactReplyTemplate(template.id, 'label', e.target.value)} />
                            </div>
                            <div className="admin-field">
                              <label htmlFor={`reply-template-subject-${template.id}`}>Subject</label>
                              <input id={`reply-template-subject-${template.id}`} type="text" value={template.subject} onChange={e => updateContactReplyTemplate(template.id, 'subject', e.target.value)} />
                            </div>
                            <div className="admin-field">
                              <label htmlFor={`reply-template-message-${template.id}`}>Message</label>
                              <textarea id={`reply-template-message-${template.id}`} rows={5} value={template.message} onChange={e => updateContactReplyTemplate(template.id, 'message', e.target.value)} />
                            </div>
                          </div>
                          <button type="button" className="btn-admin-remove" onClick={() => removeContactReplyTemplate(template.id)}>Remove</button>
                        </div>
                    </AdminCollapsibleCard>
                  ))}
                  <div className="admin-actions admin-actions--maintenance">
                    <button type="button" className="btn-admin-reset" onClick={addContactReplyTemplate}>Add Template</button>
                    <button type="button" className="btn-admin-save" onClick={handleSaveContactReplyTemplates} disabled={contactTemplateStatus === 'saving'}>
                      {contactTemplateStatus === 'saving' ? 'Saving…' : 'Save Templates'}
                    </button>
                  </div>
              </AdminCollapsibleCard>

              <div className="admin-visits-table-wrap">
                <h3>Reply History</h3>
                {contactReplyHistory.length === 0 ? <p className="admin-stats-note">No admin replies have been sent yet.</p> : (
                  <div className="admin-visits-table-scroll">
                    <table className="admin-visits-table">
                      <thead>
                        <tr><th>Sent</th><th>To</th><th>From</th><th>Subject</th><th>Preview</th></tr>
                      </thead>
                      <tbody>
                        {contactReplyHistory.map(item => (
                          <tr key={item.id}>
                            <td>{formatDate(item.sentAt)}</td>
                            <td>{item.toName} ({item.toEmail})</td>
                            <td>{item.fromEmail}</td>
                            <td>{item.subject}</td>
                            <td>{item.preview}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            </section>
          )}

          {/* ASSETS */}
          {adminView === 'assets' && (
            <section className="admin-panel-section" aria-label="Asset manager">
              <div className="admin-panel-head">
                <h2>Asset Manager</h2>
                <p>Upload, tag, and reuse hosted images from this domain.</p>
              </div>
              <div className="admin-actions admin-actions--maintenance">
                <label className="btn-admin-reset" style={{ cursor: 'pointer' }}>
                  {assetUploadPending ? 'Uploading…' : 'Upload Image or PDF'}
                  <input type="file" accept="image/*,.pdf" style={{ display: 'none' }} onChange={handleAssetUpload} disabled={assetUploadPending} />
                </label>
              </div>
              {assets.length === 0 && <p className="admin-stats-note">No assets uploaded yet.</p>}
              {assets.length > 0 && (
                <div className="admin-visits-table-scroll">
                  <table className="admin-visits-table admin-assets-table">
                    <thead>
                      <tr>
                        <th>Preview</th>
                        <th>Filename</th>
                        <th>Size</th>
                        <th>Updated</th>
                        <th>Tags</th>
                        <th>Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      {assets.map(asset => (
                        <tr key={asset.filename}>
                          <td>
                            {isImageAsset(asset.filename)
                              ? <img src={asset.url} alt={asset.filename} className="admin-asset-thumb" style={{ width: '72px', height: '52px', objectFit: 'cover' }} />
                              : <span>PDF/File</span>}
                          </td>
                          <td>{asset.filename}</td>
                          <td>{(asset.sizeBytes / 1024).toFixed(1)} KB</td>
                          <td>{formatDate(asset.updatedAt)}</td>
                          <td>
                            <input
                              type="text"
                              className="admin-asset-tags-input"
                              placeholder="Add tags…"
                              value={assetTagEdits[asset.filename] ?? (asset.tags ?? []).join(', ')}
                              onChange={e => setAssetTagEdits(t => ({ ...t, [asset.filename]: e.target.value }))}
                              onBlur={() => handleSaveAssetTags(asset.filename)}
                            />
                          </td>
                          <td>
                            <div className="admin-asset-actions-inline">
                              <button type="button" className="btn-admin-reset btn-admin-reset--compact" onClick={() => { navigator.clipboard.writeText(asset.url).catch(() => {}) }}>Copy URL</button>
                              <button type="button" className="btn-admin-remove" onClick={() => handleDeleteAsset(asset.filename)}>Delete</button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
              {opsMsg && <p className="admin-stats-note">{opsMsg}</p>}
            </section>
          )}

          {/* SEO & REDIRECTS */}
          {adminView === 'seo' && (
            <section className="admin-panel-section" aria-label="SEO & Redirects">
              <div className="admin-panel-head">
                <h2>SEO &amp; Redirects</h2>
                <p>Control metadata, canonical URL, robots policy, sitemap paths, and short-link redirects.</p>
              </div>

              {renderSectionJumpNav('seo')}

              <div className="admin-section-header" id="seo-metadata">
                <h3>Metadata</h3>
                <p>Search title, descriptions, Open Graph image, canonical URL, robots policy, and sitemap paths.</p>
              </div>
              <div className="admin-array-row">
                <div className="admin-array-fields">
                  <div className="admin-field"><label htmlFor="seo-title">SEO Title</label><input id="seo-title" type="text" value={form.seo?.title ?? ''} onChange={e => updateSeoField('title', e.target.value)} /></div>
                  <div className="admin-field"><label htmlFor="seo-description">SEO Description</label><textarea id="seo-description" rows={3} value={form.seo?.description ?? ''} onChange={e => updateSeoField('description', e.target.value)} /></div>
                  <div className="admin-field"><label htmlFor="seo-og-title">Open Graph Title</label><input id="seo-og-title" type="text" value={form.seo?.ogTitle ?? ''} onChange={e => updateSeoField('ogTitle', e.target.value)} /></div>
                  <div className="admin-field"><label htmlFor="seo-og-description">Open Graph Description</label><textarea id="seo-og-description" rows={3} value={form.seo?.ogDescription ?? ''} onChange={e => updateSeoField('ogDescription', e.target.value)} /></div>
                  <div className="admin-field">
                    <label htmlFor="seo-og-image">Open Graph Image URL</label>
                    <input id="seo-og-image" type="text" value={form.seo?.ogImage ?? ''} onChange={e => updateSeoField('ogImage', e.target.value)} />
                    {renderImageAssetSelector(form.seo?.ogImage, value => updateSeoField('ogImage', value), 'seo-og-image-asset')}
                  </div>
                  <div className="admin-field"><label htmlFor="seo-canonical">Canonical URL</label><input id="seo-canonical" type="text" value={form.seo?.canonicalUrl ?? ''} onChange={e => updateSeoField('canonicalUrl', e.target.value)} /></div>
                  <div className="admin-field"><label htmlFor="seo-robots">Robots Policy</label><input id="seo-robots" type="text" value={form.seo?.robotsPolicy ?? ''} onChange={e => updateSeoField('robotsPolicy', e.target.value)} /></div>
                  <div className="admin-field">
                    <label htmlFor="seo-sitemap">Sitemap Paths (one per line)</label>
                    <textarea id="seo-sitemap" rows={4} value={(form.seo?.sitemapPaths ?? []).join('\n')} onChange={e => updateSeoField('sitemapPaths', e.target.value.split('\n').map(v => v.trim()).filter(Boolean))} />
                  </div>
                </div>
              </div>
              <div className="admin-section-header" id="seo-redirects">
                <h3>Redirect Manager</h3>
                <p>Maintain first-party short links like /spotify without code changes.</p>
              </div>
              {(form.redirects ?? []).map(rule => (
                <div key={rule.id} className="admin-array-row">
                  <div className="admin-array-fields">
                    <div className="admin-field"><label htmlFor={`redirect-path-${rule.id}`}>Path</label><input id={`redirect-path-${rule.id}`} type="text" value={rule.path} onChange={e => updateRedirectRule(rule.id, 'path', e.target.value)} /></div>
                    <div className="admin-field"><label htmlFor={`redirect-target-${rule.id}`}>Target URL</label><input id={`redirect-target-${rule.id}`} type="text" value={rule.target} onChange={e => updateRedirectRule(rule.id, 'target', e.target.value)} /></div>
                    <div className="admin-field">
                      <label htmlFor={`redirect-status-${rule.id}`}>Status</label>
                      <select id={`redirect-status-${rule.id}`} value={rule.statusCode} onChange={e => updateRedirectRule(rule.id, 'statusCode', Number(e.target.value))}>
                        <option value={301}>301 Permanent</option>
                        <option value={302}>302 Temporary</option>
                      </select>
                    </div>
                  </div>
                  <button type="button" className="btn-admin-remove" onClick={() => removeRedirectRule(rule.id)}>Remove</button>
                </div>
              ))}
              <button type="button" className="btn-admin-add" onClick={addRedirectRule}>+ Add Redirect</button>
              {renderSaveStatus()}
            </section>
          )}

          {/* LEGAL */}
          {adminView === 'legal' && (
            <section className="admin-panel-section" aria-label="Legal Pages">
              <div className="admin-panel-head">
                <h2>Legal Pages</h2>
                <p>Edit Privacy and Terms pages from admin.</p>
              </div>

              {renderSectionJumpNav('legal')}

              <div className="admin-section-header" id="legal-privacy">
                <h3>Privacy</h3>
                <p>Edit the title and body content for the privacy page.</p>
              </div>
              <div className="admin-array-row">
                <div className="admin-array-fields">
                  <div className="admin-field"><label htmlFor="legal-privacy-title">Privacy Title</label><input id="legal-privacy-title" type="text" value={form.legal?.privacyTitle ?? ''} onChange={e => updateLegalField('privacyTitle', e.target.value)} /></div>
                  <div className="admin-field">
                    <label htmlFor="legal-privacy-body">Privacy Body (one paragraph per line)</label>
                    <textarea id="legal-privacy-body" rows={4} value={(form.legal?.privacyBody ?? []).join('\n')} onChange={e => updateLegalField('privacyBody', e.target.value.split('\n').map(v => v.trim()).filter(Boolean))} />
                  </div>
                </div>
              </div>

              <div className="admin-section-header" id="legal-terms">
                <h3>Terms</h3>
                <p>Edit the title and body content for the terms page.</p>
              </div>
              <div className="admin-array-row">
                <div className="admin-array-fields">
                  <div className="admin-field"><label htmlFor="legal-terms-title">Terms Title</label><input id="legal-terms-title" type="text" value={form.legal?.termsTitle ?? ''} onChange={e => updateLegalField('termsTitle', e.target.value)} /></div>
                  <div className="admin-field">
                    <label htmlFor="legal-terms-body">Terms Body (one paragraph per line)</label>
                    <textarea id="legal-terms-body" rows={4} value={(form.legal?.termsBody ?? []).join('\n')} onChange={e => updateLegalField('termsBody', e.target.value.split('\n').map(v => v.trim()).filter(Boolean))} />
                  </div>
                </div>
              </div>
              {renderSaveStatus()}
            </section>
          )}

          {/* SECURITY */}
          {adminView === 'security' && (
            <section className="admin-panel-section" aria-label="Security">
              <div className="admin-panel-head">
                <h2>Security</h2>
                <p>Manage two-factor authentication for admin login.</p>
              </div>
              {totpEnabled === null && <p className="admin-stats-note">Loading…</p>}
              {totpEnabled === false && !totpSetupQr && (
                <div className="admin-array-row">
                  <div className="admin-array-fields">
                    <p className="admin-stats-note">2FA is currently <strong>off</strong>. Enable it to require an authenticator app at every login.</p>
                    <button type="button" className="btn-primary" onClick={handleTotpSetupInit}>Enable 2FA</button>
                  </div>
                </div>
              )}
              {totpSetupQr && (
                <div className="admin-array-row">
                  <div className="admin-array-fields">
                    <p className="admin-stats-note">Scan this QR code with your authenticator app, then enter the 6-digit code below to confirm.</p>
                    <img src={totpSetupQr} alt="TOTP QR code" style={{ width: 200, height: 200, display: 'block', margin: '0.5rem 0' }} />
                    {totpSetupSecret && <p className="admin-stats-note" style={{ wordBreak: 'break-all' }}>Manual entry key: <code>{totpSetupSecret}</code></p>}
                    <form onSubmit={handleTotpSetupConfirm} style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-end', flexWrap: 'wrap' }}>
                      <div className="admin-field" style={{ flex: 1, minWidth: 160 }}>
                        <label htmlFor="totp-confirm-code">Confirmation Code</label>
                        <input id="totp-confirm-code" type="text" inputMode="numeric" value={totpConfirmCode} onChange={e => setTotpConfirmCode(e.target.value)} placeholder="000000" autoFocus required />
                      </div>
                      <button type="submit" className="btn-primary">Confirm &amp; Enable</button>
                      <button type="button" className="btn-secondary" onClick={() => { setTotpSetupQr(null); setTotpSetupSecret(null) }}>Cancel</button>
                    </form>
                  </div>
                </div>
              )}
              {totpEnabled === true && !totpSetupQr && (
                <div className="admin-array-row">
                  <div className="admin-array-fields">
                    <p className="admin-stats-note">2FA is currently <strong>on</strong>. A code from your authenticator app is required at every login.</p>
                    <div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
                      <button type="button" className="btn-admin-reset" onClick={handleTotpRegenRecovery}>Regenerate Recovery Codes</button>
                      <button type="button" className="btn-admin-remove" onClick={handleTotpDisable}>Disable 2FA</button>
                    </div>
                  </div>
                </div>
              )}
              {totpRecoveryCodes && (
                <div className="admin-array-row">
                  <div className="admin-array-fields">
                    <p className="admin-stats-note"><strong>Save these recovery codes somewhere safe.</strong> Each can be used once instead of the 6-digit code if you lose access to your authenticator app. They will not be shown again.</p>
                    <ul style={{ fontFamily: 'monospace', lineHeight: 2 }}>{totpRecoveryCodes.map(c => <li key={c}>{c}</li>)}</ul>
                    <button type="button" className="btn-secondary" onClick={() => setTotpRecoveryCodes(null)}>I've saved these</button>
                  </div>
                </div>
              )}
              {totpMsg && <p className="admin-stats-note">{totpMsg}</p>}
            </section>
          )}

          {/* BRAND KIT */}
          {adminView === 'brand' && (
            <section className="admin-panel-section admin-brand-kit" aria-label="Brand kit">
              <div className="admin-panel-head">
                <h2>Brand Kit</h2>
                <p>Reference palette, typography, and implementation status for the live site.</p>
              </div>
              <div className="admin-brand-hero">
                <img src="/images/podcast-art.jpeg" alt="Verse by Verse with Nate artwork" />
                <div>
                  <p className="admin-brand-kicker">Verse by Verse with Nate</p>
                  <h3>A Journey Through Scripture</h3>
                  <p className="admin-brand-tagline">Verse by verse. Nugget by nugget.</p>
                </div>
              </div>
              <div className="admin-brand-grid">
                <article className="admin-brand-card">
                  <h3>Color Palette</h3>
                  <div className="admin-brand-swatches">
                    {BRAND_KIT_SWATCHES.map(swatch => (
                      <div key={swatch.hex} className="admin-brand-swatch">
                        <div className="admin-brand-swatch-block" style={{ background: swatch.hex }} />
                        <div className="admin-brand-swatch-copy">
                          <strong>{swatch.name}</strong>
                          <span>{swatch.hex}</span>
                          <p>{swatch.role}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </article>
                <article className="admin-brand-card">
                  <h3>Typography</h3>
                  <div className="admin-brand-type-list">
                    {BRAND_KIT_TYPE.map(item => (
                      <div key={item.label} className="admin-brand-type-row">
                        <p className="admin-brand-type-label">{item.label}</p>
                        <p className="admin-brand-type-spec">{item.spec}</p>
                        <p className="admin-brand-type-sample">{item.sample}</p>
                      </div>
                    ))}
                  </div>
                </article>
              </div>
              <article className="admin-brand-card admin-brand-card--verify">
                <h3>Verified On Site</h3>
                <ul className="admin-brand-checklist">
                  {BRAND_KIT_VERIFICATION.map(item => <li key={item}>{item}</li>)}
                </ul>
                <p className="admin-brand-note">This admin panel reflects the live implementation now loaded from the shared font import and brand tokens.</p>
              </article>
            </section>
          )}

        </main>

        {/* ── Live preview pane ── */}
        {previewOpen && (
          <div className="admin-preview-pane">
            <div className="admin-preview-toolbar">
              <span className="admin-preview-label">Live Preview</span>
              <span className="admin-preview-hint">Updates as you type</span>
            </div>
            <iframe
              ref={previewIframeRef}
              src="/preview"
              title="Site preview"
              className="admin-preview-iframe"
              onLoad={() => {
                // Once the iframe loads, immediately push the current form state and view
                previewIframeRef.current?.contentWindow?.postMessage(
                  { type: 'admin-preview-content', content: form, view: adminView },
                  window.location.origin
                )
              }}
            />
          </div>
        )}

      </div>
    </div>
  )
}