'use client';

import { useEffect, useState } from 'react';
import { format } from 'date-fns';
import Link from 'next/link';

interface Post {
  slug: string;
  title: string;
  date: string;
  tags: string[];
  summary: string;
  content: string;
  createdAt: string;
}

export default function PostPage({ params }: { params: { slug: string[] } }) {
  const [post, setPost] = useState<Post | null>(null);

  // Join the slug array to get the full path
  const slugPath = Array.isArray(params.slug) ? params.slug.join('/') : params.slug;

  useEffect(() => {
    // Initial load
    loadPost();

    // Set up polling for changes
    const interval = setInterval(loadPost, 2000);

    // Cleanup
    return () => clearInterval(interval);
  }, [slugPath]);

  const loadPost = async () => {
    try {
      const response = await fetch(`/api/posts/${encodeURIComponent(slugPath)}`);
      const data = await response.json();
      setPost(data);
    } catch (error) {
      console.error('Fehler beim Laden des Beitrags:', error);
    }
  };

  if (!post) {
    return <div>Lädt...</div>;
  }

  return (
    <article className="min-h-screen p-8 max-w-4xl mx-auto">
      <Link href="/" className="text-blue-600 hover:underline mb-8 inline-block">
        ← Zurück zu den Beiträgen
      </Link>
      
      <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
      <div className="text-gray-600 mb-8">
        <div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
        <div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
      </div>
      
      <div className="flex gap-2 mb-8">
        {post.tags.map((tag) => (
          <span
            key={tag}
            className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
          >
            {tag}
          </span>
        ))}
      </div>

      <div
        className="prose prose-lg max-w-none"
        dangerouslySetInnerHTML={{ __html: post.content }}
      />
    </article>
  );
}