import { useNavigate, useParams } from 'react-router-dom'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { AlertCircle } from 'lucide-react'
import { useRol } from '../hooks/useRol'
import { EditRolForm } from '../components/RolForm'

export function EditRolPage() {
  const navigate = useNavigate()
  const { codigo } = useParams<{ codigo: string }>()
  const { data: rol, isLoading, isError } = useRol(codigo)

  return (
    <div className="flex justify-center py-8">
      <Card className="w-full max-w-lg">
        <CardHeader className="space-y-1">
          <CardTitle className="text-xl">Editar rol</CardTitle>
          <CardDescription>Modificá nombre, descripción o estado del rol.</CardDescription>
        </CardHeader>
        <CardContent>
          {isLoading && <p className="text-sm text-muted-foreground">Cargando...</p>}
          {isError && (
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>No se pudo cargar el rol.</AlertDescription>
            </Alert>
          )}
          {rol && <EditRolForm initial={rol} onSuccess={() => navigate('/admin/roles')} />}
        </CardContent>
      </Card>
    </div>
  )
}
