"use client"

import { useState } from 'react'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { 
  Edit, 
  Phone, 
  Mail, 
  Calendar,
  MapPin,
  User,
  Briefcase,
  Save,
  X,

  UserX
} from 'lucide-react'

// Интерфейс сотрудника
interface Employee {
  id: string
  firstName: string
  lastName: string
  position: string
  department?: string
  phone: string
  email: string
  avatar?: string
  hireDate: string
  status: 'active' | 'vacation' | 'sick' | 'inactive'
  salary: number
  address: string
}



interface EmployeesListProps {
  searchQuery: string
  employees: Employee[]
  onEditEmployee: (employee: Employee) => void
  onDeleteEmployee: (employeeId: string) => void
}

export function EmployeesList({ searchQuery, employees, onEditEmployee, onDeleteEmployee }: EmployeesListProps) {
  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null)
  const [isEditModalOpen, setIsEditModalOpen] = useState(false)

  // Фильтрация сотрудников по поисковому запросу
  const filteredEmployees = employees.filter(employee =>
    `${employee.firstName} ${employee.lastName}`.toLowerCase().includes(searchQuery.toLowerCase()) ||
    employee.position.toLowerCase().includes(searchQuery.toLowerCase()) ||
    (employee.department && employee.department.toLowerCase().includes(searchQuery.toLowerCase()))
  )

  const getStatusBadge = (status: Employee['status']) => {
    switch (status) {
      case 'active':
        return <Badge className="bg-green-500/20 text-green-300 border-green-500/30">Активен</Badge>
      case 'vacation':
        return <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30">В отпуске</Badge>
      case 'sick':
        return <Badge className="bg-yellow-500/20 text-yellow-300 border-yellow-500/30">На больничном</Badge>
      case 'inactive':
        return <Badge className="bg-red-500/20 text-red-300 border-red-500/30">Неактивен</Badge>
      default:
        return <Badge>Неизвестно</Badge>
    }
  }

  const getInitials = (firstName: string, lastName: string) => {
    return `${firstName.charAt(0)}${lastName.charAt(0)}`
  }

  const formatSalary = (salary: number) => {
    return new Intl.NumberFormat('ru-RU').format(salary) + ' ₽'
  }

  const handleEditEmployee = (employee: Employee) => {
    onEditEmployee(employee)
  }

  const handleDeleteEmployee = (employee: Employee) => {
    onDeleteEmployee(employee.id)
  }

  return (
    <div className="space-y-4">
      {/* Статистика */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <Card className="glass-card p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-white/70 text-sm">Всего сотрудников</p>
              <p className="text-2xl font-bold text-white">{employees.length}</p>
            </div>
            <User className="h-8 w-8 text-purple-400" />
          </div>
        </Card>
        <Card className="glass-card p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-white/70 text-sm">Активных</p>
              <p className="text-2xl font-bold text-green-400">
                {employees.filter(e => e.status === 'active').length}
              </p>
            </div>
            <Briefcase className="h-8 w-8 text-green-400" />
          </div>
        </Card>
        <Card className="glass-card p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-white/70 text-sm">В отпуске</p>
              <p className="text-2xl font-bold text-blue-400">
                {employees.filter(e => e.status === 'vacation').length}
              </p>
            </div>
            <Calendar className="h-8 w-8 text-blue-400" />
          </div>
        </Card>
        <Card className="glass-card p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-white/70 text-sm">Отделов</p>
              <p className="text-2xl font-bold text-white">
                {new Set(employees.map(e => e.department)).size}
              </p>
            </div>
            <MapPin className="h-8 w-8 text-orange-400" />
          </div>
        </Card>
      </div>

      {/* Список сотрудников */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {filteredEmployees.map((employee) => (
          <Card key={employee.id} className="glass-card p-6">
            <div className="flex items-start space-x-4">
              <Avatar className="h-16 w-16 ring-2 ring-white/20">
                {employee.avatar ? (
                  <AvatarImage src={employee.avatar} alt={`${employee.firstName} ${employee.lastName}`} />
                ) : null}
                <AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white font-semibold">
                  {getInitials(employee.firstName, employee.lastName)}
                </AvatarFallback>
              </Avatar>
              
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="text-white font-semibold text-lg truncate">
                    {employee.firstName} {employee.lastName}
                  </h3>
                  <div className="flex gap-1">
                    <Button
                      size="sm"
                      variant="ghost"
                      className="text-white/60 hover:text-white hover:bg-white/10 h-8 w-8 p-0"
                      onClick={() => handleEditEmployee(employee)}
                    >
                      <Edit className="h-4 w-4" />
                    </Button>
                    
                    <AlertDialog>
                      <AlertDialogTrigger asChild>
                        <Button
                          size="sm"
                          variant="ghost"
                          className="text-red-400/60 hover:text-red-300 hover:bg-red-500/10 h-8 w-8 p-0"
                        >
                          <UserX className="h-4 w-4" />
                        </Button>
                      </AlertDialogTrigger>
                      <AlertDialogContent className="glass-card border-white/10">
                        <AlertDialogHeader>
                          <AlertDialogTitle className="text-white">Уволить сотрудника?</AlertDialogTitle>
                          <AlertDialogDescription className="text-white/70">
                            Вы уверены, что хотите уволить {employee.firstName} {employee.lastName}? 
                            Это действие изменит статус сотрудника на &quot;Неактивен&quot; и удалит его из активного списка.
                          </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                          <AlertDialogCancel className="glass-secondary text-white hover:text-white">
                            Отмена
                          </AlertDialogCancel>
                          <AlertDialogAction
                            onClick={() => handleDeleteEmployee(employee)}
                            className="bg-red-600 hover:bg-red-700 text-white"
                          >
                            Уволить
                          </AlertDialogAction>
                        </AlertDialogFooter>
                      </AlertDialogContent>
                    </AlertDialog>
                  </div>
                </div>
                
                <p className="text-purple-300 font-medium mb-1">{employee.position}</p>
                <p className="text-white/60 text-sm mb-3">{employee.department}</p>
                
                <div className="flex items-center justify-between mb-3">
                  {getStatusBadge(employee.status)}
                  <span className="text-white font-semibold">
                    {formatSalary(employee.salary)}
                  </span>
                </div>
                
                <div className="space-y-2">
                  <div className="flex items-center text-white/70 text-sm">
                    <Phone className="h-3 w-3 mr-2 flex-shrink-0" />
                    <span className="truncate">{employee.phone}</span>
                  </div>
                  <div className="flex items-center text-white/70 text-sm">
                    <Mail className="h-3 w-3 mr-2 flex-shrink-0" />
                    <span className="truncate">{employee.email}</span>
                  </div>
                  <div className="flex items-center text-white/70 text-sm">
                    <Calendar className="h-3 w-3 mr-2 flex-shrink-0" />
                    <span>С {new Date(employee.hireDate).toLocaleDateString('ru-RU')}</span>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {/* Модальное окно редактирования */}
      <Dialog open={isEditModalOpen} onOpenChange={setIsEditModalOpen}>
        <DialogContent className="glass-card max-w-md">
          <DialogHeader>
            <DialogTitle className="text-white flex items-center gap-2">
              <Edit className="h-5 w-5" />
              Редактировать сотрудника
            </DialogTitle>
          </DialogHeader>
          
          {selectedEmployee && (
            <div className="space-y-4 mt-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-white/80">Имя</Label>
                  <Input
                    value={selectedEmployee.firstName}
                    onChange={(e) => setSelectedEmployee({
                      ...selectedEmployee,
                      firstName: e.target.value
                    })}
                    className="glass-input text-white"
                  />
                </div>
                <div>
                  <Label className="text-white/80">Фамилия</Label>
                  <Input
                    value={selectedEmployee.lastName}
                    onChange={(e) => setSelectedEmployee({
                      ...selectedEmployee,
                      lastName: e.target.value
                    })}
                    className="glass-input text-white"
                  />
                </div>
              </div>
              
              <div>
                <Label className="text-white/80">Должность</Label>
                <Input
                  value={selectedEmployee.position}
                  onChange={(e) => setSelectedEmployee({
                    ...selectedEmployee,
                    position: e.target.value
                  })}
                  className="glass-input text-white"
                />
              </div>
              
              <div>
                <Label className="text-white/80">Отдел</Label>
                <Input
                  value={selectedEmployee.department}
                  onChange={(e) => setSelectedEmployee({
                    ...selectedEmployee,
                    department: e.target.value
                  })}
                  className="glass-input text-white"
                />
              </div>
              
              <div>
                <Label className="text-white/80">Статус</Label>
                <Select
                  value={selectedEmployee.status}
                  onValueChange={(value: Employee['status']) => setSelectedEmployee({
                    ...selectedEmployee,
                    status: value
                  })}
                >
                  <SelectTrigger className="glass-input text-white">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent className="bg-gray-900 border-white/20">
                    <SelectItem value="active" className="text-white hover:bg-white/10">Активен</SelectItem>
                    <SelectItem value="vacation" className="text-white hover:bg-white/10">В отпуске</SelectItem>
                    <SelectItem value="sick" className="text-white hover:bg-white/10">На больничном</SelectItem>
                    <SelectItem value="inactive" className="text-white hover:bg-white/10">Неактивен</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-white/80">Телефон</Label>
                  <Input
                    value={selectedEmployee.phone}
                    onChange={(e) => setSelectedEmployee({
                      ...selectedEmployee,
                      phone: e.target.value
                    })}
                    className="glass-input text-white"
                  />
                </div>
                <div>
                  <Label className="text-white/80">Зарплата</Label>
                  <Input
                    type="number"
                    value={selectedEmployee.salary}
                    onChange={(e) => setSelectedEmployee({
                      ...selectedEmployee,
                      salary: Number(e.target.value)
                    })}
                    className="glass-input text-white"
                  />
                </div>
              </div>
              
              <div>
                <Label className="text-white/80">Email</Label>
                <Input
                  type="email"
                  value={selectedEmployee.email}
                  onChange={(e) => setSelectedEmployee({
                    ...selectedEmployee,
                    email: e.target.value
                  })}
                  className="glass-input text-white"
                />
              </div>
              
              <div>
                <Label className="text-white/80">Адрес</Label>
                <Input
                  value={selectedEmployee.address}
                  onChange={(e) => setSelectedEmployee({
                    ...selectedEmployee,
                    address: e.target.value
                  })}
                  className="glass-input text-white"
                />
              </div>
              
              <div className="flex gap-2 pt-4">
                <Button 
                  onClick={() => setIsEditModalOpen(false)}
                  className="glass-button flex-1"
                >
                  <Save className="h-4 w-4 mr-2" />
                  Закрыть
                </Button>
                <Button 
                  variant="outline"
                  onClick={() => setIsEditModalOpen(false)}
                  className="glass-secondary flex-1"
                >
                  <X className="h-4 w-4 mr-2" />
                  Отмена
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}