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

export default async function StatementPage() {
    const { user } = await verifySession();
    if (!user) {
        notFound();
    }

    const locale = await getCurrentLocale();
    const t = getTranslations(locale);
    const tGlobal = t.Global;
    const tAccountStatement = t.AccountStatement;

    const employee = (((await (await import('@/lib/postgres/data-access')).pgGetEmployees({ page: 1, pageSize: 5000 })).items || []) as Employee[])
            .find((entry) => entry.id === user.id);

    if (!employee) {
        return (
            <DashboardLayout>
                <div className="text-center">
                    <h1 className="text-2xl font-bold">{tGlobal.error}</h1>
                    <p>{tGlobal.employeeNotFound}</p>
                </div>
            </DashboardLayout>
        );
    }
    
    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">{tAccountStatement.title}</h1>
            </div>
            <div className="mx-auto w-full max-w-6xl mt-8">
               <AccountStatementTable data={statementData} t={tAccountStatement} currencySymbol={currencySymbol} />
            </div>
        </DashboardLayout>
    );
}