'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import api from '@/lib/api';
import { Page } from '@/types';
import PageForm from '../_components/PageForm';
import { PageSpinner } from '@/components/ui/Spinner';

export default function EditPageClient({ id }: { id: string }) {
  const router = useRouter();
  const [page, setPage] = useState<Page | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    api.getPage(id)
      .then(setPage)
      .catch(() => { toast.error('Page not found'); router.push('/pages'); })
      .finally(() => setIsLoading(false));
  }, [id, router]);

  const handleSave = async (data: Partial<Page>) => {
    setIsSaving(true);
    try {
      const updated = await api.updatePage(id, data);
      setPage(updated);
      toast.success('Page saved');
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save page');
    } finally {
      setIsSaving(false);
    }
  };

  if (isLoading) return <PageSpinner />;
  if (!page) return null;

  return <PageForm initialData={page} onSave={handleSave} isSaving={isSaving} />;
}