import { notFound } from "next/navigation";
import { CalendarDays, ChevronRight } from "lucide-react";
import Link from "next/link";
import { apiGet } from "@/lib/api/server";

interface Props {
  params: Promise<{ slug: string }>;
}

export default async function NewsDetailPage({ params }: Props) {
  const { slug } = await params;
  const item = await apiGet<{
    id: string;
    title: string;
    lead?: string | null;
    content?: string;
    image?: string | null;
    isPinned: boolean;
    createdAt: string;
  }>(`/api/news/${slug}`).catch(() => null);

  if (!item) notFound();

  return (
    <div>
      <div className="container mx-auto px-4 py-12 max-w-3xl">
        <Link
          href="/news"
          className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-[#2563EB] transition-colors mb-6"
        >
          <ChevronRight className="h-4 w-4" />
          بازگشت به اخبار
        </Link>

        <article className="bg-white rounded-2xl border border-gray-100 p-6 md:p-10 shadow-sm">
          {item.isPinned && (
            <span className="inline-block bg-red-50 text-red-600 text-xs px-2.5 py-1 rounded-full font-medium mb-4">
              اطلاعیه
            </span>
          )}

          <h1 className="text-2xl md:text-3xl font-bold text-gray-900 mb-4 leading-tight">
            {item.title}
          </h1>

          {item.lead && (
            <p className="text-gray-700 font-semibold text-base leading-relaxed mb-6 pb-6 border-b border-gray-100">
              {item.lead}
            </p>
          )}

          <div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
            <CalendarDays className="h-4 w-4" />
            {new Date(item.createdAt).toLocaleDateString("fa-IR")}
          </div>

          {item.image && (
            <div className="aspect-video rounded-xl overflow-hidden mb-8">
              <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
            </div>
          )}

          {item.content && (
            <div className="text-gray-700 leading-relaxed whitespace-pre-wrap text-base">
              {item.content}
            </div>
          )}
        </article>
      </div>
    </div>
  );
}