'use client';

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

export default function EditServiceClient({ id }: { id: string }) {
  const router = useRouter();
  const [service, setService] = useState<Service | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  useEffect(() => {
    api.getService(id)
      .then(setService)
      .catch(() => { toast.error('Service not found'); router.push('/services'); })
      .finally(() => setIsLoading(false));
  }, [id, router]);

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

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

  return <ServiceForm initialData={service} onSave={handleSave} isSaving={isSaving} />;
}