"use client";

import type { DashboardPageItem } from "@/components/dashboard/pages/pages-types";
import { StatusBadge } from "@/components/ui/status-badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { useLocale, useTranslations } from "next-intl";

interface PagesTableProps {
  data: DashboardPageItem[];
  page: number;
  perPage: number;
  className?: string;
}

export function PagesTable({ data, page, perPage, className }: PagesTableProps) {
  const t = useTranslations("dashboard.pages.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-[1040px] 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-[320px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.title")}
            </TableHead>
            <TableHead className="h-12 w-[180px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.location")}
            </TableHead>
            <TableHead className="h-12 w-[140px] px-4 text-center text-sm font-bold text-foreground">
              {t("headers.language")}
            </TableHead>
            <TableHead className="h-12 w-[140px] 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.updatedAt")}
            </TableHead>
            <TableHead className="h-12 w-[140px] 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;
            const localizedTitle = isRtl ? item.title.ar : item.title.en;
            const localizedLocation = isRtl ? item.location.ar : item.location.en;

            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">
                  {localizedTitle}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {localizedLocation}
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {t(`languages.${item.language}`)}
                </TableCell>
                <TableCell className="px-4 text-center">
                  <StatusBadge status={item.status} className="h-7 min-w-[76px]" />
                </TableCell>
                <TableCell className="px-4 text-center text-sm text-foreground">
                  {formatDate(item.updatedAt)}
                </TableCell>
                <TableCell className="px-4 text-center text-xs text-muted-foreground">
                  {t("actions.comingSoon")}
                </TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </div>
  );
}