import React from 'react'
import { useParams, Link } from 'react-router-dom'
import { useContentItem } from '../hooks/useContent'
import { formatDate } from '../utils/formatDate'
import SEOHead from '../components/SEOHead'

export default function KniepunktIssue() {
  const { slug } = useParams()
  const issue = useContentItem('kniepunkt', slug)

  if (!issue) {
    return (
      <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
        <SEOHead title="Kniepunkt-Ausgabe nicht gefunden" description="Die angeforderte Kniepunkt-Ausgabe wurde nicht gefunden." noindex url={`/kniepunkt/${slug}`} />
        <div className="app-container" style={{ textAlign: 'center' }}>
          <h1>Ausgabe nicht gefunden</h1>
          <p style={{ color: 'var(--text-secondary)' }}>Diese Kniepunkt-Ausgabe existiert nicht.</p>
          <Link to="/kniepunkt" className="secondary-button">Zurück zur Übersicht</Link>
        </div>
      </main>
    )
  }

  if (!issue.body) {
    const loadFailed = issue.detailError
    return (
      <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
        <SEOHead title={issue.title} description={issue.summary || issue.title} url={`/kniepunkt/${issue.slug}`} type="article" image={issue.image} />
        <div className="app-container" style={{ textAlign: 'center' }}>
          <p role={loadFailed ? 'alert' : 'status'} aria-live={loadFailed ? 'assertive' : 'polite'}>
            {loadFailed ? 'Die Kniepunkt-Ausgabe konnte nicht geladen werden.' : 'Kniepunkt-Ausgabe wird geladen …'}
          </p>
        </div>
      </main>
    )
  }

  return (
    <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
      <SEOHead title={issue.title} description={issue.summary || issue.title} url={`/kniepunkt/${issue.slug}`} type="article" image={issue.image} />
      <div className="app-container" style={{ maxWidth: '700px' }}>
        <Link to="/kniepunkt" style={{ color: 'var(--text-secondary)', fontSize: '0.9rem', marginBottom: '24px', display: 'inline-block' }}>&larr; Alle Ausgaben</Link>
        <h1 style={{ marginBottom: '12px' }}>{issue.title}</h1>
        <p style={{ color: 'var(--text-secondary)', marginBottom: '40px' }}>{formatDate(issue.date)}</p>
        {issue.image && (
          <div style={{ marginBottom: '40px', borderRadius: '12px', overflow: 'hidden', boxShadow: '0 8px 24px rgba(0,0,0,0.1)' }}>
            <img src={issue.image} alt={issue.title} style={{ width: '100%', height: 'auto', display: 'block' }} />
          </div>
        )}
        <div className="content-body" dangerouslySetInnerHTML={{ __html: issue.body }} />
      </div>
    </main>
  )
}