"use client";

import type { DashboardPageItem } from "@/components/dashboard/pages/pages-types";
import {
  Column,
  DataTable,
  DateTimeCell,
  RowActionsIcons,
} from "@/components/ui/data-table";
import { Switch } from "@/components/ui/switch";
import { Eye, Pencil, Trash2 } from "lucide-react";
import { useTranslations } from "next-intl";

interface PagesTableProps {
  data: DashboardPageItem[];
  page: number;
  perPage: number;
  onToggleStatus: (item: DashboardPageItem) => void;
  onDelete: (item: DashboardPageItem) => void;
  onEdit: (item: DashboardPageItem) => void;
  onPreview: (item: DashboardPageItem) => void;
}

export function PagesTable({
  data,
  page,
  perPage,
  onToggleStatus,
  onDelete,
  onEdit,
  onPreview,
}: PagesTableProps) {
  const t = useTranslations("dashboard.pages.table.headers");
  const tCommon = useTranslations("dashboard.taxonomy.common");

  const columns: Column<DashboardPageItem>[] = [
    {
      key: "title",
      header: t("title"),
      width: 240,
      render: (item) => (
        <span className="font-medium text-foreground">{item.title || "—"}</span>
      ),
    },
    {
      key: "location",
      header: t("location"),
      width: 200,
      render: (item) => <>{item.location || "—"}</>,
    },
    {
      key: "language",
      header: t("language"),
      width: 100,
      cellClassName: "text-lg leading-none",
      render: (item) => (
        <span role="img" aria-label={item.language}>
          {item.language === "ar" ? "🇸🇦" : "🇬🇧"}
        </span>
      ),
    },
    {
      key: "slug",
      header: t("slug"),
      width: 200,
      render: (item) => <>{item.slug || "—"}</>,
    },
    {
      key: "status",
      header: t("status"),
      width: 110,
      render: (item) => (
        <div className="flex items-center justify-center">
          <Switch
            checked={item.isActive}
            onCheckedChange={() => onToggleStatus(item)}
            aria-label={t("status")}
          />
        </div>
      ),
    },
    {
      key: "createdAt",
      header: t("createdAt"),
      width: 180,
      render: (item) => (
        <DateTimeCell date={item.createdAt} time={item.createdAt} />
      ),
    },
    {
      key: "settings",
      header: t("settings"),
      width: 160,
      render: (item) => (
        <RowActionsIcons
          items={[
            {
              label: tCommon("deleteButton"),
              icon: <Trash2 className="size-4" />,
              onClick: () => onDelete(item),
            },
            {
              label: tCommon("editButton"),
              icon: <Pencil className="size-4" />,
              onClick: () => onEdit(item),
            },
            {
              label: tCommon("previewButton"),
              icon: <Eye className="size-4" />,
              onClick: () => onPreview(item),
            },
          ]}
        />
      ),
    },
  ];

  return (
    <DataTable
      data={data}
      columns={columns}
      page={page}
      perPage={perPage}
      minWidth={1240}
    />
  );
}