"use client";

import type {
  DashboardUserItem,
} from "@/components/dashboard/users/users-types";
import { UserStatusBadge } from "@/components/dashboard/users/user-status-badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Can } from "@/components/auth/can";
import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";
import { MoreVertical } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";

interface UsersTableProps {
  data: DashboardUserItem[];
  page: number;
  perPage: number;
  className?: string;
  onEditRole: (id: number) => void;
  onDisable: (id: number) => void;
  onEnable: (id: number) => void;
  onDelete: (id: number) => void;
}

export function UsersTable({
  data,
  page,
  perPage,
  className,
  onEditRole,
  onDisable,
  onEnable,
  onDelete,
}: UsersTableProps) {
  const t = useTranslations("dashboard.users.table");
  const tCommon = useTranslations("common");
  const locale = useLocale();
  const isRtl = locale === "ar";

  const formatDate = (value: string) =>
    new Intl.DateTimeFormat(isRtl ? "ar-SA" : "en-US", {
      day: "numeric",
      month: "long",
      year: "numeric",
    }).format(new Date(value));

  if (!data.length) {
    return (
      <div className="flex h-52 items-center justify-center text-sm text-muted-foreground">
        {tCommon("noResults")}
      </div>
    );
  }

  return (
    <div className={cn("w-full overflow-x-auto", className)}>
      <Table className="min-w-[1120px] border-collapse bg-card">
        <TableHeader>
          <TableRow className="border-b border-border bg-highlights-bg hover:bg-highlights-bg">
            <TableHead className="h-12 w-14 px-4 text-center text-sm font-bold text-foreground">
              #
            </TableHead>
            <TableHead className="h-12 w-[220px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.name")}
            </TableHead>
            <TableHead className="h-12 w-[220px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.email")}
            </TableHead>
            <TableHead className="h-12 w-[170px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.phone")}
            </TableHead>
            <TableHead className="h-12 w-[130px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.role")}
            </TableHead>
            <TableHead className="h-12 w-[120px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.language")}
            </TableHead>
            <TableHead className="h-12 w-[120px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.status")}
            </TableHead>
            <TableHead className="h-12 w-[170px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.joinedAt")}
            </TableHead>
            <TableHead className="h-12 w-[120px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.settings")}
            </TableHead>
          </TableRow>
        </TableHeader>

        <TableBody>
          {data.map((item, index) => {
            const rowIndex = (page - 1) * perPage + index + 1;

            return (
              <TableRow
                key={item.id}
                className="h-[72px] border-b border-divider bg-card hover:bg-card"
              >
                <TableCell className="px-4 text-center text-sm">{rowIndex}</TableCell>
                <TableCell className="px-4 text-center text-sm font-medium text-foreground">
                  {item.first_name} {item.last_name}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {item.email}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground" dir="ltr">
                  {item.mobile_country_code} {item.mobile_number}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {item.role.name}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {t(`languages.${item.language}`)}
                </TableCell>
                <TableCell className="px-4 text-center">
                  <UserStatusBadge status={item.is_active ? "active" : "disabled"} />
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {formatDate(item.created_at)}
                </TableCell>
                <TableCell className="px-4 text-center">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button
                        type="button"
                        variant="outline"
                        size="icon"
                        className="h-10 w-10 rounded-xl border-border text-muted-foreground"
                      >
                        <MoreVertical className="size-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-44">
                      <Can module="users" ability="edit">
                        <DropdownMenuItem asChild>
                          <Link href={`/dashboard/users/${item.id}/edit`}>
                            {t("actions.edit")}
                          </Link>
                        </DropdownMenuItem>
                      </Can>
                      <DropdownMenuItem onClick={() => onEditRole(item.id)}>
                        {t("actions.editRole")}
                      </DropdownMenuItem>
                      {item.is_active ? (
                        <DropdownMenuItem onClick={() => onDisable(item.id)}>
                          {t("actions.disable")}
                        </DropdownMenuItem>
                      ) : (
                        <DropdownMenuItem onClick={() => onEnable(item.id)}>
                          {t("actions.enable")}
                        </DropdownMenuItem>
                      )}
                      <Can module="users" ability="delete">
                        <DropdownMenuItem
                          variant="destructive"
                          onClick={() => onDelete(item.id)}
                        >
                          {t("actions.delete")}
                        </DropdownMenuItem>
                      </Can>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </div>
  );
}