'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import Link from 'next/link';
import { format, subMonths, addMonths } from 'date-fns';
import { de, enUS } from 'date-fns/locale';
import { ArrowLeft, ChevronLeft, ChevronRight, User, Calendar } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { PageTransition } from '@/components/layout/page-transition';
import { TimeSummary, TimeEntryList, TimeEntryForm } from '@/components/hr/time-tracking';
import { useTimeSummary } from '@/hooks/hr/use-time-tracking';
import type { TimeEntry } from '@/types/hr';

interface EmployeeTimeAccountContentProps {
  locale: string;
  employeeId: string;
}

/**
 * Employee time account detail view
 * Shows monthly summary and all entries for a specific employee
 */
export function EmployeeTimeAccountContent({
  locale,
  employeeId,
}: EmployeeTimeAccountContentProps) {
  const t = useTranslations('hr.timeTracking');
  const dateLocale = locale === 'de' ? de : enUS;

  const [currentDate, setCurrentDate] = useState(new Date());
  const [correctionDialog, setCorrectionDialog] = useState(false);
  const [selectedEntry, setSelectedEntry] = useState<TimeEntry | null>(null);

  const year = currentDate.getFullYear();
  const month = currentDate.getMonth() + 1;

  const { data: summary, isLoading } = useTimeSummary(employeeId, year, month);

  const goToPreviousMonth = () => setCurrentDate(subMonths(currentDate, 1));
  const goToNextMonth = () => setCurrentDate(addMonths(currentDate, 1));

  const handleEditEntry = (entry: TimeEntry) => {
    setSelectedEntry(entry);
    setCorrectionDialog(true);
  };

  // Mock employee data - in production, this would come from the API
  const employee = summary?.entries[0]?.employee || {
    firstName: 'Mitarbeiter',
    lastName: '',
    avatarUrl: undefined,
  };

  return (
    <PageTransition>
      <div className="space-y-6">
        {/* Header with back button */}
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="icon" asChild>
            <Link href={`/${locale}/hr/time-tracking`}>
              <ArrowLeft className="h-4 w-4" />
            </Link>
          </Button>
          <div className="flex-1">
            {isLoading ? (
              <Skeleton className="h-8 w-48" />
            ) : (
              <div className="flex items-center gap-3">
                <Avatar className="h-10 w-10">
                  <AvatarImage src={employee.avatarUrl} />
                  <AvatarFallback>
                    {employee.firstName[0]}
                    {employee.lastName[0] || ''}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <h1 className="text-2xl font-bold tracking-tight">
                    {employee.firstName} {employee.lastName}
                  </h1>
                  <p className="text-sm text-muted-foreground">{t('timeAccount')}</p>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Month navigation */}
        <Card>
          <CardContent className="flex items-center justify-between py-4">
            <Button variant="outline" size="icon" onClick={goToPreviousMonth}>
              <ChevronLeft className="h-4 w-4" />
            </Button>
            <div className="flex items-center gap-2">
              <Calendar className="h-5 w-5 text-muted-foreground" />
              <span className="text-lg font-medium">
                {format(currentDate, 'MMMM yyyy', { locale: dateLocale })}
              </span>
            </div>
            <Button variant="outline" size="icon" onClick={goToNextMonth}>
              <ChevronRight className="h-4 w-4" />
            </Button>
          </CardContent>
        </Card>

        {/* Content grid */}
        <div className="grid gap-6 lg:grid-cols-2">
          {/* Summary */}
          <TimeSummary locale={locale} employeeId={employeeId} year={year} month={month} />

          {/* Entries */}
          <TimeEntryList
            locale={locale}
            employeeId={employeeId}
            onEditEntry={handleEditEntry}
          />
        </div>

        {/* Correction dialog */}
        <TimeEntryForm
          open={correctionDialog}
          onOpenChange={setCorrectionDialog}
          entry={selectedEntry}
        />
      </div>
    </PageTransition>
  );
}
