import DashboardLayout from '@/components/layout/dashboard-layout';
import { DataNav } from '@/components/admin/data-nav';
import { getCurrentLocale, getTranslations } from '@/lib/i18n';

export default async function ReportsLayout({ children }: { children: React.ReactNode }) {
  const locale = await getCurrentLocale();
  const t = getTranslations(locale);
  const tDashboard = t.DashboardLayout ?? {};

  const navLinks = [
    {
      title: tDashboard.operationalReports ?? 'التقارير التشغيلية',
      href: '/admin/reports/operations',
      subLinks: [
        {
          title: tDashboard.salesReports ?? 'تقارير المبيعات',
          href: '/admin/reports/operations/sales',
        },
        {
          title: tDashboard.inventoryReports ?? 'تقارير المخزون',
          href: '/admin/reports/operations/inventory',
        },
        {
          title: tDashboard.purchaseReports ?? 'تقارير المشتريات',
          href: '/admin/reports/operations/purchases',
        },
        {
          title: tDashboard.receivablesReports ?? 'تقارير الذمم والتحصيل',
          href: '/admin/reports/operations/receivables',
        },
      ],
    },
    {
      title: tDashboard.financialReports ?? 'التقارير المالية',
      href: '/admin/reports/financial',
    },
    {
      title: tDashboard.partyStatement ?? 'كشف الحساب',
      href: '/admin/reports/statement',
    },
    {
      title: tDashboard.balancesReport ?? 'الأرصدة',
      href: '/admin/reports/balances',
    },
    {
      title: tDashboard.advancedReports ?? 'التقارير المتقدمة',
      href: '/admin/reports/advanced',
    },
  ];

  return (
    <DashboardLayout>
      <div className="grid w-full max-w-[1700px] gap-1 me-auto ms-0 pe-2 sm:pe-4">
        <h1 className="text-3xl font-semibold">{tDashboard.reports ?? 'التقارير'}</h1>
        <div className="w-full border-b mt-2 flex justify-end">
          <DataNav links={navLinks} />
        </div>
        <div className="mt-3">{children}</div>
      </div>
    </DashboardLayout>
  );
}