"use client";

import { useParams } from "next/navigation";
import useSWR from "swr";
import NewsForm from "@/components/admin/NewsForm";
import NewsService from "@/services/news.service";
import type { News } from "@/types/news.type";
import { Skeleton } from "@/components/ui/skeleton";

export default function EditNewsPage() {
  const params = useParams();
  const newsId = params.id as string;

  const { data: news, isLoading } = useSWR<News>(
    newsId ? `/admin/news/${newsId}` : null,
    () => NewsService.getBySlug(newsId).then((res) => res?.news)
  );

  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <Skeleton className="h-8 w-48" />
            <Skeleton className="h-4 w-64 mt-2" />
          </div>
          <Skeleton className="h-10 w-24" />
        </div>
        <div className="grid gap-6 lg:grid-cols-3">
          <Skeleton className="h-96 lg:col-span-2" />
          <Skeleton className="h-96" />
        </div>
      </div>
    );
  }

  if (!news) {
    return (
      <div className="text-center py-12">
        <h1 className="text-2xl font-bold text-slate-900">Berita tidak ditemukan</h1>
        <p className="text-slate-500 mt-2">Berita dengan ID tersebut tidak ada.</p>
      </div>
    );
  }

  return <NewsForm news={news} mode="edit" />;
}