"use client"

import { AuthGuard } from '@/components/auth-guard'
import { EmployeeForm } from '@/components/employees/employee-form'
import { Card } from '@/components/ui/card'
import { Sidebar } from '@/components/dashboard/sidebar'
import { useSidebar } from '@/hooks/useSidebar'
import { UserPlus, ArrowLeft } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { useRouter } from 'next/navigation'

export default function NewEmployeePage() {
  const { getSidebarMargin } = useSidebar()
  const router = useRouter()

  return (
    <AuthGuard>
      <div className="h-screen flex overflow-hidden">
        <Sidebar />
        <main className={`flex-1 ${getSidebarMargin()} px-6 py-4 overflow-auto transition-all duration-300`}>
          <div className="max-w-4xl mx-auto">
            {/* Заголовок */}
            <div className="flex items-center space-x-4 mb-6">
              <Button
                variant="ghost"
                onClick={() => router.back()}
                className="text-white/80 hover:text-white hover:bg-white/10"
              >
                <ArrowLeft className="h-4 w-4 mr-2" />
                Назад
              </Button>
              <div className="flex items-center space-x-3">
                <UserPlus className="h-6 w-6 text-blue-400" />
                <div>
                  <h1 className="text-2xl font-bold text-white">Добавить сотрудника</h1>
                  <p className="text-white/60">Создание нового сотрудника организации</p>
                </div>
              </div>
            </div>

            {/* Форма */}
            <Card className="glass-card p-6">
              <EmployeeForm 
                onSave={(employeeData) => {
                  // TODO: Добавить создание сотрудника
                  console.log('Создание сотрудника:', employeeData)
                  router.push('/employees')
                }}
                onCancel={() => router.push('/employees')}
              />
            </Card>
          </div>
        </main>
      </div>
    </AuthGuard>
  )
} 