import React, { useMemo, useState } from "react";
import {
  useReactTable,
  getCoreRowModel,
  flexRender,
  createColumnHelper,
} from "@tanstack/react-table";
import {
  PurchaseOrder,
  PurchaseOrderStatus,
} from "../../../../types/purchase-order";
import {
  MdKeyboardArrowUp,
  MdKeyboardArrowDown,
  MdKeyboardArrowLeft,
  MdKeyboardArrowRight,
  MdVisibility,
  MdEdit,
  MdDelete,
} from "react-icons/md";
import StatusBadge from "../../../../components/ui/StatusBadge";
import ActionDropdown from "../../../../components/ui/ActionDropdown";
import { useRouter } from "next/navigation";
import { formatDate } from "../../../../utils/dateUtils";
import PurchaseOrderStatusModal from "../../../../components/ui/PurchaseOrderStatusModal";

interface PurchaseTableProps {
  data: PurchaseOrder[];
  currentPage: number;
  setCurrentPage: (page: number) => void;
  pageSize: number;
  setPageSize: (size: number) => void;
  onDeleteOrder: (id: string | number) => Promise<void>;
  totalItems: number;
  totalPages: number;
  sortBy: string;
  sortOrder: "ASC" | "DESC";
  onSort: (field: string) => void;
}

