import { useState, useEffect } from 'react'
import { Link, NavLink, Routes, Route, useLocation, useNavigate, useParams } from 'react-router-dom'
import AdminPage from './AdminPage'
import QASection from './components/QASection'
import ContactForm from './components/ContactForm'
import { FacebookIcon, SpotifyIcon, YouTubeIcon, AmazonMusicIcon } from './icons'
import type { SiteContent } from './content'
import { DEFAULTS } from './content'
import './App.css'

const SPOTIFY_SHOW_URL = '/spotify'
const SPOTIFY_EMBED_URL =
  'https://open.spotify.com/embed/show/0Gq1TzoJOdReSZ1gYQi8Xl?utm_source=generator&theme=0'
const SPOTIFY_CREATOR_URL = 'https://creators.spotify.com/pod/profile/nmemmert/'
const APPLE_PODCASTS_URL = '/apple'
const YOUTUBE_URL = 'https://www.youtube.com/@blackzebraem5558'
const AMAZON_MUSIC_URL = '/amazon'
const FACEBOOK_URL = 'https://facebook.com/versebyversewithnate'
const CONSENT_KEY = 'vbn_analytics_consent_choice'

function StudyDownloadForm() {
  const [fields, setFields] = useState({ firstName: '', lastName: '', email: '' })
  const [subscribe, setSubscribe] = useState(true)
  const [honey, setHoney] = useState('')
  const [status, setStatus] = useState<'idle' | 'submitting' | 'error' | 'success'>('idle')
  const [errorMsg, setErrorMsg] = useState('')
  const [successMsg, setSuccessMsg] = useState('')

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setFields(f => ({ ...f, [e.target.name]: e.target.value }))
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setStatus('submitting')
    setErrorMsg('')
    setSuccessMsg('')

    try {
      const res = await fetch('/api/study-downloads/titus', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...fields, subscribe, _honey: honey }),
      })

      const data = await res.json().catch(() => ({})) as { message?: string; downloadUrl?: string }
      if (!res.ok || !data.downloadUrl) {
        setErrorMsg(data.message ?? 'Could not process your request. Please try again.')
        setStatus('error')
        return
      }

      setStatus('success')
      setSuccessMsg('Your download should start now. If not, use the link below.')
      window.location.assign(data.downloadUrl)
    } catch {
      setErrorMsg('Could not connect. Please try again later.')
      setStatus('error')
    }
  }

  return (
    <form className="study-download-form" onSubmit={handleSubmit} noValidate>
      <input
        type="text"
        className="contact-honeypot"
        tabIndex={-1}
        autoComplete="off"
        aria-hidden="true"
        value={honey}
        onChange={e => setHoney(e.target.value)}
      />
      <div className="study-download-grid">
        <label>
          First Name
          <input type="text" name="firstName" required autoComplete="given-name" value={fields.firstName} onChange={handleChange} />
        </label>
        <label>
          Last Name
          <input type="text" name="lastName" required autoComplete="family-name" value={fields.lastName} onChange={handleChange} />
        </label>
        <label>
          Email
          <input type="email" name="email" required autoComplete="email" value={fields.email} onChange={handleChange} />
        </label>
      </div>
      <label className="contact-consent">
        <input
          type="checkbox"
          checked={subscribe}
          onChange={e => setSubscribe(e.target.checked)}
        />
        <span>Subscribe me to updates from Verse by Verse with Nate.</span>
      </label>
      {status === 'error' && <p className="contact-error">{errorMsg}</p>}
      {status === 'success' && <p className="study-download-success">{successMsg}</p>}
      <button type="submit" className="btn-primary" disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Preparing Download...' : 'Download Titus Study'}
      </button>
    </form>
  )
}

function ResourceDownloadForm({ resourceId, buttonText }: { resourceId: string; buttonText: string }) {
  const [fields, setFields] = useState({ firstName: '', lastName: '', email: '' })
  const [subscribe, setSubscribe] = useState(true)
  const [honey, setHoney] = useState('')
  const [status, setStatus] = useState<'idle' | 'submitting' | 'error' | 'success'>('idle')
  const [errorMsg, setErrorMsg] = useState('')
  const [successMsg, setSuccessMsg] = useState('')

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    setFields(f => ({ ...f, [e.target.name]: e.target.value }))
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setStatus('submitting')
    setErrorMsg('')
    setSuccessMsg('')

    try {
      const res = await fetch('/api/resource-download', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ resourceId, ...fields, subscribe, _honey: honey }),
      })

      const data = await res.json().catch(() => ({})) as { message?: string; downloadUrl?: string }
      if (!res.ok || !data.downloadUrl) {
        setErrorMsg(data.message ?? 'Could not process your request. Please try again.')
        setStatus('error')
        return
      }

      setStatus('success')
      setSuccessMsg('Your download should start now. If not, use the link below.')
      window.location.assign(data.downloadUrl)
    } catch {
      setErrorMsg('Could not connect. Please try again later.')
      setStatus('error')
    }
  }

  return (
    <form className="study-download-form" onSubmit={handleSubmit} noValidate>
      <input
        type="text"
        className="contact-honeypot"
        tabIndex={-1}
        autoComplete="off"
        aria-hidden="true"
        value={honey}
        onChange={e => setHoney(e.target.value)}
      />
      <div className="study-download-grid">
        <label>
          First Name
          <input type="text" name="firstName" required autoComplete="given-name" value={fields.firstName} onChange={handleChange} />
        </label>
        <label>
          Last Name
          <input type="text" name="lastName" required autoComplete="family-name" value={fields.lastName} onChange={handleChange} />
        </label>
        <label>
          Email
          <input type="email" name="email" required autoComplete="email" value={fields.email} onChange={handleChange} />
        </label>
      </div>
      <label className="contact-consent">
        <input
          type="checkbox"
          checked={subscribe}
          onChange={e => setSubscribe(e.target.checked)}
        />
        <span>Subscribe me to updates from Verse by Verse with Nate.</span>
      </label>
      {status === 'error' && <p className="contact-error">{errorMsg}</p>}
      {status === 'success' && <p className="study-download-success">{successMsg}</p>}
      <button type="submit" className="btn-primary" disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Preparing Download...' : buttonText}
      </button>
    </form>
  )
}

