import { type ReactNode } from "react";

import type { DefaultModel } from "@/back/types/global";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import trans from "@/hooks/use-translations";

interface DetailsTableProps {
  columns: {
    accessorKey: keyof DefaultModel;
    header: string;

    cell?: (params: { value: unknown }) => ReactNode;
  }[];
  model: DefaultModel;
  forceRenderValue?: boolean;
}

export default function DetailsTable({
  columns,
  model,
  forceRenderValue = false,
}: Readonly<DetailsTableProps>) {
  const tableNotKnownTrans = trans("uwil-backend::back.table_not_known");
  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>{trans("uwil-backend::back.table_field")}</TableHead>
            <TableHead>{trans("uwil-backend::back.table_value")}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {columns.map(({ accessorKey, header, cell }) => {
            const rawValue = model[accessorKey];

            const renderValue = (): ReactNode => {
              if (rawValue === null) {
                return (
                  <span className="text-sm italic text-muted-foreground">
                    {tableNotKnownTrans}
                  </span>
                );
              }

              if (forceRenderValue && cell) {
                return cell({ value: rawValue });
              }

              if (cell) {
                return cell({ value: rawValue });
              }

              if (
                typeof rawValue === "string" ||
                typeof rawValue === "number" ||
                typeof rawValue === "boolean"
              ) {
                return String(rawValue);
              }

              if (rawValue instanceof Date) {
                return rawValue.toLocaleString();
              }

              return JSON.stringify(rawValue);
            };

            return (
              <TableRow key={accessorKey}>
                <TableCell>{header}</TableCell>
                <TableCell>{renderValue()}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </div>
  );
}