import { notFound } from 'next/navigation'
import Link from 'next/link'
import { Flag, Sparkles, BookOpen, Clock } from 'lucide-react'
import { format } from 'date-fns'
import { fr } from 'date-fns/locale'
import prisma from '@/lib/prisma'
import { processNoteHtmlForPublish } from '@/lib/publish/process-note-html'
import { REWRITE_SHARED_CSS, KATEX_PUBLISH_CSS } from '@/lib/publish/shared-css'

export const revalidate = 60

async function getNotebookSite(slug: string) {
  const site = await prisma.notebookSite.findUnique({
    where: { slug },
    include: {
      notebook: {
        select: {
          id: true,
          name: true,
          icon: true,
          user: { select: { name: true, image: true } },
          notes: {
            select: { id: true, title: true, content: true, order: true, updatedAt: true },
            where: { trashedAt: null, isArchived: false },
            orderBy: { order: 'asc' },
          },
        },
      },
    },
  })
  if (!site || !site.isPublic) return null
  return site
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const site = await getNotebookSite(slug)
  if (!site) return { title: 'Site introuvable — Memento' }
  return {
    title: `${site.notebook.name} — Memento`,
    description: site.description || `Carnet publié sur Memento`,
    openGraph: { title: site.notebook.name, description: site.description || '' },
  }
}