function AnalyticsConsentBanner() {
  const [choice, setChoice] = useState<'unknown' | 'accepted' | 'declined'>(() => {
    const saved = localStorage.getItem(CONSENT_KEY)
    if (saved === 'accepted' || saved === 'declined') return saved
    return 'unknown'
  })

  async function sendChoice(consent: boolean) {
    await fetch('/api/analytics-consent', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ consent }),
    })
  }

  async function accept() {
    setChoice('accepted')
    localStorage.setItem(CONSENT_KEY, 'accepted')
    try {
      await sendChoice(true)
    } catch {
      // Keep local preference even if network fails.
    }
  }

  async function decline() {
    setChoice('declined')
    localStorage.setItem(CONSENT_KEY, 'declined')
    try {
      await sendChoice(false)
    } catch {
      // Keep local preference even if network fails.
    }
  }

  if (choice !== 'unknown') return null

  return (
    <div className="consent-banner" role="region" aria-label="Analytics consent">
      <p>
        We use optional analytics cookies to measure visits and location trends for site improvement.
      </p>
      <div className="consent-actions">
        <button type="button" className="btn-primary" onClick={accept}>Accept</button>
        <button type="button" className="btn-secondary" onClick={decline}>Decline</button>
      </div>
    </div>
  )
}

interface Episode {
  title: string
  pubDate: string
  link: string
  description: string
  duration: string
  episode: string
}

function formatPubDate(raw: string): string {
  try {
    return new Date(raw).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
  } catch {
    return raw
  }
}

function LatestEpisodesList() {
  const [episodes, setEpisodes] = useState<Episode[]>([])
  const [loading, setLoading] = useState(true)
  const [failed, setFailed] = useState(false)

  useEffect(() => {
    fetch('/api/episodes')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('fetch failed'))))
      .then((data: { episodes: Episode[] }) => {
        if (data.episodes.length === 0) setFailed(true)
        else setEpisodes(data.episodes)
        setLoading(false)
      })
      .catch(() => {
        setFailed(true)
        setLoading(false)
      })
  }, [])

  if (loading) {
    return (
      <div className="episode-list-loading">
        {[1, 2, 3].map(i => <div key={i} className="episode-skeleton" aria-hidden="true" />)}
      </div>
    )
  }

  if (failed) {
    return (
      <div className="embed-wrap">
        <iframe
          title="Verse by Verse with Nate"
          src={SPOTIFY_EMBED_URL}
          width="100%"
          height="352"
          frameBorder="0"
          allowFullScreen
          allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
          loading="lazy"
          style={{ borderRadius: '14px' }}
        />
      </div>
    )
  }

  return (
    <div className="episode-list">
      {episodes.map((ep, idx) => (
        <a
          key={idx}
          href={ep.link || SPOTIFY_SHOW_URL}
          target="_blank"
          rel="noreferrer"
          className="episode-card"
        >
          <div className="episode-card-meta">
            {ep.episode && <span className="episode-number">Ep. {ep.episode}</span>}
            {ep.pubDate && <span className="episode-date">{formatPubDate(ep.pubDate)}</span>}
            {ep.duration && <span className="episode-duration">{ep.duration}</span>}
          </div>
          <h3 className="episode-title">{ep.title}</h3>
          {ep.description && <p className="episode-desc">{ep.description}</p>}
          <span className="episode-listen-cta">
            <SpotifyIcon /> Listen →
          </span>
        </a>
      ))}
    </div>
  )
}

function SiteHeader() {
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <header className="site-header">
      <div className="header-inner">
        <span className="header-ornament">✦ &nbsp; ✦ &nbsp; ✦</span>
        <button
          type="button"
          className="header-menu-btn"
          aria-expanded={menuOpen}
          aria-controls="site-nav"
          onClick={() => setMenuOpen(open => !open)}
        >
          {menuOpen ? 'Close' : 'Menu'}
        </button>
        <nav id="site-nav" className={`header-nav ${menuOpen ? 'header-nav--open' : ''}`}>
          <NavLink to="/" end className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Home</NavLink>
          <NavLink to="/episodes" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Episodes</NavLink>
          <NavLink to="/resources" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Resources</NavLink>
          <NavLink to="/about" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>About</NavLink>
          <NavLink to="/contact" className={({ isActive }) => `header-nav-link${isActive ? ' header-nav-link--active' : ''}`} onClick={() => setMenuOpen(false)}>Contact</NavLink>
          <a
            href={SPOTIFY_SHOW_URL}
            target="_blank"
            rel="noreferrer"
            className="header-cta"
          >
            Follow on Spotify
          </a>
        </nav>
      </div>
    </header>
  )
}

