"use client";

import type { DashboardRoleItem } from "@/components/dashboard/users/roles-types";
import { TableIconButton } from "@/components/dashboard/home/table-icon-button";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
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 { Eye, Pencil, Trash2 } from "lucide-react";
import { useLocale, useTranslations } from "next-intl";

interface RolesTableProps {
  data: DashboardRoleItem[];
  page: number;
  perPage: number;
  className?: string;
  onDelete: (id: number) => void;
  onToggleStatus: (id: number, nextStatus: boolean) => void;
}

export function RolesTable({
  data,
  page,
  perPage,
  className,
  onDelete,
  onToggleStatus,
}: RolesTableProps) {
  const t = useTranslations("dashboard.users.roles.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: "numeric",
      year: "numeric",
      hour: "numeric",
      minute: "2-digit",
      hour12: true,
    }).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-[980px] border-collapse bg-card">
        <TableHeader>
          <TableRow className="border-b border-border bg-highlights-bg hover:bg-highlights-bg">
            <TableHead className="h-12 w-14 text-center">#</TableHead>
            <TableHead className="h-12 w-[220px] text-center">
              {t("headers.roleName")}
            </TableHead>
            <TableHead className="h-12 w-[170px] text-center">
              {t("headers.usersCount")}
            </TableHead>
            <TableHead className="h-12 w-[120px] text-center">
              {t("headers.language")}
            </TableHead>
            <TableHead className="h-12 w-[140px] text-center">
              {t("headers.status")}
            </TableHead>
            <TableHead className="h-12 w-[190px] text-center">
              {t("headers.createdAt")}
            </TableHead>
            <TableHead className="h-12 w-[180px] text-center">
              {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">
                <TableCell className="text-center">{rowIndex}</TableCell>
                <TableCell className="text-center font-medium text-foreground">
                  {item.name}
                </TableCell>
                <TableCell className="text-center text-foreground">
                  {item.users_count}
                </TableCell>
                <TableCell className="text-center text-lg leading-none">
                  <span role="img" aria-label={t(`languages.${item.language}`)}>
                    {item.language === "ar" ? "🇸🇦" : "🇬🇧"}
                  </span>
                </TableCell>
                <TableCell>
                  <div className="flex items-center justify-center">
                    <Can module="roles" ability="edit" mode="disable">
                      <Switch
                        checked={item.is_active}
                        onCheckedChange={(nextStatus) => onToggleStatus(item.id, nextStatus)}
                      />
                    </Can>
                  </div>
                </TableCell>
                <TableCell className="text-center text-foreground">
                  {formatDate(item.created_at)}
                </TableCell>
                <TableCell>
                  <div className="flex items-center justify-center gap-2">
                    <Can module="roles" ability="delete">
                      <TableIconButton
                        label={t("actions.delete")}
                        className="h-8 w-8 rounded-[10px]"
                        icon={<Trash2 className="size-4" />}
                        onClick={() => onDelete(item.id)}
                      />
                    </Can>

                    <Can module="roles" ability="edit">
                      <Button
                        type="button"
                        variant="outline"
                        size="icon"
                        className="h-8 w-8 rounded-[10px]"
                        asChild
                      >
                        <Link href={`/dashboard/users/roles/${item.id}/edit`}>
                          <span className="sr-only">{t("actions.edit")}</span>
                          <Pencil className="size-4" />
                        </Link>
                      </Button>
                    </Can>

                    <Can module="roles" ability="view">
                      <Button
                        type="button"
                        variant="outline"
                        size="icon"
                        className="h-8 w-8 rounded-[10px]"
                        asChild
                      >
                        <Link href={`/dashboard/users/roles/${item.id}/edit`}>
                          <span className="sr-only">{t("actions.preview")}</span>
                          <Eye className="size-4" />
                        </Link>
                      </Button>
                    </Can>
                  </div>
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </div>
  );
}