'use client';

import { useEffect, useState } from 'react';
import { toast } from 'sonner';
import PageForm from '@/components/admin/page-form';
import AdminLayout from '@/components/layout/admin-layout';
import type { Page } from '@/db/schema';

import { useParams } from 'next/navigation';

export default function EditPage() {
  const { id } = useParams<{ id: string }>();
  const [page, setPage] = useState<Page | undefined>(undefined);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchPage = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/admin/pages/${params.id}`);
        if (!response.ok) {
          throw new Error(`Error: ${response.statusText}`);
        }
        const data: Page = await response.json();
        setPage(data);
      } catch (err: any) {
        setError(err.message);
        toast.error(`Failed to load page: ${err.message}`);
      } finally {
        setLoading(false);
      }
    };

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

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

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

  return (
    <AdminLayout>
      <div className="p-8">
        <h2 className="font-bold text-2xl tracking-tight">Edit Page</h2>
        <PageForm
          initialData={page}
          onSuccess={() => {
            window.location.href = '/admin/page';
          }}
        />
      </div>
    </AdminLayout>
  );
}