function SiteFooter({ content }: { content: SiteContent }) {
  return (
    <footer className="site-footer">
      <p className="footer-ornament">✦ &nbsp; ✦ &nbsp; ✦</p>
      <p className="footer-title">Verse by Verse with Nate</p>
      <p className="footer-sub">A Journey Through Scripture</p>
      <p className="footer-contact">
        Contact:{' '}
        <a href="mailto:hello@versebyversewithnate.us">hello@versebyversewithnate.us</a>
      </p>
      <p className="footer-response">We usually reply within 48 hours.</p>
      <nav className="footer-links" aria-label="Footer links">
        <a href={SPOTIFY_SHOW_URL} target="_blank" rel="noreferrer">Spotify</a>
        <span aria-hidden="true">·</span>
        <a href={APPLE_PODCASTS_URL} target="_blank" rel="noreferrer">Apple Podcasts</a>
        <span aria-hidden="true">·</span>
        <a href={YOUTUBE_URL} target="_blank" rel="noreferrer">YouTube</a>
        <span aria-hidden="true">·</span>
        <a href={AMAZON_MUSIC_URL} target="_blank" rel="noreferrer">Amazon Music</a>
        <span aria-hidden="true">·</span>
        <a href={SPOTIFY_CREATOR_URL} target="_blank" rel="noreferrer">Creator Profile</a>
        <span aria-hidden="true">·</span>
        <a href={FACEBOOK_URL} target="_blank" rel="noreferrer">Facebook</a>
        {(content.customLinks ?? []).filter(l => l.placement === 'footer').flatMap(l => [
          <span key={`sep-${l.id}`} aria-hidden="true">·</span>,
          <a key={l.id} href={l.url} target="_blank" rel="noreferrer">{l.label}</a>,
        ])}
      </nav>
      <nav className="footer-links footer-links--legal" aria-label="Legal links">
        <Link to="/privacy">Privacy Policy</Link>
        <span aria-hidden="true">·</span>
        <Link to="/terms">Terms</Link>
      </nav>
      <p className="footer-copy">© 2026 Nate Emmert · Made with faith.</p>
      <p className="footer-privacy">
        Privacy: with consent, analytics may store masked IP-based location data (country/state/county/city) and returning visitor activity.
      </p>
    </footer>
  )
}

function PlatformButtons({ content }: { content: SiteContent }) {
  return (
    <div className="platform-buttons">
      <a href={SPOTIFY_SHOW_URL} target="_blank" rel="noreferrer" className="platform-btn spotify-btn">
        <SpotifyIcon />
        Listen on Spotify
      </a>
      <a href={YOUTUBE_URL} target="_blank" rel="noreferrer" className="platform-btn youtube-btn">
        <YouTubeIcon />
        YouTube
      </a>
      <a href={AMAZON_MUSIC_URL} target="_blank" rel="noreferrer" className="platform-btn amazon-btn">
        <AmazonMusicIcon />
        Amazon Music
      </a>
      <a href={FACEBOOK_URL} target="_blank" rel="noreferrer" className="platform-btn facebook-btn">
        <FacebookIcon />
        Facebook
      </a>
      <a href={APPLE_PODCASTS_URL} target="_blank" rel="noreferrer" className="platform-btn apple-btn">
        <img src="/images/apple-podcasts-badge.svg" alt="Listen on Apple Podcasts" className="apple-badge" />
      </a>
      {(content.customLinks ?? []).filter(l => l.placement === 'platforms').map(l => (
        <a key={l.id} href={l.url} target="_blank" rel="noreferrer" className="platform-btn custom-btn">
          {l.label}
        </a>
      ))}
    </div>
  )
}

function AboutSection({ content }: { content: SiteContent }) {
  return (
    <section className="section-about" aria-label="About the show">
      <div className="section-inner about-inner">
        <div className="about-photo">
          <img src={content.aboutPhotoUrl || '/images/nate-photo.jpeg'} alt="Nate Emmert" />
          <div className="about-photo-divider" aria-hidden="true" />
          <div className="about-nate-copy">
            <p className="eyebrow">About Nate</p>
            <div className="about-nate-rule" aria-hidden="true" />
            <p>{content.aboutNate}</p>
            <Link to="/episodes" className="about-nate-cta">Listen Now ↓</Link>
          </div>
        </div>
        <div className="about-text">
          <p className="eyebrow">About the Show</p>
          <h2>{content.aboutShowHeading}</h2>
          <p>{content.aboutShowP1}</p>
          <p>{content.aboutShowP2}</p>
          <div className="rule-divider" aria-hidden="true" />
          <img
            src={content.aboutVerseArtUrl || '/images/hebrews-4-12-verse-art.png'}
            alt="Hebrews 4:12 verse artwork"
            className="about-verse-art"
          />
        </div>
      </div>
    </section>
  )
}

function StudyGuideSection({ content }: { content: SiteContent }) {
  return (
    <section className="section-guide" aria-label="Companion study guide">
      <div className="section-inner guide-inner">
        <div className="guide-cover-art">
          <img
            src={content.seriesImageUrl || '/images/titus-cover.png'}
            alt={content.seriesTitle}
            className="guide-cover-img"
          />
        </div>
        <div className="guide-text">
          <p className="eyebrow">Free Download</p>
          <h2>{content.studyGuideTitle}</h2>
          <p>{content.studyGuideDescription}</p>
          <StudyDownloadForm />
          {content.studyGuideUrl && (
            <div className="guide-actions">
              <a
                href={content.studyGuideUrl}
                target="_blank"
                rel="noreferrer"
                className="btn-secondary"
              >
                Get Printed Copy on Amazon
              </a>
            </div>
          )}
        </div>
      </div>
    </section>
  )
}

