"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { type User, type UserRole, ROLE_NAMES, ROLE_HIERARCHY } from "@/types/user"

interface RoleManagementModalProps {
  isOpen: boolean
  onClose: () => void
  user: User | null
  adminRole: UserRole
  onRoleChange: (userId: string, newRole: UserRole) => void
}

export function RoleManagementModal({ isOpen, onClose, user, adminRole, onRoleChange }: RoleManagementModalProps) {
  const [selectedRole, setSelectedRole] = useState("")
  const [loading, setLoading] = useState(false)

  if (!user) return null

  const adminLevel = ROLE_HIERARCHY[adminRole] || 0
  const availableRoles = (Object.entries(ROLE_NAMES) as [UserRole, string][]).filter(([role]) => {
    const roleLevel = ROLE_HIERARCHY[role] || 0
    return roleLevel < adminLevel
  })

  const handleRoleChange = async () => {
    if (!selectedRole) return

    setLoading(true)
    try {
      await onRoleChange(user.national_id, selectedRole as UserRole)
      onClose()
    } catch (error) {
      console.error("Error changing role:", error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-md" dir="rtl">
        <DialogHeader>
          <DialogTitle>שינוי תפקיד - {user.name}</DialogTitle>
          <DialogDescription>בחר תפקיד חדש עבור המשתמש</DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="bg-gray-50 p-3 rounded">
            <p className="text-sm text-gray-600">תפקיד נוכחי:</p>
            <p className="font-semibold">{ROLE_NAMES[user.role] || user.role}</p>
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">תפקיד חדש:</label>
            <Select value={selectedRole} onValueChange={setSelectedRole}>
              <SelectTrigger>
                <SelectValue placeholder="בחר תפקיד" />
              </SelectTrigger>
              <SelectContent>
                {availableRoles.map(([role, name]) => (
                  <SelectItem key={role} value={role}>
                    {name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {selectedRole && (
            <Alert>
              <AlertDescription>המשתמש יקבל הרשאות של {ROLE_NAMES[selectedRole as UserRole]}</AlertDescription>
            </Alert>
          )}

          <div className="flex gap-2 justify-end">
            <Button variant="outline" onClick={onClose}>
              ביטול
            </Button>
            <Button onClick={handleRoleChange} disabled={!selectedRole || loading}>
              {loading ? "משנה..." : "שנה תפקיד"}
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}