"use client";

import { useEffect, useRef, useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { useClickOutside } from "@/hooks/useClickOutside";
import { useAppDispatch, useAppSelector } from "@/state/hooks";
import { fetchSellers, changeSellerStatus } from "@/state/seller/sellerSlice";
import type { Seller, SellerStatus } from "@/types/seller";
import { getImageUrl } from "@/lib/imageUrl";
import AvatarImage from "../common/AvatarImage";
import DataTable, { type Column } from "../common/DataTable";
import ExportDropdown from "../common/ExportDropdown";
import StatusBadge from "../common/StatusBadge";
import type { ExportColumn } from "../common/export-utils";
import FiltersDropdown from "../common/FiltersDropdown";
import {
  EyeViewIcon,
  KebabIcon,
  PersonCheckIcon,
  PersonXIcon,
  PowerIcon,
} from "../dashboard/icons";
import SuspendSellerModal from "./SuspendSellerModal";
import ReactivateSellerModal from "./ReactivateSellerModal";

const statusColors: Record<string, { text: string; dot: string }> = {
  Active: { text: "#16A34A", dot: "#16A34A" },
  active: { text: "#16A34A", dot: "#16A34A" },
  Suspended: { text: "#DC2626", dot: "#DC2626" },
  suspended: { text: "#DC2626", dot: "#DC2626" },
  Inactive: { text: "#98A2B3", dot: "#98A2B3" },
  inactive: { text: "#98A2B3", dot: "#98A2B3" },
};

const exportColumns: ExportColumn<Seller>[] = [
  { key: "name", label: "Seller" },
  { key: "location", label: "Location" },
  { key: "email", label: "Email" },
  { key: "phone", label: "Phone", text: true },
  { key: "joinedOn", label: "Joined on" },
  { key: "products", label: "Products" },
  { key: "status", label: "Status" },
];

function getInitials(name: string): string {
  if (!name) return "S";
  const parts = name.trim().split(" ");
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
}

export default function SellersTable() {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { sellers, loading, totalPages, totalResults, actionLoading } = useAppSelector(
    (state) => state.seller
  );

  const [selected, setSelected] = useState<Set<string>>(new Set());
  const [openMenu, setOpenMenu] = useState<string | null>(null);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(12);
  const [search, setSearch] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [exportOpen, setExportOpen] = useState(false);
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [productRange, setProductRange] = useState<{ min?: number; max?: number }>({});

  const [suspendTargetIds, setSuspendTargetIds] = useState<string[] | null>(null);
  const [reactivateTargetIds, setReactivateTargetIds] = useState<string[] | null>(null);

  // Debounce search
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearch(search);
      setPage(1);
    }, 400);
    return () => clearTimeout(handler);
  }, [search]);

  // Load sellers
  useEffect(() => {
    dispatch(
      fetchSellers({
        page,
        limit: pageSize,
        search: debouncedSearch.trim() || undefined,
        status: statusFilter !== "all" ? statusFilter.toLowerCase() : undefined,
        minProducts: productRange.min,
        maxProducts: productRange.max,
      })
    );
  }, [dispatch, page, pageSize, debouncedSearch, statusFilter, productRange]);

  const refreshList = () => {
    dispatch(
      fetchSellers({
        page,
        limit: pageSize,
        search: debouncedSearch.trim() || undefined,
        status: statusFilter !== "all" ? statusFilter.toLowerCase() : undefined,
        minProducts: productRange.min,
        maxProducts: productRange.max,
      })
    );
  };

  const handleStatusChange = async (
    sellerIds: string[],
    status: "active" | "inactive" | "suspended",
    reason?: string,
    reasonMessage?: string
  ) => {
    try {
      await dispatch(changeSellerStatus({ sellerIds, status, reason, reasonMessage })).unwrap();
      const actionWord =
        status === "active" ? "reactivated" : status === "suspended" ? "suspended" : "inactivated";
      toast.success(
        `Seller${sellerIds.length > 1 ? "s" : ""} ${actionWord} successfully`
      );
      setSelected(new Set());
      setSuspendTargetIds(null);
      setReactivateTargetIds(null);
      refreshList();
    } catch (err: any) {
      toast.error(err || "Failed to update seller status");
    }
  };

  const selectedSellers = sellers.filter((seller) => selected.has(seller.id));

  const columns: Column<Seller>[] = [
    {
      key: "name",
      label: "Seller",
      sortable: true,
      render: (seller) => {
        return (
          <div className="flex items-center gap-3">
            <div className="flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#EAF1FF] text-[13px] font-semibold text-[#1657D9] border border-[#E4E7EC]">
              <AvatarImage
                src={seller.profileImage}
                alt={seller.name}
                initials={getInitials(seller.name)}
              />
            </div>
            <div className="min-w-0">
              <span className="block truncate text-[14px] font-medium text-[#101828]">
                {seller.name}
              </span>
              {seller.handle && (
                <span className="block truncate text-[12px] text-[#1657D9]">
                  {seller.handle}
                </span>
              )}
            </div>
          </div>
        );
      },
    },
    {
      key: "location",
      label: "Location",
      sortable: true,
      render: (seller) => (
        <span className="whitespace-nowrap text-[13px] text-[#475467]">
          {seller.location && seller.location !== "-"
            ? seller.location
            : [seller.city, seller.country].filter(Boolean).join(", ") || "-"}
        </span>
      ),
    },
    {
      key: "email",
      label: "Contact",
      render: (seller) => (
        <>
          <p className="whitespace-nowrap text-[13px] text-[#1657D9]">{seller.email}</p>
          <p className="whitespace-nowrap text-[12px] text-[#475467]">{seller.phone || "-"}</p>
        </>
      ),
    },
    {
      key: "joinedOn",
      label: "Joined on",
      sortable: true,
      render: (seller) => (
        <span className="whitespace-nowrap text-[13px] text-[#475467]">
          {seller.joinedOn || "-"}
        </span>
      ),
    },
    {
      key: "products",
      label: "Products",
      sortable: true,
      render: (seller) => (
        <span className="whitespace-nowrap text-[13px] font-medium text-[#101828]">
          {seller.products ?? seller.totalProducts ?? 0}
        </span>
      ),
    },
    {
      key: "status",
      label: "Status",
      sortable: true,
      render: (seller) => {
        const rawStatus = (seller.status || "active").toLowerCase();
        const displayStatus =
          rawStatus === "active"
            ? "Active"
            : rawStatus === "suspended"
            ? "Suspended"
            : "Inactive";
        return <StatusBadge status={displayStatus as any} colorMap={statusColors as any} />;
      },
    },
  ];

  return (
    <>
      <DataTable<Seller>
        columns={columns}
        data={sellers}
        rowKey={(seller) => seller.id}
        searchPlaceholder="Search sellers by name, email, phone..."
        searchValue={search}
        onSearchChange={setSearch}
        showFilters
        onFiltersClick={() => setFiltersOpen((prev) => !prev)}
        filtersSlot={
          <FiltersDropdown
            open={filtersOpen}
            onClose={() => setFiltersOpen(false)}
            statusOptions={["All", "Active", "Suspended", "Inactive"]}
            ranges={[{ key: "products", label: "Product Range", min: 0, max: 100, initialMin: 0, initialMax: 100 }]}
            onApply={(selectedStatuses, rangeValues) => {
              const statusVal = Array.from(selectedStatuses)[0] || "All";
              setStatusFilter(statusVal.toLowerCase());
              if (rangeValues.products) {
                setProductRange({
                  min: rangeValues.products.min,
                  max: rangeValues.products.max,
                });
              }
              setPage(1);
              setFiltersOpen(false);
            }}
            onClear={() => {
              setStatusFilter("all");
              setProductRange({});
              setPage(1);
              setFiltersOpen(false);
            }}
          />
        }
        showExport
        onExportClick={() => setExportOpen((prev) => !prev)}
        exportSlot={
          <ExportDropdown<Seller>
            open={exportOpen}
            onClose={() => setExportOpen(false)}
            allRows={sellers}
            selectedRows={selectedSellers}
            columns={exportColumns}
            fileName="sellers"
            title="Sellers Management"
          />
        }
        selectedIds={selected}
        onSelectionChange={setSelected}
        pageSize={pageSize}
        onPageSizeChange={(size) => {
          setPageSize(size);
          setPage(1);
        }}
        externalPagination={{
          currentPage: page,
          totalPages: totalPages || 1,
          onPageChange: setPage,
        }}
        emptyMessage={loading ? "Loading sellers..." : "No sellers found."}
        renderBulkActionBar={(selectedCount, clearSelection) => (
          <div className="flex items-center gap-2">
            <button
              type="button"
              disabled={actionLoading}
              onClick={() => setReactivateTargetIds(Array.from(selected))}
              className="flex h-8 items-center gap-1.5 rounded-lg border border-[#16A34A] bg-white px-3 text-[12px] font-medium text-[#16A34A] transition-colors hover:bg-[#F0FDF4] disabled:opacity-50"
            >
              <PersonCheckIcon />
              Reactivate ({selectedCount})
            </button>
            <button
              type="button"
              disabled={actionLoading}
              onClick={() => handleStatusChange(Array.from(selected), "inactive")}
              className="flex h-8 items-center gap-1.5 rounded-lg border border-[#D0D5DD] bg-white px-3 text-[12px] font-medium text-[#344054] transition-colors hover:bg-[#F2F4F7] disabled:opacity-50"
            >
              <PowerIcon />
              Inactivate ({selectedCount})
            </button>
            <button
              type="button"
              disabled={actionLoading}
              onClick={() => setSuspendTargetIds(Array.from(selected))}
              className="flex h-8 items-center gap-1.5 rounded-lg border border-[#DC2626] bg-white px-3 text-[12px] font-medium text-[#DC2626] transition-colors hover:bg-[#FEF2F2] disabled:opacity-50"
            >
              <PersonXIcon />
              Suspend ({selectedCount})
            </button>
          </div>
        )}
        renderRowActions={(seller) => {
          const rawStatus = (seller.status || "active").toLowerCase();
          const isActive = rawStatus === "active";
          return (
            <RowActionMenu
              open={openMenu === seller.id}
              onToggle={() => setOpenMenu(openMenu === seller.id ? null : seller.id)}
              onClose={() => setOpenMenu(null)}
              isActive={isActive}
              onViewDetails={() => {
                setOpenMenu(null);
                router.push(`/sellers/${seller.id}`);
              }}
              onRequestSuspend={() => {
                setOpenMenu(null);
                setSuspendTargetIds([seller.id]);
              }}
              onRequestInactivate={() => {
                setOpenMenu(null);
                handleStatusChange([seller.id], "inactive");
              }}
              onRequestReactivate={() => {
                setOpenMenu(null);
                setReactivateTargetIds([seller.id]);
              }}
            />
          );
        }}
      />

      {/* Suspend Confirmation Modal */}
      <SuspendSellerModal
        open={suspendTargetIds !== null && suspendTargetIds.length > 0}
        count={suspendTargetIds?.length || 1}
        loading={actionLoading}
        onClose={() => setSuspendTargetIds(null)}
        onConfirm={(reasons, note) => {
          if (suspendTargetIds && suspendTargetIds.length > 0) {
            const finalReason = reasons.join(", ");
            handleStatusChange(suspendTargetIds, "suspended", finalReason, note);
          }
        }}
      />

      {/* Reactivate Confirmation Modal */}
      <ReactivateSellerModal
        open={reactivateTargetIds !== null && reactivateTargetIds.length > 0}
        count={reactivateTargetIds?.length || 1}
        loading={actionLoading}
        onClose={() => setReactivateTargetIds(null)}
        onConfirm={() => {
          if (reactivateTargetIds && reactivateTargetIds.length > 0) {
            handleStatusChange(reactivateTargetIds, "active");
          }
        }}
      />
    </>
  );
}