function ContactSection({ content }: { content: SiteContent }) {
  return (
    <section className="section-contact" id="contact" aria-label="Contact form">
      <div className="section-inner contact-inner">
        <div className="contact-copy">
          <div className="contact-card">
            <p className="eyebrow">Get in Touch</p>
            <h2>Contact Nate</h2>

            <div className="contact-profile">
              <img
                src={content.contactPhotoUrl || '/images/nate-contact-photo.png'}
                alt="Nate"
                className="contact-profile-photo"
              />
              <div className="contact-profile-meta">
                <p className="contact-profile-name">Nate</p>
                <p className="contact-profile-role">Bible teacher · Lynchburg, VA</p>
              </div>
            </div>

            <blockquote className="contact-quote">
              <p>"I read every message - nothing blesses me more than hearing how God's Word is at work in your life."</p>
            </blockquote>

            <p className="contact-intro">
              Ask a Bible question, share a testimony, or request a topic for a future episode.
            </p>

            <div className="contact-points" aria-label="Contact response details">
              <div className="contact-point">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
                </svg>
                <span>I read every message personally</span>
              </div>
              <div className="contact-point">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <circle cx="12" cy="12" r="10" />
                  <polyline points="12 6 12 12 16 14" />
                </svg>
                <span>Response within 48 hours</span>
              </div>
            </div>

            <div className="contact-scripture">
              <p>
                "Your word is a lamp to my feet and a light to my path." -{' '}
                <span className="contact-scripture-ref">Psalm 119:105</span>
              </p>
            </div>
          </div>
        </div>
        <ContactForm />
      </div>
    </section>
  )
}

function PodcastHighlightsSection({ content }: { content: SiteContent }) {
  const links = content.podcastFeaturedLinks ?? []
  if (links.length === 0) return null

  return (
    <section className="section-resources" aria-label="Podcast highlights">
      <div className="section-inner">
        <h2 className="section-heading">
          <span className="ornament">✦</span> Podcast Highlights{' '}
          <span className="ornament">✦</span>
        </h2>
        <div className="resources-list">
          {links.map(link => {
            const hasRichContent = !!(link.embedUrl || (link.discussionQuestions ?? []).length > 0 || link.showNotes)
            const label = <>{link.episodeNumber ? `Ep. ${link.episodeNumber}: ` : ''}{link.title || link.url}</>
            // Use external link only when there's a url AND no rich detail-page content
            if (!hasRichContent && link.url) {
              return (
                <a key={link.id} href={link.url} target="_blank" rel="noreferrer" className="resource-link">
                  {label}
                </a>
              )
            }
            // Otherwise always route to the internal detail page
            return (
              <Link key={link.id} to={`/episodes/${link.id}`} className="resource-link">
                {label}
              </Link>
            )
          })}
        </div>
      </div>
    </section>
  )
}

