'use client'

import { Users, BarChart3, FileText, Calendar, Download, Plus } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'

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 EmployeeReportsProps {
  employees: Employee[]
  onShowAddForm: () => void
  onExportCSV: () => void
  onGenerateReport: () => void
}

export function EmployeeReports({ employees, onShowAddForm, onExportCSV, onGenerateReport }: EmployeeReportsProps) {
  if (employees.length === 0) {
    return (
      <Card className="glass-card p-6">
        <div className="flex items-center justify-center h-64">
          <div className="text-center">
            <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
              <BarChart3 className="h-8 w-8 text-white/40" />
            </div>
            <h3 className="text-lg font-medium text-white mb-2">Нет данных для отчетов</h3>
            <p className="text-white/60 text-sm mb-4">Добавьте сотрудников, чтобы генерировать отчеты и аналитику</p>
            <Button
              onClick={onShowAddForm}
              className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white border-0 shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40 transition-all duration-300"
            >
              <Plus className="h-4 w-4 mr-2" />
              Добавить сотрудника
            </Button>
          </div>
        </div>
      </Card>
    )
  }

  return (
    <div className="space-y-6">
      {/* Статистические карточки */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <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>
            <Users 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: Employee) => e.status === 'ACTIVE').length}
              </p>
            </div>
            <BarChart3 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.length > 0
                  ? Math.round(
                      employees.reduce((sum: number, e: Employee) => sum + (e.salary || 0), 0) / employees.length,
                    ).toLocaleString('ru-RU')
                  : '0'}{' '}
                ₽
              </p>
            </div>
            <FileText 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-orange-400">
                {new Set(employees.map((e: Employee) => e.position).filter(Boolean)).size}
              </p>
            </div>
            <Calendar className="h-8 w-8 text-orange-400" />
          </div>
        </Card>
      </div>

      {/* Экспорт отчетов */}
      <Card className="glass-card p-6">
        <h3 className="text-white font-medium mb-4 flex items-center gap-2">
          <Download className="h-5 w-5" />
          Экспорт отчетов
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-3">
            <h4 className="text-white/80 font-medium">Детальный отчет (CSV)</h4>
            <p className="text-white/60 text-sm">
              Полная информация о всех сотрудниках в формате таблицы для Excel/Google Sheets
            </p>
            <Button onClick={onExportCSV} className="w-full glass-button">
              <Download className="h-4 w-4 mr-2" />
              Скачать CSV
            </Button>
          </div>

          <div className="space-y-3">
            <h4 className="text-white/80 font-medium">Сводный отчет (TXT)</h4>
            <p className="text-white/60 text-sm">Краткая статистика и список сотрудников в текстовом формате</p>
            <Button onClick={onGenerateReport} className="w-full glass-button">
              <BarChart3 className="h-4 w-4 mr-2" />
              Создать отчет
            </Button>
          </div>
        </div>
      </Card>

      {/* Аналитика по отделам */}
      <Card className="glass-card p-6">
        <h3 className="text-white font-medium mb-4">Распределение по отделам</h3>
        <div className="space-y-3">
          {Array.from(new Set(employees.map((e: Employee) => e.position).filter(Boolean)) as Set<string>).map(
            (position: string) => {
              const positionEmployees = employees.filter((e: Employee) => e.position === position)
              const percentage = Math.round((positionEmployees.length / employees.length) * 100)

              return (
                <div key={position} className="flex items-center justify-between">
                  <div className="flex-1">
                    <div className="flex items-center justify-between mb-1">
                      <span className="text-white/80 text-sm">{position}</span>
                      <span className="text-white/60 text-xs">
                        {positionEmployees.length} чел. ({percentage}%)
                      </span>
                    </div>
                    <div className="w-full bg-white/10 rounded-full h-2">
                      <div
                        className="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full"
                        style={{ width: `${percentage}%` }}
                      ></div>
                    </div>
                  </div>
                </div>
              )
            },
          )}
        </div>
      </Card>
    </div>
  )
}
