'use client';

import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import BlogForm from '@/components/admin/blog-form';
import AdminLayout from '@/components/layout/admin-layout';
import type { Blog, Category } from '@/db/schema';
import { useParams, useRouter } from 'next/navigation';

export default function EditBlogPage() {
  const { id } = useParams<{ id: string }>();
  const [blog, setBlog] = useState<Blog | undefined>(undefined);
  const [categories, setCategories] = useState<Category[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

  useEffect(() => {
    const fetchBlogAndCategories = async () => {
      setLoading(true);
      try {
        const [blogRes, categoriesRes] = await Promise.all([
          fetch(`/api/admin/blogs/${params.id}`),
          fetch('/api/admin/categories'),
        ]);

        if (!blogRes.ok) {
          throw new Error(`Error: ${blogRes.statusText}`);
        }
        if (!categoriesRes.ok) {
          throw new Error(`Error: ${categoriesRes.statusText}`);
        }

        const blogData: Blog = await blogRes.json();
        const categoriesData: Category[] = await categoriesRes.json();

        setBlog(blogData);
        setCategories(categoriesData);
      } catch (err: any) {
        setError(err.message);
        toast.error(`Failed to load data: ${err.message}`);
      } finally {
        setLoading(false);
      }
    };

    if (id) {
      fetchBlogAndCategories();
    }
  }, [id]);

  const handleSuccess = () => {
    router.push('/admin/blog');
  };

  if (loading) {
    return <AdminLayout><div>Loading...</div></AdminLayout>;
  }

  if (error) {
    return <AdminLayout><div>Error: {error}</div></AdminLayout>;
  }

  return (
    <AdminLayout>
      <div className="p-8">
        <h2 className="font-bold text-2xl tracking-tight">Edit Blog Post</h2>
        <p className="text-muted-foreground">Update the details of your blog post.</p>
        <div className="mt-8">
          <BlogForm initialData={blog} onSuccess={handleSuccess} categories={categories} />
        </div>
      </div>
    </AdminLayout>
  );
}