'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { ArrowLeft, Plus, Filter } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { PageTransition } from '@/components/layout/page-transition';
import { AbsenceCalendar, AbsenceRequestForm } from '@/components/hr/absences';

interface AbsenceCalendarPageContentProps {
  locale: string;
}

// Mock departments - in production, this would come from the API
const mockDepartments = [
  { id: 'all', name: 'Alle Abteilungen' },
  { id: '1', name: 'IT & Entwicklung' },
  { id: '2', name: 'Personal' },
  { id: '3', name: 'Vertrieb' },
  { id: '4', name: 'Lager & Logistik' },
];

/**
 * Absence calendar page content - Client Component
 * Shows team absences with department filter
 */
export function AbsenceCalendarPageContent({ locale }: AbsenceCalendarPageContentProps) {
  const t = useTranslations('hr.absences');

  const [requestDialog, setRequestDialog] = useState(false);
  const [selectedDepartment, setSelectedDepartment] = useState<string>('all');

  const departmentId = selectedDepartment === 'all' ? undefined : selectedDepartment;

  return (
    <PageTransition>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" asChild>
            <Link href={`/${locale}/hr/absences`}>
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <div className="flex-1">
            <h1 className="text-2xl font-bold tracking-tight">{t('teamCalendar')}</h1>
            <p className="text-sm text-muted-foreground">{t('teamCalendarDesc')}</p>
          </div>
          <div className="flex items-center gap-2">
            <Select value={selectedDepartment} onValueChange={setSelectedDepartment}>
              <SelectTrigger className="w-[200px]">
                <Filter className="mr-2 h-4 w-4" />
                <SelectValue placeholder={t('selectDepartment')} />
              </SelectTrigger>
              <SelectContent>
                {mockDepartments.map((dept) => (
                  <SelectItem key={dept.id} value={dept.id}>
                    {dept.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Button onClick={() => setRequestDialog(true)} className="gap-2">
              <Plus className="h-4 w-4" />
              {t('newRequest')}
            </Button>
          </div>
        </div>

        {/* Calendar */}
        <AbsenceCalendar locale={locale} departmentId={departmentId} />

        {/* Request dialog */}
        <AbsenceRequestForm
          open={requestDialog}
          onOpenChange={setRequestDialog}
          locale={locale}
        />
      </div>
    </PageTransition>
  );
}
