import React from 'react'
import { useContent } from '../hooks/useContent'
import { formatDate } from '../utils/formatDate'
import { ExternalLink } from 'lucide-react'
import SEOHead from '../components/SEOHead'

export default function Podcast() {
  const { items: allEpisodes } = useContent('podcast', { visibility: 'all', pageSize: 100 })

  // Group: own show "Almost Intelligent" vs. guest appearances vs. other shows (Einfachbahn-Impulse)
  const almostIntelligent = allEpisodes.filter(ep => !ep.role || ep.show === 'Almost Intelligent')
  const guestAppearances = allEpisodes.filter(ep => ep.role === 'guest')
  const otherShows = allEpisodes.filter(ep => ep.role === 'host' && ep.show !== 'Almost Intelligent')

  return (
    <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
      <SEOHead title="Podcast" description="Podcasts, Gastauftritte und Gespräche von und mit Dr. André Knie über KI, Transformation und Leadership." url="/podcast" />
      <div className="app-container" style={{ maxWidth: '800px', margin: '0 auto' }}>
        <div className="section-header">
          <h1 className="section-title"><span className="text-gradient">Podcast</span></h1>
          <p className="section-subtitle">Eigener Podcast, Gastauftritte und mehr — zu KI, Transformation und Leadership.</p>
        </div>

        {/* Almost Intelligent */}
        {almostIntelligent.length > 0 && (
          <section style={{ marginBottom: '60px' }}>
            <h2 style={{ marginBottom: '8px' }}>Almost Intelligent</h2>
            <p style={{ color: 'var(--text-secondary)', marginBottom: '24px' }}>14-tägiger KI-Podcast. Die Brücke zwischen künstlicher und natürlicher Intelligenz.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              {almostIntelligent.map(ep => (
                <EpisodeCard key={ep.id || ep.slug} ep={ep} />
              ))}
            </div>
          </section>
        )}

        {/* Gastauftritte */}
        {guestAppearances.length > 0 && (
          <section style={{ marginBottom: '60px' }}>
            <h2 style={{ marginBottom: '8px' }}>Gastauftritte</h2>
            <p style={{ color: 'var(--text-secondary)', marginBottom: '24px' }}>Einladungen zu anderen Podcasts und Formaten.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              {guestAppearances.map(ep => (
                <EpisodeCard key={ep.id || ep.slug} ep={ep} showHost />
              ))}
            </div>
          </section>
        )}

        {/* Einfachbahn-Impulse / andere eigene Shows */}
        {otherShows.length > 0 && (
          <section style={{ marginBottom: '60px' }}>
            <h2 style={{ marginBottom: '8px' }}>Weitere Formate</h2>
            <p style={{ color: 'var(--text-secondary)', marginBottom: '24px' }}>Interne und spezialisierte Podcast-Reihen.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              {otherShows.map(ep => (
                <EpisodeCard key={ep.id || ep.slug} ep={ep} showHost />
              ))}
            </div>
          </section>
        )}

        {allEpisodes.length === 0 && <p style={{ textAlign: 'center', color: 'var(--text-secondary)' }}>Noch keine Episoden veröffentlicht.</p>}
      </div>
    </main>
  )
}

function EpisodeCard({ ep, showHost = false }) {
  const allLinks = { ...ep.external_links, ...ep.links }
  const linkEntries = Object.entries(allLinks || {}).filter(([, url]) => url)

  return (
    <div className="glass-panel" style={{ padding: '24px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', flexWrap: 'wrap', gap: '4px' }}>
        <h3 style={{ marginBottom: '4px' }}>{ep.title}</h3>
        {ep.show && showHost && <span style={{ color: 'var(--accent-color)', fontSize: '0.8rem', fontWeight: 'var(--font-weight-semibold)' }}>{ep.show}</span>}
      </div>
      <p style={{ color: 'var(--text-secondary)', margin: '0 0 8px', fontSize: '0.9rem' }}>
        {formatDate(ep.date)} {ep.host && showHost && `· ${ep.host}`} {ep.duration && `· ${ep.duration}`}
      </p>
      {ep.description && <p style={{ color: 'var(--text-secondary)', margin: '0 0 12px', lineHeight: 1.6 }}>{ep.description}</p>}
      {ep.summary && !ep.description && <p style={{ color: 'var(--text-secondary)', margin: '0 0 12px', lineHeight: 1.6 }}>{ep.summary}</p>}
      {linkEntries.length > 0 && (
        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
          {linkEntries.map(([name, url]) => (
            <a key={name} href={url} target="_blank" rel="noopener noreferrer" className="secondary-button" style={{ padding: '8px 14px', fontSize: '0.8rem', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
              <ExternalLink size={14} /> {name.charAt(0).toUpperCase() + name.slice(1)}
            </a>
          ))}
        </div>
      )}
    </div>
  )
}