'use client';
import { useParams } from 'next/navigation';
import { useAuth } from '@/hooks/useAuth';
import { useApi } from '@/hooks/useApi';
import { productsService } from '@/services/products.service';
import { categoriesService } from '@/services/categories.service';
import { ProductForm } from '@/components/forms/ProductForm';
import { PageHeader } from '@/components/layout/PageHeader';
import { LoadingState, EmptyState } from '@/components/ui/States';

export default function EditarProdutoPage() {
  const { storeId } = useAuth();
  const params = useParams();
  const id = params.id as string;

  const { data: product, loading: lp } = useApi(
    () => (storeId ? productsService.getById(storeId, id) : Promise.resolve(null)),
    [storeId, id],
  );
  const { data: categories, loading: lc } = useApi(
    () => (storeId ? categoriesService.list(storeId) : Promise.resolve([])),
    [storeId],
  );

  if (lp || lc || !storeId) return <LoadingState />;
  if (!product) return <EmptyState title="Produto não encontrado" />;

  return (
    <>
      <PageHeader title="Editar produto" subtitle={product.name} />
      <ProductForm storeId={storeId} categories={categories ?? []} initial={product} />
    </>
  );
}