import { ColumnDef } from "@tanstack/react-table";
import { Button } from "@/shared/common/ui/button";
import { Trash2, Edit } from "lucide-react";
import { NewsCategoryItem } from "../types/newsCategoryType";
import { t } from "i18next";
import i18n from "@/i18n";
export const NewsCategoryColumnDefn = ({
  onDelete,
  navigate,
}: {
  onDelete?: (id: string) => Promise<void>;
  navigate: (id: string) => void;
}): ColumnDef<NewsCategoryItem>[] => [
  {
    accessorKey: "image",
    header: () => t("toogle.image"),
    cell: ({ row }) => {
      const rowData = row.original;
      return rowData.presigned ? (
        <img
          src={rowData.presigned}
          alt="Category"
          className="w-12 h-12 object-cover rounded-md"
        />
      ) : (
        <div className="w-12 h-12 bg-gray-200 rounded-md flex items-center justify-center">
          <span className="text-xs text-gray-500">No Image</span>
        </div>
      );
    },
    enableHiding: true,
  },
  {
    accessorKey: "title",
    header: () => t("toogle.title"),
    cell: ({ row }) => {
      const rowData = row.original;
      const lang = i18n.language;
      const title =
        lang === "am"
          ? rowData.newsCategoryTitle?.am
          : rowData.newsCategoryTitle?.en;
      return <span className="font-medium">{title || "-"}</span>;
    },
    enableHiding: true,
  },
  {
    accessorKey: "description",
    header: () => t("toogle.description"),
    cell: ({ row }) => {
      const rowData = row.original;
      const lang = i18n.language;
      const description =
        lang === "am"
          ? rowData.newsCategoryDescription?.am
          : rowData.newsCategoryDescription?.en;
      return (
        <span className="text-sm text-gray-600 max-w-xs truncate block">
          {description || "-"}
        </span>
      );
    },
    enableHiding: true,
  },
  {
    accessorKey: "color",
    header: () => t("toogle.color"),
    cell: ({ row }) => {
      const rowData = row.original;
      return (
        <div className="flex items-center gap-2">
          <div
            className="w-6 h-6 rounded-full border border-gray-300"
            style={{ backgroundColor: rowData.color || "#007BFF" }}
          />
          <span className="text-xs font-mono">
            {rowData.color || "#007BFF"}
          </span>
        </div>
      );
    },
    enableHiding: true,
  },
  {
    accessorKey: "status",
    header: () => t("toogle.status"),
    cell: ({ row }) => {
      const rowData = row.original;
      return (
        <span
          className={`px-2 py-1 rounded-full text-xs font-medium ${
            rowData.isActive
              ? "bg-primary-100 text-primary-800"
              : "bg-red-100 text-red-800"
          }`}
        >
          {rowData.isActive ? "Active" : "Inactive"}
        </span>
      );
    },
    enableHiding: true,
  },
  {
    accessorKey: "createdAt",
    header: () => t("toogle.createdAt"),
    cell: ({ row }) => {
      const rowData = row.original;
      const lang = i18n.language;
      const amDate = rowData?.amharicCreatedAt;
      const enDate = new Date(rowData.createdAt).toLocaleString("en-US", {
        month: "short", // "Oct"
        day: "numeric", // "12"
        year: "numeric", // "2014"
        hour: "numeric", // "8"
        minute: "2-digit", // "12"
        hour12: true, // "PM" format
      });
      const date = lang === "am" ? amDate : enDate;
      return <span className="text-sm text-gray-500">{date}</span>;
    },
    enableHiding: true,
  },
  {
    accessorKey: "Actions",
    header: () => t("toogle.Actions"),
    cell: ({ row }) => (
      <div className="flex space-x-2">
        <Button
          variant="ghost"
          size="icon"
          onClick={() =>
            navigate(
              `/user-management/web-management/Category/EditCategory/${row.original.id}`
            )
          }
          title="Edit"
        >
          <Edit className="h-4 w-4" />
        </Button>
        {onDelete && (
          <Button
            variant="ghost"
            size="icon"
            onClick={() => onDelete(row.original.id)}
            title="Delete"
          >
            <Trash2 className="h-4 w-4 text-destructive" />
          </Button>
        )}
      </div>
    ),
  },
];