function CustomResourcesSection({ content }: { content: SiteContent }) {
  const resources = (content.customLinks ?? []).filter(l => l.placement === 'resources')
  if (resources.length === 0) return null

  return (
    <section className="section-resources" aria-label="More resources">
      <div className="section-inner">
        <h2 className="section-heading">
          <span className="ornament">✦</span> More Resources{' '}
          <span className="ornament">✦</span>
        </h2>
        <div className="resources-list">
          {resources.map(resource => (
            <article key={resource.id} className="resource-download-card">
              <div className="resource-download-header">
                {resource.imageUrl && (
                  <img src={resource.imageUrl} alt={resource.label} className="resource-link-image" />
                )}
                <div className="resource-download-meta">
                  <span className="resource-link-label">{resource.label}</span>
                  {(resource.tags ?? []).length > 0 && (
                    <div className="resource-link-tags">{(resource.tags ?? []).join(', ')}</div>
                  )}
                </div>
              </div>
              <ResourceDownloadForm resourceId={resource.id} buttonText={`Download ${resource.label}`} />
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}

function CustomBlocksSection({ content }: { content: SiteContent }) {
  return (
    <>
      {(content.customBlocks ?? []).map(block => (
        <section key={block.id} className="section-custom-block" aria-label={block.heading}>
          <div className="section-inner custom-block-inner">
            <h2>{block.heading}</h2>
            <p>{block.body}</p>
          </div>
        </section>
      ))}
    </>
  )
}

function LandingPage({ content }: { content: SiteContent }) {
  return (
    <div className="site">
      <SiteHeader />

      {/* ── HERO ── */}
      <section className="hero" aria-label="Show introduction">
        <div className="hero-art">
          <div className="art-glow" aria-hidden="true" />
          <img
            src="/images/podcast-art.jpeg"
            alt="Verse by Verse with Nate podcast artwork"
            className="podcast-art"
          />
        </div>
        <div className="hero-text">
          <p className="eyebrow">{content.eyebrow}</p>
          <h1 className="hero-title">Verse by Verse</h1>
          <p className="with-nate">
            <span className="word-with">with </span>Nate
          </p>
          <div className="rule-divider" aria-hidden="true" />
          <p className="tagline">{content.heroTagline}</p>
          <div className="hero-ctas">
            <a
              href={SPOTIFY_SHOW_URL}
              target="_blank"
              rel="noreferrer"
              className="btn-primary"
            >
              <SpotifyIcon />
              Listen on Spotify
            </a>
            <Link to="/episodes" className="btn-secondary">Explore Episodes ↓</Link>
          </div>
        </div>
      </section>

      <section className="section-series" id="series" aria-label="Current series">
        <div className="section-inner">
          <h2 className="section-heading">
            <span className="ornament">✦</span> Current Series{' '}
            <span className="ornament">✦</span>
          </h2>
          <div className="series-grid">
            <article className="series-card">
              <img
                src={content.seriesImageUrl}
                alt={content.seriesTitle}
                className="series-art"
              />
              <div className="series-info">
                <p className="series-label">{content.seriesLabel}</p>
                <h3>{content.seriesTitle}</h3>
                <p>{content.seriesDescription}</p>
                <a
                  href={content.seriesListenUrl || SPOTIFY_SHOW_URL}
                  target="_blank"
                  rel="noreferrer"
                  className="btn-primary"
                >
                  <SpotifyIcon />
                  Listen to Series
                </a>
                <Link to="/resources" className="btn-secondary">View Study Resources</Link>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section className="section-home-jump" aria-label="Homepage navigation">
        <div className="section-inner">
          <div className="home-jump-head">
            <p className="eyebrow">Where to Next</p>
            <h2 className="section-heading">Choose the page you need.</h2>
          </div>
          <div className="home-jump-grid">
            <Link to="/episodes" className="home-jump-card">
              <h3>Episodes</h3>
              <p>Listen to latest episodes and platform links.</p>
            </Link>
            <Link to="/resources" className="home-jump-card">
              <h3>Resources</h3>
              <p>Study guide, links, and archived study resources.</p>
            </Link>
            <Link to="/questions" className="home-jump-card">
              <h3>Q&amp;A</h3>
              <p>Browse Bible questions and approved answers.</p>
            </Link>
            <Link to="/about" className="home-jump-card">
              <h3>About</h3>
              <p>Learn about Nate and the mission of the show.</p>
            </Link>
            <Link to="/contact" className="home-jump-card">
              <h3>Contact</h3>
              <p>Submit a Bible question, testimony, or topic.</p>
            </Link>
          </div>
        </div>
      </section>

      <SiteFooter content={content} />

      <AnalyticsConsentBanner />
    </div>
  )
}

function EpisodeDetailPage({ content }: { content: SiteContent }) {
  const { id } = useParams<{ id: string }>()
  const episode = (content.podcastFeaturedLinks ?? []).find(e => e.id === id)

  if (!episode) {
    return (
      <div className="site">
        <SiteHeader />
        <section className="section-player">
          <div className="section-inner" style={{ textAlign: 'center', padding: '4rem 1rem' }}>
            <h2>Episode not found</h2>
            <p>This episode highlight doesn't exist or may have been removed.</p>
            <Link to="/episodes" className="btn-primary" style={{ marginTop: '1.5rem', display: 'inline-block' }}>← Back to Episodes</Link>
          </div>
        </section>
        <SiteFooter content={content} />
        <AnalyticsConsentBanner />
      </div>
    )
  }

  const questions = episode.discussionQuestions ?? []

  return (
    <div className="site">
      <SiteHeader />
      <section className="section-episode-detail" aria-label={episode.title}>
        <div className="section-inner">
          <Link to="/episodes" className="episode-detail-back">← Back to Episodes</Link>

          {episode.episodeNumber && (
            <p className="episode-detail-number">Episode {episode.episodeNumber}</p>
          )}
          <h1 className="episode-detail-title">{episode.title}</h1>
          {episode.summary && <p className="episode-detail-summary">{episode.summary}</p>}

          {episode.embedUrl && (
            <div className="episode-detail-embed">
              <iframe
                src={episode.embedUrl}
                title={episode.title}
                width="100%"
                height="152"
                frameBorder="0"
                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
                loading="lazy"
              />
            </div>
          )}

          {episode.url && (
            <a href={episode.url} target="_blank" rel="noreferrer" className="btn-primary episode-detail-listen-btn">
              Listen on Podcast Platform →
            </a>
          )}

          {episode.showNotes && (
            <div className="episode-detail-show-notes">
              <h2 className="episode-detail-section-heading">Show Notes</h2>
              <p>{episode.showNotes}</p>
            </div>
          )}

          {questions.length > 0 && (
            <div className="episode-detail-questions">
              <h2 className="episode-detail-section-heading">Discussion Questions</h2>
              <ol className="episode-detail-questions-list">
                {questions.map((q, i) => (
                  <li key={i}>{q}</li>
                ))}
              </ol>
            </div>
          )}
        </div>
      </section>
      <SiteFooter content={content} />
      <AnalyticsConsentBanner />
    </div>
  )
}

function EpisodesPage({ content }: { content: SiteContent }) {
  return (
    <div className="site">
      <SiteHeader />
      <section className="section-player" aria-label="Podcast episodes">
        <div className="section-inner">
          <h2 className="section-heading">
            <span className="ornament">✦</span> Latest Episodes{' '}
            <span className="ornament">✦</span>
          </h2>
          <LatestEpisodesList />
          <PlatformButtons content={content} />
        </div>
      </section>
      <PodcastHighlightsSection content={content} />
      <SiteFooter content={content} />
      <AnalyticsConsentBanner />
    </div>
  )
}

function ResourcesPage({ content }: { content: SiteContent }) {
  const archivedSeries = content.archivedSeries ?? []

  return (
    <div className="site">
      <SiteHeader />
      <StudyGuideSection content={content} />
      <CustomResourcesSection content={content} />
      {archivedSeries.length > 0 && (
        <section className="section-resources" aria-label="Archived studies">
          <div className="section-inner">
            <h2 className="section-heading">
              <span className="ornament">✦</span> Archived Studies{' '}
              <span className="ornament">✦</span>
            </h2>
            <div className="resources-list">
              {archivedSeries.map(series => (
                <a
                  key={series.id}
                  href={series.listenUrl || SPOTIFY_SHOW_URL}
                  target="_blank"
                  rel="noreferrer"
                  className="resource-link"
                >
                  {series.title} {series.description ? `— ${series.description}` : ''}
                </a>
              ))}
            </div>
          </div>
        </section>
      )}
      <CustomBlocksSection content={content} />
      <SiteFooter content={content} />
      <AnalyticsConsentBanner />
    </div>
  )
}

function AboutPage({ content }: { content: SiteContent }) {
  return (
    <div className="site">
      <SiteHeader />
      <AboutSection content={content} />
      <SiteFooter content={content} />
      <AnalyticsConsentBanner />
    </div>
  )
}

function ContactPage({ content }: { content: SiteContent }) {
  return (
    <div className="site">
      <SiteHeader />
      <ContactSection content={content} />
      <SiteFooter content={content} />
      <AnalyticsConsentBanner />
    </div>
  )
}

function StartHerePage({ content }: { content: SiteContent }) {
  return (
    <main className="thanks-page" aria-label="Start Here">
      <div className="thanks-card" style={{ maxWidth: '980px', width: '100%' }}>
        <p className="eyebrow">Verse by Verse with Nate</p>
        <h1>{content.startHereHeading}</h1>
        <p>
          {content.startHereIntro}
        </p>

        <div className="start-grid" style={{ marginTop: '1.25rem' }}>
          <article className="start-card">
            <h3>{content.startHereStep1Title}</h3>
            <p>{content.startHereStep1Body}</p>
            <Link to="/episodes" className="btn-secondary">{content.startHereStep1Cta}</Link>
          </article>
          <article className="start-card">
            <h3>{content.startHereStep2Title}</h3>
            <p>{content.startHereStep2Body}</p>
            <a href="/#qa" className="btn-secondary">{content.startHereStep2Cta}</a>
          </article>
          <article className="start-card">
            <h3>{content.startHereStep3Title}</h3>
            <p>{content.startHereStep3Body}</p>
            <Link to="/contact" className="btn-primary">{content.startHereStep3Cta}</Link>
          </article>
        </div>

        <div style={{ marginTop: '1.4rem' }}>
          <Link to="/" className="btn-secondary">Back to Site</Link>
        </div>
      </div>
    </main>
  )
}

function ThankYouPage() {
  const navigate = useNavigate()
  const [secondsLeft, setSecondsLeft] = useState(15)

  useEffect(() => {
    const timeoutId = window.setTimeout(() => {
      navigate('/')
    }, 15000)

    const intervalId = window.setInterval(() => {
      setSecondsLeft(s => (s > 0 ? s - 1 : 0))
    }, 1000)

    return () => {
      window.clearTimeout(timeoutId)
      window.clearInterval(intervalId)
    }
  }, [navigate])

  return (
    <main className="thanks-page" aria-label="Thank you">
      <div className="thanks-card">
        <p className="eyebrow">Message Received</p>
        <h1>Thank You</h1>
        <p>
          Your message was sent successfully. We appreciate you reaching out and will get back to you soon.
        </p>
        <p className="thanks-countdown">Returning to the main site in {secondsLeft} seconds...</p>
        <button type="button" className="btn-primary" onClick={() => navigate('/')}>
          Go Back Now
        </button>
      </div>
    </main>
  )
}

function SubscribePage() {
  const navigate = useNavigate()
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')
  const [email, setEmail] = useState('')
  const [honey, setHoney] = useState('')
  const [status, setStatus] = useState<'idle' | 'submitting' | 'error'>('idle')
  const [errorMsg, setErrorMsg] = useState('')

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setStatus('submitting')
    setErrorMsg('')

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          firstName,
          lastName,
          email,
          messageType: 'general',
          message: 'Newsletter signup from subscribe page',
          subscribe: true,
          _honey: honey,
        }),
      })

      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setErrorMsg((data as { message?: string }).message ?? 'Something went wrong. Please try again.')
        setStatus('error')
        return
      }

      navigate('/subscribe/thanks')
    } catch {
      setErrorMsg('Could not connect. Please try again later.')
      setStatus('error')
    }
  }

  return (
    <main className="thanks-page" aria-label="Subscribe">
      <div className="thanks-card subscribe-card">
        <p className="eyebrow">Verse by Verse with Nate</p>
        <h1>Subscribe for Updates</h1>
        <p>
          Get ministry updates and new episode announcements by email.
        </p>

        <form className="contact-form subscribe-form" onSubmit={handleSubmit} noValidate>
          <input
            type="text"
            className="contact-honeypot"
            tabIndex={-1}
            autoComplete="off"
            aria-hidden="true"
            value={honey}
            onChange={e => setHoney(e.target.value)}
          />
          <label>
            First Name
            <input
              type="text"
              name="firstName"
              required
              autoComplete="given-name"
              value={firstName}
              onChange={e => setFirstName(e.target.value)}
            />
          </label>
          <label>
            Last Name
            <input
              type="text"
              name="lastName"
              required
              autoComplete="family-name"
              value={lastName}
              onChange={e => setLastName(e.target.value)}
            />
          </label>
          <label>
            Email
            <input
              type="email"
              name="email"
              required
              autoComplete="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
            />
          </label>

          {status === 'error' && <p className="contact-error">{errorMsg}</p>}

          <button type="submit" className="btn-primary" disabled={status === 'submitting'}>
            {status === 'submitting' ? 'Subscribing…' : 'Subscribe'}
          </button>
          <Link to="/" className="btn-secondary">Back to Site</Link>
        </form>
      </div>
    </main>
  )
}

