import type { Metadata } from 'next'
import { notFound } from 'next/navigation'
import Link from 'next/link'
import { getAllArticles, getArticleBySlug } from '@/lib/articles'

export function generateStaticParams() {
  return getAllArticles().map((a) => ({ slug: a.slug }))
}

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
  const article = getArticleBySlug(params.slug)
  if (!article) return {}
  return {
    title: article.title,
    description: article.excerpt,
  }
}

const categoryColor: Record<string, string> = {
  Métier:    'score-aaa',
  Formation: 'score-aa',
  Marché:    'score-a',
}

function formatDate(iso: string) {
  return new Date(iso).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
}

export default function ArticlePage({ params }: { params: { slug: string } }) {
  const article = getArticleBySlug(params.slug)
  if (!article) notFound()

  const allArticles = getAllArticles().filter((a) => a.slug !== article.slug).slice(0, 3)

  return (
    <main>
      <div className="article-wrap">

        {/* Fil d'Ariane */}
        <div className="master-detail-breadcrumb">
          <Link href="/blog">← Retour aux publications</Link>
          <span>·</span>
          <span>{article.category}</span>
        </div>

        <div className="article-layout">

          {/* Contenu principal */}
          <article className="article-main">

            {/* En-tête */}
            <header className="article-header">
              <span className={`score-pill ${categoryColor[article.category] ?? 'score-a'}`}
                style={{ fontSize: '0.65rem', padding: '0.2rem 0.6rem', marginBottom: '1.25rem', display: 'inline-block' }}>
                {article.category}
              </span>
              <h1 className="article-title">{article.title}</h1>
              <p className="article-excerpt">{article.excerpt}</p>
              <div className="article-meta">
                <span>{article.author}</span>
                <span className="article-meta-sep">·</span>
                <span>{formatDate(article.date)}</span>
                <span className="article-meta-sep">·</span>
                <span>{article.readTime} de lecture</span>
              </div>
            </header>

            {/* Corps de l'article */}
            <div className="article-body">
              {article.sections.map((section, i) => (
                <div key={i} className="article-section">
                  {section.title && <h2 className="article-section-title">{section.title}</h2>}
                  {section.paragraphs.map((para, j) => (
                    <p key={j} className="article-paragraph">{para}</p>
                  ))}
                </div>
              ))}
            </div>
          </article>

          {/* Colonne latérale */}
          <aside className="article-aside">

            {/* À lire aussi */}
            {allArticles.length > 0 && (
              <div className="article-related">
                <div className="article-related-title">À lire aussi</div>
                {allArticles.map((a) => (
                  <Link key={a.slug} href={`/blog/${a.slug}/`} className="article-related-item">
                    <span className={`score-pill ${categoryColor[a.category] ?? 'score-a'}`}
                      style={{ fontSize: '0.55rem', padding: '0.1rem 0.4rem' }}>
                      {a.category}
                    </span>
                    <span className="article-related-name">{a.title}</span>
                    <span className="article-related-read">{a.readTime}</span>
                  </Link>
                ))}
              </div>
            )}

            {/* Lien classement */}
            <div className="article-aside-cta">
              <div className="article-aside-cta-title">Comparer les masters</div>
              <p className="article-aside-cta-desc">Consultez notre classement fondé sur les données alumni LinkedIn.</p>
              <Link href="/classement" className="btn-primary" style={{ display: 'block', textAlign: 'center', fontSize: '0.75rem' }}>
                Voir le classement →
              </Link>
            </div>
          </aside>
        </div>
      </div>
    </main>
  )
}