"use client";

import { useState } from "react";
import { TableColumn } from "react-data-table-component";
import { FaEdit, FaTrash, FaEye } from "react-icons/fa";
import { AiOutlineCheck, AiOutlineClose } from "react-icons/ai";

import CustomDataTable from "@/src/components/admin/tables/customTableComponent";
import { useTableActions } from "@/src/hooks/admin/useTableAction";
import StatusBadge from "@/src/components/admin/StatusBadge";
import ActionGroup from "@/src/components/admin/ui/button/ActionGroup";
import ActionButton from "@/src/components/admin/ui/button/ActionButton";
import { useStateContext } from "@/src/context/admin/StateContext";
import { truncateText } from "@/src/utils/admin/textUtils";

export default function BlogList() {
  const [filteredUrl] = useState("/blog/ajax/blog-list");
  const { refresh } = useStateContext();
  const { toggleStatus, editItem, deleteItemAction } = useTableActions("blog");

  const columns: TableColumn<any>[] = [
    {
      name: "Sr. No.",
      selector: (row) => row.serial,
      width: "80px",
    },
    {
      name: "Image",
      cell: (row) =>
        row.blog_image ? (
          <div className="relative group">
            <img
              src={row.blog_image}
              alt={row.title}
              className="w-28 h-16 object-cover rounded border m-1"
            />
            <a
              href={row.blog_image}
              target="_blank"
              rel="noopener noreferrer"
              className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center"
            >
              <FaEye className="text-white" />
            </a>
          </div>
        ) : (
          <span className="text-gray-400 text-sm">No Image</span>
        ),
      width: "160px",
    },
    {
      name: "Title",
      cell: (row) => <span title={row.title}>{truncateText(row.title, 10)}</span>,

    },
    {
      name: "View",
      cell: (row) => (
        <ActionButton
          title="Preview Blog"
          onClick={() => window.open(`/blog/${row.meta_url}?preview=admin`, "_blank")}
        >
          <FaEye size={15} />
        </ActionButton>
      ),
      width: "100px",
      ignoreRowClick: true,
    },
    {
      name: "Category",
      selector: (row) => row.category || "-",
      width: "180px",
    },
    {
      name: "Status",
      cell: (row) => <StatusBadge isActive={row.status === 1} />,
      width: "120px",
    },
    {
      name: "Actions",
      cell: (row) => (
        <ActionGroup>
          <ActionButton
            variant="edit"
            onClick={() => editItem(row.id, "add-blog")}
            title="Edit"
          >
            <FaEdit size={15} />
          </ActionButton>

          <ActionButton
            variant="delete"
            onClick={() => deleteItemAction(row.id)}
            title="Delete"
          >
            <FaTrash size={15} />
          </ActionButton>

          <ActionButton
            variant="active"
            onClick={() => toggleStatus(row.id, row.status)}
            title="Toggle Status"
          >
            {row.status === 1 ? <AiOutlineCheck /> : <AiOutlineClose />}
          </ActionButton>
        </ActionGroup>
      ),
      width: "200px",
      ignoreRowClick: true,
    },
  ];


  const BLOG_LIST_EXCEL_CONFIG = {
    fileName: "Blog List Sheet" as string,
    headers: [
      "Sr. No.",
      "Image",
      "Title",
      "Category",
      "Status",
    ] as const,
    rowMapper: (row: any) => {
      return [
        row?.serial || "—",
        row?.blog_image || "—",
        row?.title || "—",
        row?.category || "—",
        row?.status === 1 ? "Active" : "Inactive", // match StatusBadge
      ];
    },
  } satisfies {
    fileName: string;
    headers: string[];
    rowMapper: (r: any) => any[];
  }

  return (
    <div className="table-container max-w-full">
      <CustomDataTable
        tableName="Blogs"
        url={filteredUrl}
        columns={columns}
        refresh={refresh}
        search={true}
        enableExport={true}
        EXCEL_CONFIG={BLOG_LIST_EXCEL_CONFIG}
      />
    </div>
  );
}