'use client';

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

interface AbsenceRequestsContentProps {
  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 requests approval page content - Client Component
 * Shows pending requests for managers to approve/reject
 */
export function AbsenceRequestsContent({ locale }: AbsenceRequestsContentProps) {
  const t = useTranslations('hr.absences');

  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('pendingApprovals')}</h1>
            <p className="text-sm text-muted-foreground">{t('pendingApprovalsManagerDesc')}</p>
          </div>
          <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>
        </div>

        {/* Tabs */}
        <Tabs defaultValue="pending" className="w-full">
          <TabsList>
            <TabsTrigger value="pending">{t('pending')}</TabsTrigger>
            <TabsTrigger value="calendar" className="gap-2">
              <Calendar className="h-4 w-4" />
              {t('overview')}
            </TabsTrigger>
          </TabsList>

          <TabsContent value="pending" className="mt-6">
            <AbsenceApprovalList locale={locale} departmentId={departmentId} />
          </TabsContent>

          <TabsContent value="calendar" className="mt-6">
            <AbsenceCalendar locale={locale} departmentId={departmentId} />
          </TabsContent>
        </Tabs>
      </div>
    </PageTransition>
  );
}
