"use client";

import { format } from "date-fns";
import Link from "next/link";
import type { PurchaseReturn, Supplier } from "@/lib/types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";

interface Props {
  returns: PurchaseReturn[];
  suppliers: Supplier[];
  currencyCode?: string;
  t?: Record<string, string>;
}

export default function PurchaseReturnList({ returns, suppliers, currencyCode = "USD", t = {} }: Props) {
  const money = (value: number) =>
    new Intl.NumberFormat('en-US', { style: 'currency', currency: currencyCode }).format(value || 0);

  const supplierName = (id: string) => suppliers.find((s) => s.id === id)?.name || "-";

  return (
    <Card>
      <CardHeader>
        <CardTitle>{t.title || "مردودات المشتريات"}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="relative w-full overflow-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="text-center">{t.returnNumber || "رقم المرتجع"}</TableHead>
                <TableHead className="text-center">{t.supplierName || "اسم المورد"}</TableHead>
                <TableHead className="text-center">{t.date || "التاريخ"}</TableHead>
                <TableHead className="text-center">{t.status || "الحالة"}</TableHead>
                <TableHead className="text-center">{t.total || "الإجمالي"}</TableHead>
                <TableHead className="text-center">{t.actions || "إجراءات"}</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {returns.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center text-muted-foreground py-6">
                    {t.noReturns || "لا توجد مردودات"}
                  </TableCell>
                </TableRow>
              ) : (
                returns.map((ret) => (
                  <TableRow key={ret.id}>
                    <TableCell className="text-center">{ret.returnNumber}</TableCell>
                    <TableCell className="text-center">{supplierName(ret.supplierId)}</TableCell>
                    <TableCell className="text-center">{format(new Date(ret.createdAt), "yyyy-MM-dd")}</TableCell>
                    <TableCell className="text-center">
                      {ret.status === 'cancelled' ? (
                        <Badge variant="outline" className="text-destructive border-destructive bg-destructive/10">
                          {ret.status}
                        </Badge>
                      ) : (
                        <Badge variant="secondary">{ret.status}</Badge>
                      )}
                    </TableCell>
                    <TableCell className="text-center">{money(ret.totalAmount)}</TableCell>
                    <TableCell className="text-center">
                      <Link href={`/admin/purchases/returns/${ret.id}`} className="underline text-primary">
                        {t.view || "معاينة"}
                      </Link>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  );
}