'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 { Category } from '@/db/schema';
import { useRouter } from 'next/navigation';

export default function NewBlogPage() {
  const [categories, setCategories] = useState<Category[]>([]);
  const router = useRouter();

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        const response = await fetch('/api/admin/categories');
        if (!response.ok) {
          throw new Error(`Error: ${response.statusText}`);
        }
        const data: Category[] = await response.json();
        setCategories(data);
      } catch (err: any) {
        toast.error(`Failed to load categories: ${err.message}`);
      }
    };

    fetchCategories();
  }, []);

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

  return (
    <AdminLayout>
      <div className="p-8">
        <h2 className="font-bold text-2xl tracking-tight">Create New Blog Post</h2>
        <p className="text-muted-foreground">Fill out the form below to create a new blog post.</p>
        <div className="mt-8">
          <BlogForm onSuccess={handleSuccess} categories={categories} />
        </div>
      </div>
    </AdminLayout>
  );
}