function SubscribeThankYouPage() {
  return (
    <main className="thanks-page" aria-label="Subscription confirmed">
      <div className="thanks-card">
        <p className="eyebrow">Verse by Verse with Nate</p>
        <h1>You are subscribed</h1>
        <p>
          Thank you for subscribing. You will receive future ministry updates and episode announcements.
        </p>
        <Link to="/" className="btn-primary">Back to Site</Link>
      </div>
    </main>
  )
}

function LegalPage({ title, body }: { title: string; body: string[] }) {
  return (
    <main className="thanks-page" aria-label={title}>
      <div className="thanks-card">
        <p className="eyebrow">Verse by Verse with Nate</p>
        <h1>{title}</h1>
        {body.map((line, idx) => (
          <p key={`${title}-${idx}`}>{line}</p>
        ))}
        <Link to="/" className="btn-primary">Back to Site</Link>
      </div>
    </main>
  )
}

function AdminShell({ content, onSave }: { content: SiteContent; onSave: (c: SiteContent) => void }) {
  const [status, setStatus] = useState<'checking' | 'authenticated' | 'unauthenticated' | 'misconfigured'>('checking')
  const [password, setPassword] = useState('')
  const [errorMsg, setErrorMsg] = useState('')
  const [submitting, setSubmitting] = useState(false)

  useEffect(() => {
    fetch('/api/admin-auth/status')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Status failed'))))
      .then(data => {
        const next = data as { authenticated?: boolean; configured?: boolean }
        if (next.configured === false) {
          setStatus('misconfigured')
          return
        }
        setStatus(next.authenticated ? 'authenticated' : 'unauthenticated')
      })
      .catch(() => {
        setStatus('unauthenticated')
      })
  }, [])

  async function handleLogin(e: React.FormEvent) {
    e.preventDefault()
    setSubmitting(true)
    setErrorMsg('')
    try {
      const res = await fetch('/api/admin-auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ password }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setErrorMsg((data as { message?: string }).message ?? 'Login failed.')
        setSubmitting(false)
        return
      }
      setStatus('authenticated')
      setPassword('')
    } catch {
      setErrorMsg('Login failed.')
    } finally {
      setSubmitting(false)
    }
  }

  async function handleLogout() {
    try {
      await fetch('/api/admin-auth/logout', { method: 'POST' })
    } finally {
      setStatus('unauthenticated')
    }
  }

  if (status === 'authenticated') {
    return <AdminPage content={content} onSave={onSave} onLogout={handleLogout} />
  }

  return (
    <main className="admin-auth-page" aria-label="Admin sign in">
      <div className="admin-auth-card">
        <p className="eyebrow">Admin Access</p>
        <h1>{status === 'misconfigured' ? 'Admin Not Configured' : 'Sign in to Admin'}</h1>
        {status === 'checking' && <p className="admin-auth-note">Checking session...</p>}
        {status === 'misconfigured' && (
          <p className="admin-auth-note">Set the ADMIN_PASSWORD environment variable on the server to enable admin login.</p>
        )}
        {status === 'unauthenticated' && (
          <form className="admin-auth-form" onSubmit={handleLogin}>
            <label>
              Password
              <input
                type="password"
                value={password}
                onChange={e => setPassword(e.target.value)}
                autoComplete="current-password"
                required
              />
            </label>
            {errorMsg && <p className="admin-auth-error">{errorMsg}</p>}
            <button type="submit" className="btn-primary" disabled={submitting}>
              {submitting ? 'Signing In…' : 'Sign In'}
            </button>
            <Link to="/" className="btn-secondary">Back to Site</Link>
          </form>
        )}
      </div>
    </main>
  )
}