function wordCount(html: string) {
  return (html || '').replace(/<[^>]+>/g, ' ').trim().split(/\s+/).filter(Boolean).length
}
function readingTime(html: string) {
  return Math.max(1, Math.ceil(wordCount(html) / 200))
}
function preview(html: string, len = 140) {
  return (html || '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim().slice(0, len)
}

export default async function NotebookSitePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const site = await getNotebookSite(slug)
  if (!site) notFound()

  let selectedIds: string[] = []
  try { selectedIds = JSON.parse(site.selectedNoteIds) } catch {}

  const allNotes = site.notebook.notes
  const orderedNotes = selectedIds.length > 0
    ? selectedIds.map(id => allNotes.find(n => n.id === id)).filter(Boolean) as typeof allNotes
    : allNotes

  const notebook = site.notebook
  const totalWc = orderedNotes.reduce((s, n) => s + wordCount(n.content || ''), 0)
  const totalRt = Math.max(1, Math.ceil(totalWc / 200))

  return (
    <>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
      <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Source+Serif+4:opsz,wght@8..60,300..600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />

      {/* ── NAV ── */}
      <nav className="cs-nav">
        <Link href="/" className="cs-nav-brand">Memento</Link>
        <div className="cs-nav-right">
          <span className="cs-nav-badge"><Sparkles size={10} /> Site publié</span>
          <a href={`/c/${slug}/report`} className="cs-nav-report"><Flag size={11} /> Signaler</a>
        </div>
      </nav>

      {/* ── HERO ── */}
      <header className="cs-hero">
        <div className="cs-hero-inner">
          {notebook.icon && <div className="cs-hero-icon">{notebook.icon}</div>}
          <div className="cs-hero-label">CARNET · {orderedNotes.length} NOTES · {totalRt} MIN</div>
          <h1 className="cs-hero-title">{notebook.name}</h1>
          {site.description && <p className="cs-hero-desc">{site.description}</p>}
          {notebook.user?.name && (
            <div className="cs-hero-author">
              {notebook.user.image && <img src={notebook.user.image} alt="" className="cs-hero-avatar" />}
              <span>par <strong>{notebook.user.name}</strong></span>
            </div>
          )}
        </div>
      </header>

      {/* ── TABLE DES MATIÈRES ── */}
      <section className="cs-toc-section">
        <div className="cs-toc-inner">
          <p className="cs-toc-label">TABLE DES MATIÈRES</p>
          <div className="cs-toc-grid">
            {orderedNotes.map((note, i) => (
              <a key={note.id} href={`#note-${note.id}`} className="cs-toc-card">
                <span className="cs-toc-num">{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <div className="cs-toc-card-title">{note.title || 'Sans titre'}</div>
                  <div className="cs-toc-card-preview">{preview(note.content || '')}</div>
                  <div className="cs-toc-card-rt"><Clock size={10} /> {readingTime(note.content || '')} min</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ── NOTES ── */}
      <main className="cs-main">
        <aside className="cs-sidebar">
          <p className="cs-sidebar-label">NAVIGATION</p>
          {orderedNotes.map((note, i) => (
            <a key={note.id} href={`#note-${note.id}`} className="cs-sidebar-link">
              <span className="cs-sidebar-num">{i + 1}</span>
              <span className="cs-sidebar-title">{note.title || 'Sans titre'}</span>
            </a>
          ))}
        </aside>

        <div className="cs-articles">
          {orderedNotes.map((note, i) => {
            const bodyHtml = processNoteHtmlForPublish(note.content || '')
            const rt = readingTime(note.content || '')
            return (
              <article key={note.id} id={`note-${note.id}`} className="cs-article">
                <div className="cs-article-meta">
                  <span className="cs-article-num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="cs-article-rt"><Clock size={10} /> {rt} min de lecture</span>
                </div>
                <h2 className="cs-article-title">{note.title || 'Sans titre'}</h2>
                <div
                  className="cs-article-body pub-article pub-rewrite-body"
                  dir="auto"
                  dangerouslySetInnerHTML={{ __html: bodyHtml }}
                />
              </article>
            )
          })}
        </div>
      </main>

      {/* ── FOOTER ── */}
      <footer className="cs-footer">
        <div className="cs-footer-inner">
          <span>Publié avec <Link href="/" className="cs-footer-brand">Memento</Link></span>
          <a href={`/c/${slug}/report`} className="cs-footer-report"><Flag size={11} /> Signaler ce contenu</a>
        </div>
      </footer>

      <style>{`
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body { background: #fff; color: #111; font-family: 'Inter', system-ui, sans-serif; }

        /* ── NAV ── */
        .cs-nav {
          position: sticky; top: 0; z-index: 50;
          background: #111; color: #fff;
          display: flex; align-items: center; justify-content: space-between;
          padding: 0 32px; height: 52px;
        }
        .cs-nav-brand {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: 17px; font-weight: 900; letter-spacing: .04em;
          color: #fff; text-decoration: none;
        }
        .cs-nav-right { display: flex; align-items: center; gap: 16px; }
        .cs-nav-badge {
          display: flex; align-items: center; gap: 4px;
          font-size: 10px; font-weight: 700; letter-spacing: .12em;
          text-transform: uppercase; color: #f5c96a;
        }
        .cs-nav-report {
          display: flex; align-items: center; gap: 4px;
          font-size: 11px; color: rgba(255,255,255,.4); text-decoration: none;
        }
        .cs-nav-report:hover { color: rgba(255,255,255,.7); }

        /* ── HERO ── */
        .cs-hero {
          background: #111; color: #fff;
          padding: 72px 32px 80px; text-align: center;
        }
        .cs-hero-inner { max-width: 780px; margin: 0 auto; }
        .cs-hero-icon { font-size: 48px; margin-bottom: 20px; line-height: 1; }
        .cs-hero-label {
          font-size: 11px; font-weight: 700; letter-spacing: .22em;
          text-transform: uppercase; color: #f5c96a; margin-bottom: 24px;
        }
        .cs-hero-title {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: clamp(36px, 6vw, 66px);
          font-weight: 900; line-height: 1.08; letter-spacing: -.02em;
          margin-bottom: 24px;
        }
        .cs-hero-desc {
          font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.65);
          max-width: 600px; margin: 0 auto 28px;
        }
        .cs-hero-author {
          display: inline-flex; align-items: center; gap: 10px;
          font-size: 13px; color: rgba(255,255,255,.5);
        }
        .cs-hero-avatar {
          width: 28px; height: 28px; border-radius: 50%;
          border: 2px solid rgba(255,255,255,.2); object-fit: cover;
        }

        /* ── TABLE DES MATIÈRES ── */
        .cs-toc-section { background: #f8f8f6; border-bottom: 1px solid #e8e8e4; padding: 56px 32px; }
        .cs-toc-inner { max-width: 1040px; margin: 0 auto; }
        .cs-toc-label {
          font-size: 10px; font-weight: 700; letter-spacing: .2em;
          color: #aaa; text-transform: uppercase; margin-bottom: 24px;
        }
        .cs-toc-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 16px;
        }
        .cs-toc-card {
          display: flex; gap: 16px; align-items: flex-start;
          background: #fff; border: 1px solid #e8e8e4;
          border-radius: 12px; padding: 20px 22px;
          text-decoration: none; color: inherit;
          transition: border-color .15s, box-shadow .15s;
        }
        .cs-toc-card:hover {
          border-color: #111;
          box-shadow: 0 4px 20px rgba(0,0,0,.07);
        }
        .cs-toc-num {
          font-size: 11px; font-weight: 700; color: #f5c96a;
          background: #111; border-radius: 6px;
          padding: 4px 7px; line-height: 1; flex-shrink: 0; margin-top: 2px;
        }
        .cs-toc-card-title { font-size: 14px; font-weight: 700; color: #111; line-height: 1.35; margin-bottom: 6px; }
        .cs-toc-card-preview { font-size: 12px; color: #777; line-height: 1.5; margin-bottom: 8px; }
        .cs-toc-card-rt {
          display: flex; align-items: center; gap: 4px;
          font-size: 10px; color: #bbb; font-weight: 500;
        }

        /* ── LAYOUT PRINCIPAL ── */
        .cs-main {
          max-width: 1200px; margin: 0 auto;
          display: grid; grid-template-columns: 260px 1fr;
          gap: 0; min-height: 60vh;
        }
        @media (max-width: 820px) { .cs-main { grid-template-columns: 1fr; } }

        /* ── SIDEBAR ── */
        .cs-sidebar {
          padding: 48px 24px 48px 32px;
          border-right: 1px solid #f0f0ee;
          position: sticky; top: 52px;
          height: calc(100vh - 52px); overflow-y: auto;
        }
        @media (max-width: 820px) { .cs-sidebar { display: none; } }
        .cs-sidebar-label {
          font-size: 9px; font-weight: 700; letter-spacing: .2em;
          color: #bbb; text-transform: uppercase; margin-bottom: 16px;
          padding-bottom: 12px; border-bottom: 1px solid #f0f0ee;
        }
        .cs-sidebar-link {
          display: flex; align-items: flex-start; gap: 10px;
          padding: 8px 10px; border-radius: 8px; margin-bottom: 2px;
          text-decoration: none; color: #555; font-size: 12.5px; line-height: 1.45;
          transition: background .12s, color .12s;
        }
        .cs-sidebar-link:hover { background: #f5f5f3; color: #111; }
        .cs-sidebar-num {
          flex-shrink: 0; font-size: 10px; font-weight: 700;
          color: #ccc; width: 18px; text-align: right; padding-top: 1px;
        }
        .cs-sidebar-title { font-weight: 500; }

        /* ── ARTICLES ── */
        .cs-articles { padding: 64px 60px; }
        @media (max-width: 1024px) { .cs-articles { padding: 48px 32px; } }
        @media (max-width: 640px) { .cs-articles { padding: 32px 20px; } }

        .cs-article { padding-top: 56px; margin-top: 56px; border-top: 1px solid #eeecea; }
        .cs-article:first-child { margin-top: 0; padding-top: 0; border-top: none; }

        .cs-article-meta {
          display: flex; align-items: center; gap: 14px;
          margin-bottom: 16px;
        }
        .cs-article-num {
          font-size: 11px; font-weight: 700; color: #f5c96a;
          background: #111; border-radius: 6px; padding: 3px 8px; line-height: 1;
        }
        .cs-article-rt {
          display: flex; align-items: center; gap: 4px;
          font-size: 11px; color: #bbb; font-weight: 500;
        }

        .cs-article-title {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: clamp(24px, 3.5vw, 38px);
          font-weight: 900; line-height: 1.15; letter-spacing: -.01em;
          color: #111; margin-bottom: 32px;
        }

        /* ── ARTICLE BODY ── */
        .cs-article-body {
          font-family: 'Source Serif 4', Georgia, serif;
          font-size: 18px; line-height: 1.85; color: #1a1a1a;
          max-width: 680px;
        }
        .cs-article-body h2 {
          font-family: 'Playfair Display', serif; font-size: 1.5em;
          font-weight: 700; margin-top: 2.5em; margin-bottom: .6em; color: #111;
        }
        .cs-article-body h3 {
          font-size: 1.15em; font-weight: 700;
          margin-top: 2em; margin-bottom: .5em; color: #111;
          font-family: 'Inter', sans-serif;
        }
        .cs-article-body p { margin: 1em 0; }
        .cs-article-body blockquote {
          border-left: 4px solid #f5c96a; padding-left: 1.2em;
          margin: 1.5em 0; color: #444; font-style: italic;
        }
        .cs-article-body ul, .cs-article-body ol { padding-left: 1.5em; margin: 1em 0; }
        .cs-article-body li { margin: .4em 0; }
        .cs-article-body pre {
          background: #111; color: #e8e3d5; padding: 22px 24px;
          border-radius: 10px; overflow-x: auto; font-size: 13px; margin: 1.5em 0;
          font-family: 'SF Mono', Menlo, monospace;
        }
        .cs-article-body code {
          font-family: 'SF Mono', Menlo, monospace; font-size: .87em;
          background: #f3f2ef; padding: 1px 5px; border-radius: 3px; color: #1a1a1a;
        }
        .cs-article-body pre code { background: none; color: inherit; padding: 0; }
        .cs-article-body table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
        .cs-article-body th {
          background: #111; color: #fff; padding: 10px 14px;
          text-align: left; font-size: 13px; letter-spacing: .05em; font-family: 'Inter', sans-serif;
        }
        .cs-article-body td { border-bottom: 1px solid #e8e8e4; padding: 10px 14px; }
        .cs-article-body a { color: #b8832a; text-decoration: underline; text-underline-offset: 3px; }
        .cs-article-body .pub-figure { margin: 2.5em 0; text-align: center; }
        .cs-article-body .pub-figure-img { max-width: 100%; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.1); }
        .cs-article-body .pub-figure-caption { margin-top: .6em; font-size: .8em; color: #888; font-style: italic; }
        .cs-article-body .pub-gallery {
          display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 10px; margin: 2em 0;
        }
        .cs-article-body .pub-gallery-img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; display: block; }

        /* Variables CSS pour blocs structurés */
        .cs-article-body {
          --pub-accent: #9a7212;
          --pub-summary-color: #333;
          --pub-exercise-border: #e0d4c3;
          --pub-exercise-header-bg: #faf6ee;
          --pub-solution-bg: #faf6ee;
          --pub-definition-border: #e0d4c3;
          --pub-definition-bg: #fafaf8;
          --pub-toggle-border: #e5e5e5;
          --pub-toggle-header-bg: #f7f7f5;
          --pub-highlight-bg: #faf6ee;
          --pub-checklist-bg: rgba(0,0,0,.03);
        }
        .cs-article-body .pub-code { background: #0d0d0d; }
        .cs-article-body .pub-code code { background: #0d0d0d; color: #e8e3d5; }

        /* ── FOOTER ── */
        .cs-footer { background: #111; color: rgba(255,255,255,.4); padding: 32px; }
        .cs-footer-inner {
          max-width: 1040px; margin: 0 auto;
          display: flex; justify-content: space-between; align-items: center;
          font-size: 13px; flex-wrap: wrap; gap: 12px;
        }
        .cs-footer-brand { color: #f5c96a; font-weight: 700; text-decoration: none; }
        .cs-footer-report {
          display: flex; align-items: center; gap: 5px;
          font-size: 11px; color: rgba(255,255,255,.3); text-decoration: none;
        }
        .cs-footer-report:hover { color: rgba(255,255,255,.6); }

        ${KATEX_PUBLISH_CSS}
        ${REWRITE_SHARED_CSS}
      `}</style>
    </>
  )
}