import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { ShiftSwapForm } from '@/components/employee/shift-swap-form';
import DashboardLayout from '@/components/layout/dashboard-layout';
import { verifySession } from '@/lib/auth';
import { getTranslations, getCurrentLocale } from '@/lib/i18n';
import type { Employee } from '@/lib/types';

export default async function ShiftSwapPage() {
    const { user } = await verifySession();
    if (!user) return null;

    const locale = await getCurrentLocale();
    const t = getTranslations(locale).ShiftSwap;
    const tGlobal = getTranslations(locale).Global;
    
    // Get all employees except the current user to populate the dropdown
    const otherEmployees = (((await (await import('@/lib/postgres/data-access')).pgGetEmployees({ page: 1, pageSize: 5000 })).items || []) as Employee[])
          .filter((employee) => employee.id !== user.id && employee.role === 'employee');

  return (
    <DashboardLayout>
      <div className="mx-auto grid w-full max-w-2xl gap-2">
        <h1 className="text-3xl font-semibold">{t.title}</h1>
        <Card>
          <CardHeader>
            <CardTitle>{t.cardTitle}</CardTitle>
            <CardDescription>
                {t.cardDescription}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ShiftSwapForm employees={otherEmployees} t={t} tGlobal={tGlobal} />
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}