import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import DashboardLayout from '@/components/layout/dashboard-layout';
import { verifySession } from '@/lib/auth';
import MyTasksTable from '@/components/employee/my-tasks-table';
import { getTranslations, getCurrentLocale } from '@/lib/i18n';
import type { Employee, LeaveRequest } from '@/lib/types';

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

    const locale = await getCurrentLocale();
    const t = getTranslations(locale).MyTasks;

    const incomingRequests = (((await (await import('@/lib/postgres/data-access')).pgGetEmployees({ page: 1, pageSize: 5000 })).items || []) as Employee[])
          .reduce<LeaveRequest[]>((acc, employee) => {
            (employee.leaveRequests || []).forEach((req) => {
              if (req.toEmployeeId === user.id && req.status === 'pending') {
                acc.push({
                  ...req,
                  employeeId: employee.id,
                  employeeName: employee.name,
                } as LeaveRequest);
              }
            });
            return acc;
          }, []);;
    
  return (
    <DashboardLayout>
      <div className="mx-auto grid w-full max-w-6xl gap-2">
        <h1 className="text-3xl font-semibold">{t.title}</h1>
        <Card>
          <CardHeader>
            <CardTitle>{t.cardTitle}</CardTitle>
            <CardDescription>
                {t.cardDescription}
            </CardDescription>
          </CardHeader>
          <CardContent>
            <MyTasksTable requests={incomingRequests} t={t} />
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  );
}