"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

interface User {
  national_id: string
  name: string
  team?: string
}

interface DepartmentUserCategoryModalProps {
  isOpen: boolean
  onClose: () => void
  category: string
  categoryName: string
  adminId: string
  departmentName: string
  fieldName: string
}

export function DepartmentUserCategoryModal({
  isOpen,
  onClose,
  category,
  categoryName,
  adminId,
  departmentName,
  fieldName,
}: DepartmentUserCategoryModalProps) {
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (isOpen && category && adminId) {
      fetchUsers()
    }
  }, [isOpen, category, adminId])

  const fetchUsers = async () => {
    setLoading(true)
    try {
      const response = await fetch("/api/admin/department-users-by-category", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ adminId, category }),
      })
      const data = await response.json()
      setUsers(data)
    } catch (err) {
      console.error("Error fetching department users:", err)
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto" dir="rtl">
        <DialogHeader className="text-center" dir="rtl">
          <DialogTitle className="text-xl text-center" dir="rtl">
            {categoryName} - מסגרת {departmentName}
          </DialogTitle>
          <DialogDescription className="text-center" dir="rtl">רשימת המשתמשים בקטגוריה זו מהמסגרת שלך</DialogDescription>
        </DialogHeader>

        {loading ? (
          <div className="text-center py-8">טוען משתמשים...</div>
        ) : (
          <div className="mt-4">
            {users.length > 0 ? (
              <Table>
                <TableHeader>
                  <TableRow className="text-center" dir="rtl">
                    <TableHead className="text-center">שם</TableHead>
                    <TableHead className="text-center">צוות</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {users.map((user) => (
                    <TableRow key={user.national_id}>
                      <TableCell className="font-medium text-center" dir="rtl">{user.name}</TableCell>
                      <TableCell className="text-center" dir="rtl">
                        <span className="text-sm bg-purple-100 text-purple-800 px-2 py-1 rounded">
                          {user.team || "לא הוגדר"}
                        </span>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <div className="text-center py-8 text-gray-500">אין משתמשים בקטגוריה זו במסגרת שלך</div>
            )}
            <div className="mt-4 text-sm text-gray-600 text-center">
              סה"כ: {users.length} משתמשים ממסגרת {departmentName}
            </div>
          </div>
        )}
      </DialogContent>
    </Dialog>
  )
}