import AccountStatementTable from '@/components/employee/account-statement-table';
import DashboardLayout from '@/components/layout/dashboard-layout';
import { notFound } from 'next/navigation';
import { getEmployeeStatement } from '@/lib/data-helpers';
import { getTranslations, getCurrentLocale } from '@/lib/i18n';
import { getCurrencySymbolAsync } from '@/lib/server-currency';
import type { Employee } from '@/lib/types';

export default async function AdminEmployeeStatementPage({ params }: { params: Promise<{ id: string }> }) {
    const { id } = await params;
    const employee = (((await (await import('@/lib/postgres/data-access')).pgGetEmployees({ page: 1, pageSize: 5000 })).items || []) as Employee[]).find((entry) => entry.id === id) as Employee | undefined;

    if (!employee) {
        notFound();
    }

    const locale = await getCurrentLocale();
    const t = getTranslations(locale).AccountStatement;
    
    const statementData = getEmployeeStatement(employee);
    const currencySymbol = await getCurrencySymbolAsync();

    return (
        <DashboardLayout>
             <div className="mx-auto grid w-full max-w-6xl gap-2">
                <h1 className="text-3xl font-semibold">{t.titleFor.replace('{employeeName}', employee.name)}</h1>
            </div>
            <div className="mx-auto w-full max-w-6xl mt-8">
               <AccountStatementTable data={statementData} t={t} currencySymbol={currencySymbol} />
            </div>
        </DashboardLayout>
    );
}

    
