import { notFound } from 'next/navigation'
import { getPublishedNote } from '@/app/actions/notes-publishing'
import { FileText, Calendar } from 'lucide-react'
import { format } from 'date-fns'

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const note = await getPublishedNote(slug)
  if (!note) return { title: 'Note not found' }
  return { title: note.title || 'Published note', description: note.content?.replace(/<[^>]+>/g, '').slice(0, 160) }
}

export const dynamic = 'force-static'
export const revalidate = 3600

export default async function PublishedNotePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  const note = await getPublishedNote(slug)

  if (!note) notFound()

  return (
    <div className="min-h-screen bg-[#F2F0E9] dark:bg-zinc-950">
      <div className="max-w-3xl mx-auto px-6 py-12">
        {/* Header */}
        <div className="mb-8 pb-6 border-b border-black/10 dark:border-white/10">
          <div className="flex items-center gap-2 text-xs text-muted-foreground mb-3">
            <FileText size={14} />
            <span>Note publiée</span>
            {note.publishedAt && (
              <>
                <span>·</span>
                <Calendar size={12} />
                <span>{format(new Date(note.publishedAt), 'MMM d, yyyy')}</span>
              </>
            )}
          </div>
          <h1 className="text-3xl font-serif font-medium tracking-tight text-foreground leading-tight mb-2">
            {note.title || 'Sans titre'}
          </h1>
          {note.user?.name && (
            <p className="text-sm text-muted-foreground">par {note.user.name}</p>
          )}
        </div>

        {/* Content */}
        <article
          dir="auto"
          className="prose prose-stone dark:prose-invert max-w-none
            prose-headings:font-serif prose-headings:font-medium
            prose-p:leading-relaxed prose-p:text-[15px]
            prose-pre:bg-zinc-100 prose-pre:dark:bg-zinc-900
            prose-blockquote:border-brand-accent/40
            prose-a:text-brand-accent"
          dangerouslySetInnerHTML={{ __html: note.content || '' }}
        />

        {/* Footer */}
        <div className="mt-12 pt-6 border-t border-black/10 dark:border-white/10 text-center">
          <p className="text-xs text-muted-foreground">
            Publié sur Momento
          </p>
        </div>
      </div>
    </div>
  )
}