'use client'

import { Edit, UserX, Phone, Mail, Calendar, Briefcase, MapPin, AlertCircle, MessageCircle } from 'lucide-react'

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'

interface Employee {
  id: string
  firstName: string
  lastName: string
  middleName?: string
  position: string
  phone: string
  email?: string
  avatar?: string
  hireDate: string
  status: 'ACTIVE' | 'VACATION' | 'SICK' | 'FIRED'
  salary?: number
  address?: string
  birthDate?: string
  passportSeries?: string
  passportNumber?: string
  passportIssued?: string
  passportDate?: string
  emergencyContact?: string
  emergencyPhone?: string
  telegram?: string
  whatsapp?: string
  passportPhoto?: string
  createdAt: string
  updatedAt: string
}

interface EmployeeCardProps {
  employee: Employee
  onEdit: (employee: Employee) => void
  onDelete: (employeeId: string) => void
  deletingEmployeeId: string | null
}

export function EmployeeCard({ employee, onEdit, onDelete, deletingEmployeeId }: EmployeeCardProps) {
  return (
    <div className="lg:w-80 flex-shrink-0">
      <div className="flex items-start space-x-4 mb-4">
        <Avatar className="h-16 w-16 ring-2 ring-white/20">
          {employee.avatar ? (
            <AvatarImage
              src={employee.avatar}
              alt={`${employee.firstName} ${employee.lastName}`}
              onError={(e) => {
                console.error('Ошибка загрузки аватара:', employee.avatar)
                e.currentTarget.style.display = 'none'
              }}
              onLoad={() => console.warn('Аватар загружен успешно:', employee.avatar)}
            />
          ) : null}
          <AvatarFallback className="bg-gradient-to-br from-purple-500 to-purple-600 text-white font-semibold text-lg">
            {employee.firstName.charAt(0)}
            {employee.lastName.charAt(0)}
          </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={() => onEdit(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}? Это действие
                      нельзя отменить.
                    </AlertDialogDescription>
                  </AlertDialogHeader>
                  <AlertDialogFooter>
                    <AlertDialogCancel className="glass-secondary text-white hover:text-white">
                      Отмена
                    </AlertDialogCancel>
                    <AlertDialogAction
                      onClick={() => onDelete(employee.id)}
                      disabled={deletingEmployeeId === employee.id}
                      className="bg-red-600 hover:bg-red-700 text-white"
                    >
                      {deletingEmployeeId === employee.id ? 'Увольнение...' : 'Уволить'}
                    </AlertDialogAction>
                  </AlertDialogFooter>
                </AlertDialogContent>
              </AlertDialog>
            </div>
          </div>

          <div className="mb-3">
            <h4 className="text-white font-semibold text-base">
              {employee.firstName} {employee.middleName} {employee.lastName}
            </h4>
            <p className="text-purple-300 font-medium">{employee.position}</p>
          </div>

          <div className="space-y-2 text-sm">
            {/* Основные контакты */}
            <div className="flex items-center text-white/70">
              <Phone className="h-3 w-3 mr-2 flex-shrink-0" />
              <span className="truncate">{employee.phone}</span>
            </div>
            {employee.email && (
              <div className="flex items-center text-white/70">
                <Mail className="h-3 w-3 mr-2 flex-shrink-0" />
                <span className="truncate">{employee.email}</span>
              </div>
            )}

            {/* Дата рождения */}
            {employee.birthDate && (
              <div className="flex items-center text-white/70">
                <Calendar className="h-3 w-3 mr-2 flex-shrink-0" />
                <span className="truncate">Родился: {new Date(employee.birthDate).toLocaleDateString('ru-RU')}</span>
              </div>
            )}

            {/* Дата приема на работу */}
            <div className="flex items-center text-white/70">
              <Briefcase className="h-3 w-3 mr-2 flex-shrink-0" />
              <span className="truncate">Принят: {new Date(employee.hireDate).toLocaleDateString('ru-RU')}</span>
            </div>

            {/* Адрес */}
            {employee.address && (
              <div className="flex items-center text-white/70">
                <MapPin className="h-3 w-3 mr-2 flex-shrink-0" />
                <span className="truncate">{employee.address}</span>
              </div>
            )}

            {/* Экстренный контакт */}
            {employee.emergencyContact && (
              <div className="flex items-center text-white/70">
                <AlertCircle className="h-3 w-3 mr-2 flex-shrink-0" />
                <span className="truncate">
                  Экстр. контакт: {employee.emergencyContact}
                  {employee.emergencyPhone && ` (${employee.emergencyPhone})`}
                </span>
              </div>
            )}

            {/* Мессенджеры */}
            <div className="flex gap-2">
              {employee.telegram && (
                <div className="flex items-center text-blue-400">
                  <MessageCircle className="h-3 w-3 mr-1 flex-shrink-0" />
                  <span className="truncate text-xs">@{employee.telegram}</span>
                </div>
              )}
              {employee.whatsapp && (
                <div className="flex items-center text-green-400">
                  <Phone className="h-3 w-3 mr-1 flex-shrink-0" />
                  <span className="truncate text-xs">{employee.whatsapp}</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
