import { ColumnDef } from "@tanstack/react-table";
import { Button } from "@/shared/common/ui/button";
import { Trash2, Edit, Eye, Star } from "lucide-react";
import { NewsItem } from "../types/newsTypes";
import { t } from "i18next";
import i18n from "@/i18n";

export const NewsColumnDefn = ({
  onDelete,
  navigate,
}: {
  onDelete?: (id: string) => Promise<void>;
  navigate: (id: string) => void;
}): ColumnDef<NewsItem>[] => [
    {
      accessorKey: "title",
      header: () => t("toogle.title"),
      cell: ({ row }) => {
        const rowData = row.original;
        const lang = i18n.language;
        const title = lang === "am" ? rowData.title?.am : rowData.title?.en;
        return <span className="font-medium">{title || "-"}</span>;
      },
      enableHiding: true,
    },

    {
      accessorKey: "category",
      header: () => t("toogle.category"),
      cell: ({ row }) => {
        const rowData = row.original;
        const lang = i18n.language;
        const categoryTitle =
          lang === "am"
            ? rowData.newsCategory?.newsCategoryTitle?.am
            : rowData.newsCategory?.newsCategoryTitle?.en;
        return (
          <span className="text-sm text-primary-600 bg-primary-50 px-2 py-1 rounded-full">
            {categoryTitle || "No Category"}
          </span>
        );
      },
      enableHiding: true,
    },
    {
      accessorKey: "featured",
      header: () => t("toogle.featured"),
      cell: ({ row }) => {
        const rowData = row.original;
        return (
          <div className="flex items-center justify-center">
            {rowData.isFeatured ? (
              <Star className="h-4 w-4 text-yellow-500 fill-current" />
            ) : (
              <Star className="h-4 w-4 text-gray-300" />
            )}
          </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/News/EditNews/${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>
      ),
    },
  ];
