"use client";

import { useEffect, useState } from "react";
import BottomNav from "@/components/BottomNav";
import AppHeader from "@/components/AppHeader";
import { Calendar } from "lucide-react";
import Link from "next/link";
import { sanitizeHtml } from "@/lib/sanitize";

interface Post {
  id: number;
  title: string;
  excerpt: string;
  image: string | null;
  date: string;
}

export default function NewsPage() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/posts?page=${page}&per_page=10`)
      .then((r) => r.json())
      .then((data) => {
        if (page === 1) setPosts(data.posts || []);
        else setPosts((prev) => [...prev, ...(data.posts || [])]);
        setTotalPages(data.totalPages || 1);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, [page]);

  return (
    <div className="pb-20">
      <AppHeader title="Nyheter & Blogg" />

      <div className="p-4 space-y-4">
        {posts.map((post, i) => (
          <Link
            key={post.id}
            href={`/news/${post.id}`}
            className="block bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow animate-fade-in"
            style={{ animationDelay: `${i * 0.05}s` }}
          >
            {post.image && (
              <div className="aspect-video bg-gray-100 overflow-hidden">
                <img src={post.image} alt="" className="w-full h-full object-cover hover:scale-105 transition-transform duration-500" />
              </div>
            )}
            <div className="p-4">
              <div className="flex items-center gap-2 text-xs text-gray-500 mb-2">
                <Calendar size={12} />
                <time>{new Date(post.date).toLocaleDateString("sv-SE", { year: "numeric", month: "long", day: "numeric" })}</time>
              </div>
              <h2 className="font-bold text-base text-gray-900 line-clamp-2" dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.title) }} />
              <div className="text-sm text-gray-500 mt-2 line-clamp-2" dangerouslySetInnerHTML={{ __html: sanitizeHtml(post.excerpt) }} />
            </div>
          </Link>
        ))}

        {loading && (
          <div className="space-y-4">
            {[1, 2].map((i) => (
              <div key={i} className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
                <div className="aspect-video skeleton" />
                <div className="p-4 space-y-2"><div className="h-3 skeleton rounded w-24" /><div className="h-5 skeleton rounded w-full" /><div className="h-4 skeleton rounded w-3/4" /></div>
              </div>
            ))}
          </div>
        )}

        {!loading && page < totalPages && (
          <button onClick={() => setPage((p) => p + 1)} className="w-full py-3 bg-emerald-mosque/10 text-emerald-mosque rounded-xl font-semibold">
            Ladda fler nyheter
          </button>
        )}
      </div>

      <BottomNav />
    </div>
  );
}