import { useNavigate } from 'react-router-dom'
import { toast } from 'sonner'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { PuntoDeVentaForm } from '../components/PuntoDeVentaForm'
import { useCreatePuntoDeVenta } from '../hooks/usePuntosDeVenta'
import type { PuntoDeVentaFormValues } from '../components/PuntoDeVentaForm'

export function CreatePuntoDeVentaPage() {
  const navigate = useNavigate()
  const { mutate, isPending, error } = useCreatePuntoDeVenta()

  function handleSubmit(values: PuntoDeVentaFormValues) {
    mutate(
      {
        medioId: values.medioId,
        numeroAFIP: values.numeroAFIP,
        nombre: values.nombre,
      },
      {
        onSuccess: () => {
          toast.success('Punto de venta creado correctamente')
          void navigate('/admin/puntos-de-venta')
        },
      },
    )
  }

  return (
    <div className="flex justify-center py-8">
      <Card className="w-full max-w-lg">
        <CardHeader className="space-y-1">
          <CardTitle className="text-xl">Crear Punto de Venta</CardTitle>
          <CardDescription>
            Completá los datos para registrar un nuevo punto de venta AFIP.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <PuntoDeVentaForm isPending={isPending} error={error} onSubmit={handleSubmit} />
        </CardContent>
      </Card>
    </div>
  )
}
