'use client';

import { useRouter } from "next/navigation";
import { format } from "date-fns";
import { ar } from 'date-fns/locale';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Button } from "@/components/ui/button";
import { type ProductionReport } from "@/lib/types";
import { formatCurrency } from '@/lib/currency-formatter';

type ProductionReportListProps = {
    reports: ProductionReport[];
    t: any;
    locale: string;
    currencySymbol?: string;
}

export function ProductionReportList({ reports, t, locale, currencySymbol = '$' }: ProductionReportListProps) {
    const router = useRouter();

    const handleSelectReport = (date: string) => {
        router.push(`/admin/production?date=${date}`);
    }

    return (
        <Card>
            <CardHeader>
                <CardTitle>{t?.pastReportsTitle ?? 'التقارير السابقة'}</CardTitle>
                <CardDescription>{t?.pastReportsDescription ?? 'مراجعة التقارير المقدمة سابقًا.'}</CardDescription>
            </CardHeader>
            <CardContent>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead className="text-start">{t?.reportDate ?? 'التاريخ'}</TableHead>
                            <TableHead className="text-start">{t?.submittedBy ?? 'مقدم من'}</TableHead>
                            <TableHead className="text-end">{t?.salesTitle ?? 'المبيعات اليومية'}</TableHead>
                            <TableHead className="text-end">{t?.cashboxAmount ?? 'الصندوق'}</TableHead>
                            <TableHead className="text-end"></TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {reports.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={5} className="h-24 text-center text-muted-foreground">{t?.noReportsFound ?? 'لم يتم العثور على تقارير.'}</TableCell>
                            </TableRow>
                        ) : (
                            reports.map(report => (
                                <TableRow key={report.id}>
                                    <TableCell className="font-medium text-start">{format(new Date(report.date), 'PPP', {locale: locale === 'ar' ? ar : undefined})}</TableCell>
                                    <TableCell className="text-start">{report.submittedBy}</TableCell>
                                    <TableCell className="text-end">{formatCurrency(report.dailySales, currencySymbol)}</TableCell>
                                    <TableCell className="text-end">{formatCurrency(report.cashboxInventory, currencySymbol)}</TableCell>
                                    <TableCell className="text-end">
                                        <Button variant="outline" size="sm" onClick={() => handleSelectReport(report.id)}>
                                            {t?.viewReport ?? 'عرض'}
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
    );
}