const PurchaseTable = ({
  data,
  currentPage,
  setCurrentPage,
  pageSize,
  setPageSize,
  onDeleteOrder,
  totalItems,
  totalPages,
  sortBy,
  sortOrder,
  onSort,
}: PurchaseTableProps) => {
  const router = useRouter();
  const [statusModalOpen, setStatusModalOpen] = useState(false);
  const [selectedOrder, setSelectedOrder] = useState<PurchaseOrder | null>(
    null
  );

  const columnHelper = createColumnHelper<PurchaseOrder>();

  // Function to handle row click navigation
  const handleRowClick = (row: PurchaseOrder) => {
    const targetUrl =
      row.status === PurchaseOrderStatus.DRAFT
        ? `/purchase-orders/${row.id}/review`
        : `/purchase-orders/${row.id}`;
    router.push(targetUrl);
  };

  // Function to handle status badge click
  const handleStatusClick = (order: PurchaseOrder, e: React.MouseEvent) => {
    e.stopPropagation();

    // Don't open modal for draft and submitted status
    if (
      order.status === PurchaseOrderStatus.DRAFT ||
      order.status === PurchaseOrderStatus.SUBMITTED
    ) {
      return;
    }

    setSelectedOrder(order);
    setStatusModalOpen(true);
  };

  const columns = useMemo(
    () => [
      columnHelper.accessor("orderNumber", {
        header: "Purchase ID",
        cell: (info) => <span className="font-medium">{info.getValue()}</span>,
      }),
      columnHelper.accessor("createdAt", {
        header: ({ column }) => {
          const isSorted = sortBy === "createdAt";
          const isAsc = isSorted && sortOrder === "ASC";
          const isDesc = isSorted && sortOrder === "DESC";

          return (
            <button
              className="flex items-center space-x-1 hover:text-gray-900 focus:outline-none"
              onClick={() => onSort("createdAt")}
            >
              <span>Date</span>
              <div className="flex flex-col">
                <MdKeyboardArrowUp
                  size={12}
                  color={isAsc ? "#3997E0" : "#9CA3AF"}
                />
                <MdKeyboardArrowDown
                  size={12}
                  color={isDesc ? "#3997E0" : "#9CA3AF"}
                />
              </div>
            </button>
          );
        },
        cell: (info) => formatDate(info.getValue()),
      }),
      columnHelper.accessor("items", {
        header: "Products",
        cell: (info) => {
          const items = info.getValue();
          if (!items || items.length === 0) return "No products";

          const firstName = items[0]?.product?.name || "N/A";
          const remaining = items.length - 1;

          return (
            <div className="flex items-center gap-1.5 max-w-[200px]">
              <span className="truncate text-gray-700" title={firstName}>
                {firstName}
              </span>
              {remaining > 0 && (
                <span
                  className="inline-flex items-center shrink-0 px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700 cursor-default"
                  title={items.map((item) => item.product?.name || "N/A").join(", ")}
                >
                  +{remaining}
                </span>
              )}
            </div>
          );
        },
      }),
      columnHelper.accessor("status", {
        header: "Status",
        cell: (info) => {
          const status = info.getValue();
          const row = info.row.original;
          return (
            <div
              onClick={(e) => handleStatusClick(row, e)}
              className="cursor-pointer hover:opacity-80 transition-opacity"
            >
              <StatusBadge status={status} role="admin" />
            </div>
          );
        },
      }),
      columnHelper.display({
        id: "actions",
        header: "",
        cell: (info) => {
          const row = info.row.original;

          const actions = [
            {
              id: "view",
              label: "View",
              icon: MdVisibility,
              href:
                row.status === PurchaseOrderStatus.DRAFT
                  ? `/purchase-orders/${row.id}/review`
                  : `/purchase-orders/${row.id}`,
              onClick: () => {
                router.push(
                  row.status === PurchaseOrderStatus.DRAFT
                    ? `/purchase-orders/${row.id}/review`
                    : `/purchase-orders/${row.id}`
                );
              },
            },
            ...(row.status === PurchaseOrderStatus.DRAFT
              ? [
                  {
                    id: "edit",
                    label: "Edit",
                    icon: MdEdit,
                    href: `/purchase-orders/${row.id}/edit`,
                    onClick: () => {
                      router.push(`/purchase-orders/${row.id}/edit`);
                    },
                  },
                  {
                    id: "delete",
                    label: "Delete",
                    icon: MdDelete,
                    className: "text-red-600",
                    onClick: () => {
                      onDeleteOrder(row.id);
                    },
                  },
                ]
              : []),
          ];

          return (
            <div className="text-center" onClick={(e) => e.stopPropagation()}>
              <ActionDropdown actions={actions} align="right" />
            </div>
          );
        },
      }),
    ],
    [columnHelper, router, onDeleteOrder, sortBy, sortOrder, onSort]
  );

  const table = useReactTable({
    data,
    columns,
    state: {
      pagination: {
        pageIndex: currentPage - 1,
        pageSize,
      },
    },
    onPaginationChange: (updater) => {
      if (typeof updater === "function") {
        const newState = updater({
          pageIndex: currentPage - 1,
          pageSize,
        });
        setCurrentPage(newState.pageIndex + 1);
        setPageSize(newState.pageSize);
      }
    },
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    pageCount: totalPages,
  });

  // Mobile card component
  const MobileCard = ({ row, index }: { row: any; index: number }) => {
    const rowData = row.original;
    const rowId = String(rowData.id);

    return (
      <div
        className={`p-4 rounded-lg border mb-3 cursor-pointer ${
          index % 2 === 0 ? "bg-white" : "bg-[#F2F9FF]"
        } hover:bg-gray-50 transition-colors`}
        onClick={() => handleRowClick(rowData)}
      >
        <div className="flex justify-between items-start mb-3">
          <div className="flex-1">
            <div className="flex items-center justify-between mb-2">
              <span className="font-semibold text-gray-900">
                {rowData.orderNumber}
              </span>
              <div
                onClick={(e) => {
                  e.stopPropagation();
                  handleStatusClick(rowData, e);
                }}
                className="cursor-pointer hover:opacity-80 transition-opacity"
              >
                <StatusBadge status={rowData.status} role="admin" />
              </div>
            </div>
            <div className="text-sm text-gray-600 mb-2">
              <span className="font-medium">Date:</span>{" "}
              {formatDate(rowData.createdAt)}
            </div>
            <div className="text-sm text-gray-600">
              <span className="font-medium">Products:</span>{" "}
              {rowData.items && rowData.items.length > 0 ? (
                <>
                  {rowData.items[0]?.product?.name || "N/A"}
                  {rowData.items.length > 1 && (
                    <span className="ml-1 inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                      +{rowData.items.length - 1}
                    </span>
                  )}
                </>
              ) : (
                "No products"
              )}
            </div>
          </div>
          <div className="ml-3" onClick={(e) => e.stopPropagation()}>
            <ActionDropdown
              actions={[
                {
                  id: "view",
                  label: "View",
                  icon: MdVisibility,
                  href:
                    rowData.status === PurchaseOrderStatus.DRAFT
                      ? `/purchase-orders/${rowData.id}/review`
                      : `/purchase-orders/${rowData.id}`,
                  onClick: () => {
                    router.push(
                      rowData.status === PurchaseOrderStatus.DRAFT
                        ? `/purchase-orders/${rowData.id}/review`
                        : `/purchase-orders/${rowData.id}`
                    );
                  },
                },
                ...(rowData.status === PurchaseOrderStatus.DRAFT
                  ? [
                      {
                        id: "edit",
                        label: "Edit",
                        icon: MdEdit,
                        href: `/purchase-orders/${rowData.id}/edit`,
                        onClick: () => {
                          router.push(`/purchase-orders/${rowData.id}/edit`);
                        },
                      },
                      {
                        id: "delete",
                        label: "Delete",
                        icon: MdDelete,
                        className: "text-red-600",
                        onClick: () => {
                          onDeleteOrder(rowData.id);
                        },
                      },
                    ]
                  : []),
              ]}
              align="right"
            />
          </div>
        </div>
      </div>
    );
  };

  return (
    <div>
      {/* Desktop Table View */}
      <div className="hidden lg:block overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              {table.getHeaderGroups().map((headerGroup) =>
                headerGroup.headers.map((header) => (
                  <th
                    key={header.id}
                    scope="col"
                    className="px-6 py-3 text-left text-xs font-bold text-black uppercase tracking-wider"
                  >
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                  </th>
                ))
              )}
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200">
            {table.getRowModel().rows.map((row, index) => (
              <tr
                key={row.id}
                className={`${
                  index % 2 === 0 ? "bg-white" : "bg-[#F2F9FF]"
                } hover:bg-gray-100 cursor-pointer transition-colors`}
                onClick={() => handleRowClick(row.original)}
              >
                {row.getVisibleCells().map((cell) => (
                  <td
                    key={cell.id}
                    className="px-6 py-4 whitespace-nowrap text-sm text-gray-700"
                  >
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Mobile Card View */}
      <div className="lg:hidden">
        {table.getRowModel().rows.map((row, index) => (
          <MobileCard key={row.id} row={row} index={index} />
        ))}
      </div>

      {/* Pagination - Responsive */}
      <div className="px-4 lg:px-6 py-4 border-t border-gray-200">
        {/* Mobile Pagination */}
        <div className="lg:hidden space-y-4">
          <div className="flex justify-between items-center text-sm text-gray-600">
            <div className="flex items-center space-x-2">
              <select
                value={pageSize}
                onChange={(e) => setPageSize(Number(e.target.value))}
                className="border border-gray-300 rounded-md px-2 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white text-sm"
              >
                <option value={10}>10</option>
                <option value={20}>20</option>
                <option value={50}>50</option>
              </select>
              <span className="text-xs">per page</span>
            </div>
            <span className="text-xs">
              {totalItems === 0
                ? "0-0 of 0"
                : `${(currentPage - 1) * pageSize + 1}-${Math.min(
                    currentPage * pageSize,
                    totalItems
                  )} of ${totalItems}`}
            </span>
          </div>

          <div className="flex justify-between items-center">
            <button
              onClick={() => setCurrentPage(currentPage - 1)}
              disabled={currentPage <= 1}
              className="flex items-center px-3 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              <MdKeyboardArrowLeft size={16} className="mr-1" />
              Previous
            </button>

            <div className="flex items-center space-x-2">
              <select
                value={currentPage}
                onChange={(e) => setCurrentPage(Number(e.target.value))}
                className="border border-gray-300 rounded-md px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white"
              >
                {Array.from({ length: totalPages }, (_, i) => i + 1).map(
                  (page) => (
                    <option key={page} value={page}>
                      {page}
                    </option>
                  )
                )}
              </select>
              <span className="text-sm text-gray-600">of {totalPages}</span>
            </div>

            <button
              onClick={() => setCurrentPage(currentPage + 1)}
              disabled={currentPage >= totalPages}
              className="flex items-center px-3 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Next
              <MdKeyboardArrowRight size={16} className="ml-1" />
            </button>
          </div>
        </div>

        {/* Desktop Pagination */}
        <div className="hidden lg:flex justify-between items-center text-sm text-gray-600">
          <div className="flex items-center">
            <select
              value={pageSize}
              onChange={(e) => setPageSize(Number(e.target.value))}
              className="border border-gray-300 rounded-md px-2 py-1 mr-2 focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white"
            >
              <option value={10}>10</option>
              <option value={20}>20</option>
              <option value={50}>50</option>
            </select>
            <span>Items per page</span>
            <span className="ml-4">
              {totalItems === 0
                ? "0-0 of 0"
                : `${(currentPage - 1) * pageSize + 1}-${Math.min(
                    currentPage * pageSize,
                    totalItems
                  )} of ${totalItems} items`}
            </span>
          </div>

          <div className="flex items-center">
            <div className="flex items-center mr-4">
              <select
                value={currentPage}
                onChange={(e) => setCurrentPage(Number(e.target.value))}
                className="border border-gray-300 rounded-md px-2 py-1 mr-1 focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white"
              >
                {Array.from({ length: totalPages }, (_, i) => i + 1).map(
                  (page) => (
                    <option key={page} value={page}>
                      {page}
                    </option>
                  )
                )}
              </select>
              <span>of {totalPages} pages</span>
            </div>
            <button
              onClick={() => setCurrentPage(currentPage - 1)}
              disabled={currentPage <= 1}
              className="p-1 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed leading-[0]"
            >
              <MdKeyboardArrowLeft size={20} />
            </button>
            <button
              onClick={() => setCurrentPage(currentPage + 1)}
              disabled={currentPage >= totalPages}
              className="p-1 rounded-md hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed leading-[0]"
            >
              <MdKeyboardArrowRight size={20} />
            </button>
          </div>
        </div>
      </div>

      {/* Status Modal */}
      {selectedOrder && (
        <PurchaseOrderStatusModal
          isOpen={statusModalOpen}
          onClose={() => {
            setStatusModalOpen(false);
            setSelectedOrder(null);
          }}
          purchaseOrderId={selectedOrder.id}
          purchaseOrderNumber={selectedOrder.orderNumber}
          role="admin"
        />
      )}
    </div>
  );
};

export default PurchaseTable;