function QuestionsPage() {
  return (
    <main className="thanks-page" aria-label="Questions and Answers">
      <div className="thanks-card" style={{ maxWidth: '1000px', width: '100%' }}>
        <QASection />
        <div style={{ marginTop: '2rem', textAlign: 'center' }}>
          <Link to="/" className="btn-secondary">Back to Site</Link>
        </div>
      </div>
    </main>
  )
}

function PreviewPage() {
  const [content, setContent] = useState<SiteContent | null>(null)
  const [status, setStatus] = useState<'loading' | 'ready' | 'error'>('loading')

  useEffect(() => {
    fetch('/api/admin-content?source=draft')
      .then(r => (r.ok ? r.json() : Promise.reject(new Error('Preview failed'))))
      .then(data => {
        if (data?.siteContent) {
          setContent({ ...DEFAULTS, ...data.siteContent })
          setStatus('ready')
          return
        }
        setStatus('error')
      })
      .catch(() => {
        setStatus('error')
      })
  }, [])

  if (status === 'loading') {
    return (
      <main className="thanks-page" aria-label="Draft preview loading">
        <div className="thanks-card">
          <p className="eyebrow">Admin Preview</p>
          <h1>Loading draft preview...</h1>
          <p>Only signed-in admins can view this page.</p>
        </div>
      </main>
    )
  }

  if (status === 'error' || !content) {
    return (
      <main className="thanks-page" aria-label="Draft preview unavailable">
        <div className="thanks-card">
          <p className="eyebrow">Admin Preview</p>
          <h1>Draft preview unavailable</h1>
          <p>Sign into admin and save a draft first.</p>
          <Link to="/admin" className="btn-primary">Back to Admin</Link>
        </div>
      </main>
    )
  }

  return <LandingPage content={content} />
}