function RowActionMenu({
  open,
  onToggle,
  onClose,
  isActive,
  onViewDetails,
  onRequestSuspend,
  onRequestInactivate,
  onRequestReactivate,
}: {
  open: boolean;
  onToggle: () => void;
  onClose: () => void;
  isActive: boolean;
  onViewDetails: () => void;
  onRequestSuspend: () => void;
  onRequestInactivate: () => void;
  onRequestReactivate: () => void;
}) {
  const ref = useRef<HTMLDivElement | null>(null);
  useClickOutside(ref, onClose, open);
  const [openUpward, setOpenUpward] = useState(false);

  useEffect(() => {
    if (open && ref.current) {
      const rect = ref.current.getBoundingClientRect();
      const tableContainer = ref.current.closest(".overflow-x-auto");
      if (tableContainer) {
        const containerRect = tableContainer.getBoundingClientRect();
        const spaceBelow = containerRect.bottom - rect.bottom;
        const spaceAbove = rect.top - containerRect.top;
        if (spaceBelow < 180 && spaceAbove >= 180) {
          setOpenUpward(true);
        } else {
          setOpenUpward(false);
        }
        return;
      }
      const spaceBelow = window.innerHeight - rect.bottom;
      setOpenUpward(spaceBelow < 200);
    } else {
      setOpenUpward(false);
    }
  }, [open]);

  // Lift only the open row: a fixed z-index on every row lets later rows paint over this menu
  return (
    <div ref={ref} className={`relative ${open ? "z-50" : ""}`}>
      <button
        type="button"
        onClick={onToggle}
        className="flex h-7 w-7 items-center justify-center rounded-full text-[#667085] transition-colors hover:bg-[#F2F4F7]"
      >
        <KebabIcon />
      </button>
      {open && (
        <div
          className={`absolute right-0 z-50 min-w-[170px] rounded-lg border border-[#E4E7EC] bg-white py-1.5 shadow-[0_10px_24px_rgba(15,23,42,0.18)] ${
            openUpward ? "bottom-[calc(100%+4px)]" : "top-[calc(100%+4px)]"
          }`}
        >
          <button
            type="button"
            onClick={onViewDetails}
            className="flex w-full items-center gap-2.5 whitespace-nowrap px-3.5 py-2 text-left text-[13px] font-medium text-[#344054] hover:bg-[#F5F7F9]"
          >
            <EyeViewIcon />
            View Details
          </button>

          {isActive ? (
            <>
              <button
                type="button"
                onClick={onRequestInactivate}
                className="flex w-full items-center gap-2.5 whitespace-nowrap px-3.5 py-2 text-left text-[13px] font-medium text-[#344054] hover:bg-[#F5F7F9]"
              >
                <PowerIcon />
                Inactivate Seller
              </button>
              <button
                type="button"
                onClick={onRequestSuspend}
                className="flex w-full items-center gap-2.5 whitespace-nowrap px-3.5 py-2 text-left text-[13px] font-medium text-[#DC2626] hover:bg-[#F5F7F9]"
              >
                <PersonXIcon />
                Suspend Seller
              </button>
            </>
          ) : (
            <button
              type="button"
              onClick={onRequestReactivate}
              className="flex w-full items-center gap-2.5 whitespace-nowrap px-3.5 py-2 text-left text-[13px] font-medium text-[#16A34A] hover:bg-[#F5F7F9]"
            >
              <PersonCheckIcon />
              Reactivate Seller
            </button>
          )}
        </div>
      )}
    </div>
  );
}