import { useNavigate, useParams } from 'react-router-dom'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { PuntoDeVentaForm } from '../components/PuntoDeVentaForm'
import { usePuntoDeVenta, useUpdatePuntoDeVenta } from '../hooks/usePuntosDeVenta'
import { useMedio } from '../../medios/hooks/useMedio'
import { MedioInactivoBanner } from '../components/MedioInactivoBanner'
import type { PuntoDeVentaFormValues } from '../components/PuntoDeVentaForm'

export function EditPuntoDeVentaPage() {
  const { id } = useParams<{ id: string }>()
  const puntoDeVentaId = Number(id)
  const navigate = useNavigate()

  const { data: pdv, isLoading } = usePuntoDeVenta(puntoDeVentaId)
  const { mutate, isPending, error } = useUpdatePuntoDeVenta(puntoDeVentaId)
  const { data: medio } = useMedio(pdv?.medioId ?? 0)
  const medioInactivo = medio?.activo === false

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

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <span className="text-muted-foreground">Cargando...</span>
      </div>
    )
  }

  if (!pdv) {
    return (
      <div className="py-12 text-center text-muted-foreground">
        Punto de venta no encontrado.
      </div>
    )
  }

  return (
    <div className="flex justify-center py-8">
      <Card className="w-full max-w-lg">
        <CardHeader className="space-y-1">
          <div className="flex items-center justify-between">
            <CardTitle className="text-xl">Editar Punto de Venta</CardTitle>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => navigate('/admin/puntos-de-venta')}
            >
              Volver
            </Button>
          </div>
          <CardDescription>
            Editá los datos del punto de venta <strong>{pdv.nombre}</strong>.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          {medioInactivo && medio && (
            <MedioInactivoBanner medioNombre={medio.nombre} />
          )}
          <PuntoDeVentaForm
            initialData={pdv}
            isPending={isPending || medioInactivo}
            error={error}
            onSubmit={handleSubmit}
          />
        </CardContent>
      </Card>
    </div>
  )
}