export default function App() {
  const [content, setContent] = useState<SiteContent>(DEFAULTS)
  const navigate = useNavigate()
  const location = useLocation()

  useEffect(() => {
    fetch('/api/admin-content')
      .then(r => (r.ok ? r.json() : null))
      .then(data => {
        if (data?.siteContent) {
          setContent(c => ({ ...c, ...data.siteContent }))
        }
      })
      .catch(() => {})
  }, [])

  useEffect(() => {
    if (location.pathname !== '/' || !location.hash) return

    const legacyHashRouteMap: { [key: string]: string } = {
      '#listen': '/episodes',
      '#about': '/about',
      '#qa': '/questions',
      '#contact': '/contact',
      '#series': '/resources',
      '#archives': '/resources',
      '#resources': '/resources',
      '#start-here': '/start-here',
    }

    const redirectPath = legacyHashRouteMap[location.hash.toLowerCase()]
    if (!redirectPath) return

    navigate(redirectPath, { replace: true })
  }, [location.hash, location.pathname, navigate])

  useEffect(() => {
    const seo = content.seo ?? DEFAULTS.seo

    const ensureMeta = (selector: string, createAttrs: { [key: string]: string }) => {
      const found = document.head.querySelector(selector)
      if (found) return found as HTMLMetaElement
      const meta = document.createElement('meta')
      Object.entries(createAttrs).forEach(([key, value]) => {
        meta.setAttribute(key, value)
      })
      document.head.appendChild(meta)
      return meta
    }

    const ensureCanonical = () => {
      const found = document.head.querySelector('link[rel="canonical"]')
      if (found) return found as HTMLLinkElement
      const link = document.createElement('link')
      link.setAttribute('rel', 'canonical')
      document.head.appendChild(link)
      return link
    }

    document.title = seo.title || DEFAULTS.seo.title
    ensureMeta('meta[name="description"]', { name: 'description' }).setAttribute('content', seo.description || DEFAULTS.seo.description)
    ensureMeta('meta[name="robots"]', { name: 'robots' }).setAttribute('content', seo.robotsPolicy || DEFAULTS.seo.robotsPolicy)
    ensureMeta('meta[property="og:title"]', { property: 'og:title' }).setAttribute('content', seo.ogTitle || seo.title || DEFAULTS.seo.ogTitle)
    ensureMeta('meta[property="og:description"]', { property: 'og:description' }).setAttribute('content', seo.ogDescription || seo.description || DEFAULTS.seo.ogDescription)
    ensureMeta('meta[property="og:image"]', { property: 'og:image' }).setAttribute('content', seo.ogImage || DEFAULTS.seo.ogImage)
    ensureMeta('meta[property="og:url"]', { property: 'og:url' }).setAttribute('content', seo.canonicalUrl || DEFAULTS.seo.canonicalUrl)
    ensureCanonical().setAttribute('href', seo.canonicalUrl || DEFAULTS.seo.canonicalUrl)
  }, [content])

  return (
    <>
      <Routes>
        <Route path="/" element={<LandingPage content={content} />} />
      <Route path="/start-here" element={<StartHerePage content={content} />} />
      <Route path="/episodes" element={<EpisodesPage content={content} />} />
      <Route path="/episodes/:id" element={<EpisodeDetailPage content={content} />} />
      <Route path="/resources" element={<ResourcesPage content={content} />} />
      <Route path="/about" element={<AboutPage content={content} />} />
      <Route path="/contact" element={<ContactPage content={content} />} />
      <Route path="/questions" element={<QuestionsPage />} />
      <Route path="/thanks" element={<ThankYouPage />} />
      <Route path="/subscribe" element={<SubscribePage />} />
      <Route path="/subscribe/thanks" element={<SubscribeThankYouPage />} />
      <Route path="/admin" element={<AdminShell content={content} onSave={setContent} />} />
      <Route path="/preview" element={<PreviewPage />} />
      <Route
        path="/privacy"
        element={(
          <LegalPage
            title={content.legal?.privacyTitle ?? DEFAULTS.legal.privacyTitle}
            body={content.legal?.privacyBody ?? DEFAULTS.legal.privacyBody}
          />
        )}
      />
      <Route
        path="/terms"
        element={(
          <LegalPage
            title={content.legal?.termsTitle ?? DEFAULTS.legal.termsTitle}
            body={content.legal?.termsBody ?? DEFAULTS.legal.termsBody}
          />
        )}
      />
    </Routes>
    <BackToTopButton />
  </>
)
}

function BackToTopButton() {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 320)
    window.addEventListener('scroll', onScroll)
    onScroll()
    return () => window.removeEventListener('scroll', onScroll)
  }, [])

  if (!visible) return null

  return (
    <button
      type="button"
      className="back-to-top"
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      aria-label="Scroll back to top"
    >
      ↑ Top
    </button>
  )
}