import { useState } from 'react'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useRoles } from '../../roles/hooks/useRoles'
import { RolPermisosEditor } from '../components/RolPermisosEditor'

export function RolPermisosPage() {
  const [selectedRol, setSelectedRol] = useState<string | null>(null)

  const { data: roles, isLoading: loadingRoles } = useRoles()

  const rolesActivos = roles?.filter((r) => r.activo) ?? []

  return (
    <div className="flex justify-center py-8">
      <Card className="w-full max-w-5xl">
        <CardHeader className="space-y-1">
          <CardTitle className="text-xl">Permisos por rol</CardTitle>
          <CardDescription>
            Seleccioná un rol para ver y editar sus permisos. Los cambios se aplican inmediatamente al guardar.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Selector de rol */}
          <div className="flex flex-col gap-1 max-w-xs">
            <label className="text-sm font-medium text-foreground">
              Rol
            </label>
            {loadingRoles ? (
              <p className="text-sm text-muted-foreground">Cargando roles...</p>
            ) : (
              <Select
                value={selectedRol ?? '__none__'}
                onValueChange={(v) => setSelectedRol(v === '__none__' ? null : v)}
              >
                <SelectTrigger className="w-full" aria-label="Rol">
                  <SelectValue placeholder="— Seleccioná un rol —" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="__none__">— Seleccioná un rol —</SelectItem>
                  {rolesActivos.map((r) => (
                    <SelectItem key={r.codigo} value={r.codigo}>
                      {r.nombre} ({r.codigo})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            )}
          </div>

          {/* Grid de permisos */}
          {selectedRol ? (
            <RolPermisosEditor rolCodigo={selectedRol} />
          ) : (
            <p className="text-sm text-muted-foreground">
              Seleccioná un rol para ver sus permisos.
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
