'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { useSession } from 'next-auth/react';
import { Clock, Calendar, FileText } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { PageTransition } from '@/components/layout/page-transition';
import {
  TimeClock,
  TimeEntryList,
  TimeEntryForm,
  TimeSummary,
} from '@/components/hr/time-tracking';
import type { TimeEntry } from '@/types/hr';

interface TimeTrackingContentProps {
  locale: string;
}

/**
 * Time tracking page content - Client Component
 * Provides time clock, entry list, and monthly summary
 */
export function TimeTrackingContent({ locale }: TimeTrackingContentProps) {
  const t = useTranslations('hr.timeTracking');
  const { data: session } = useSession();

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

  const employeeId = session?.user?.id || '1';

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

  return (
    <PageTransition>
      <div className="space-y-6">
        {/* Header */}
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{t('title')}</h1>
          <p className="text-muted-foreground">{t('description')}</p>
        </div>

        {/* Main content */}
        <div className="grid gap-6 lg:grid-cols-3">
          {/* Left column: Time Clock */}
          <div className="lg:col-span-1">
            <TimeClock locale={locale} />
          </div>

          {/* Right column: Tabs for entries and summary */}
          <div className="lg:col-span-2">
            <Tabs defaultValue="entries" className="w-full">
              <TabsList className="mb-4">
                <TabsTrigger value="entries" className="gap-2">
                  <FileText className="h-4 w-4" />
                  {t('entries')}
                </TabsTrigger>
                <TabsTrigger value="summary" className="gap-2">
                  <Calendar className="h-4 w-4" />
                  {t('summary')}
                </TabsTrigger>
              </TabsList>

              <TabsContent value="entries">
                <TimeEntryList
                  locale={locale}
                  employeeId={employeeId}
                  onEditEntry={handleEditEntry}
                />
              </TabsContent>

              <TabsContent value="summary">
                <TimeSummary locale={locale} employeeId={employeeId} />
              </TabsContent>
            </Tabs>
          </div>
        </div>

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