"use client"

import { useState } from 'react'
import { Sidebar } from '@/components/dashboard/sidebar'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Input } from '@/components/ui/input'
import { EmployeesList } from './employees-list'
import { EmployeeSchedule } from './employee-schedule'
import { 
  Users, 
  Calendar,
  Search,
  Plus,
  FileText
} from 'lucide-react'

export function EmployeesDashboard() {
  const [searchQuery, setSearchQuery] = useState('')

  return (
    <div className="min-h-screen bg-gradient-smooth flex">
      <Sidebar />
      <main className="flex-1 ml-56 p-6">
        <div className="max-w-7xl mx-auto">
          {/* Заголовок страницы */}
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-3">
              <Users className="h-8 w-8 text-purple-400" />
              <div>
                <h1 className="text-2xl font-bold text-white">Управление сотрудниками</h1>
                <p className="text-white/70">Личные данные, табель работы и учет</p>
              </div>
            </div>
            <Button className="glass-button">
              <Plus className="h-4 w-4 mr-2" />
              Добавить сотрудника
            </Button>
          </div>

          {/* Поиск */}
          <Card className="glass-card p-4 mb-6">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 h-4 w-4" />
              <Input
                placeholder="Поиск сотрудников..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="glass-input pl-10"
              />
            </div>
          </Card>

          {/* Основной контент с вкладками */}
          <Tabs defaultValue="list" className="w-full">
            <TabsList className="glass-card mb-6 grid w-full grid-cols-3">
              <TabsTrigger 
                value="list" 
                className="text-white data-[state=active]:bg-white/20 cursor-pointer"
              >
                <Users className="h-4 w-4 mr-2" />
                Список сотрудников
              </TabsTrigger>
              <TabsTrigger 
                value="schedule" 
                className="text-white data-[state=active]:bg-white/20 cursor-pointer"
              >
                <Calendar className="h-4 w-4 mr-2" />
                Табель работы
              </TabsTrigger>
              <TabsTrigger 
                value="reports" 
                className="text-white data-[state=active]:bg-white/20 cursor-pointer"
              >
                <FileText className="h-4 w-4 mr-2" />
                Отчеты
              </TabsTrigger>
            </TabsList>

            <TabsContent value="list">
              <EmployeesList searchQuery={searchQuery} />
            </TabsContent>

            <TabsContent value="schedule">
              <EmployeeSchedule />
            </TabsContent>

            <TabsContent value="reports">
              <Card className="glass-card p-8">
                <div className="text-center">
                  <FileText className="h-16 w-16 text-white/40 mx-auto mb-4" />
                  <h3 className="text-xl font-semibold text-white mb-2">Отчеты</h3>
                  <p className="text-white/70 mb-4">
                    Генерация отчетов по работе сотрудников
                  </p>
                  <p className="text-white/50 text-sm">Функция в разработке</p>
                </div>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}