"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import { useDispatch, useSelector } from "react-redux";
import type { AppDispatch, RootState } from "@/state/store";
import {
  fetchEnquiries,
  fetchEnquiryById,
  updateEnquiriesStatus,
  deleteEnquiries,
  clearSelectedEnquiry,
  setSelectedEnquiry,
} from "@/state/enquiry/enquirySlice";
import type { Enquiry, EnquiryStatus } from "@/types/enquiry";
import {
  getEnquiryBuyerName,
  getEnquiryBuyerEmail,
  getEnquiryProductTitle,
} from "@/types/enquiry";
import DataTable, { type Column } from "../common/DataTable";
import ExportDropdown from "../common/ExportDropdown";
import FiltersDropdown from "../common/FiltersDropdown";
import type { ExportColumn } from "../common/export-utils";
import {
  CheckCircleIcon,
  EyeViewIcon,
  ExportArrowIcon,
  KebabIcon,
  LensThumb,
  TrashIcon,
} from "../dashboard/icons";
import { getImageUrl } from "@/lib/imageUrl";
import { formatListingNo } from "@/lib/listingNo";
import ProductImage from "../common/ProductImage";
import QuestionDetailsDrawer from "./QuestionDetailsDrawer";
import QuestionStatusBadge from "./QuestionStatusBadge";
import RemoveQuestionModal from "./RemoveQuestionModal";
import { useClickOutside } from "@/hooks/useClickOutside";

// The question may carry the product number itself or only on its populated product
const getEnquiryListingNo = (q: Enquiry) => q.product?.listingNo ?? q.listingNo;

const exportColumns: ExportColumn<Enquiry>[] = [
  {
    key: "listingNo",
    label: "Product No.",
    getValue: (q: Enquiry) => formatListingNo(getEnquiryListingNo(q)),
  },
  {
    key: "product",
    label: "Product",
    getValue: (q: Enquiry) => getEnquiryProductTitle(q),
  },
  {
    key: "askedByName",
    label: "Asked by",
    getValue: (q: Enquiry) => getEnquiryBuyerName(q),
  },
  {
    key: "askedByEmail",
    label: "Email",
    getValue: (q: Enquiry) => getEnquiryBuyerEmail(q),
  },
  {
    key: "question",
    label: "Question",
    getValue: (q: Enquiry) => q.question,
  },
  {
    key: "date",
    label: "Date",
    getValue: (q: Enquiry) =>
      q.createdAt ? new Date(q.createdAt).toLocaleDateString() : "",
  },
  {
    key: "status",
    label: "Status",
    getValue: (q: Enquiry) => q.status,
  },
];

export default function QuestionsTable() {
  const dispatch = useDispatch<AppDispatch>();
  const searchParams = useSearchParams();

  const {
    enquiries,
    totalPages,
    totalResults,
    loading,
    actionLoading,
    selectedEnquiry,
  } = useSelector((state: RootState) => state.enquiry);

  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 [searchQuery, setSearchQuery] = useState("");
  const [statusFilter, setStatusFilter] = useState("All");
  const [exportOpen, setExportOpen] = useState(false);
  const [bulkExportOpen, setBulkExportOpen] = useState(false);
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [deleteIds, setDeleteIds] = useState<string[] | null>(null);

  // Deep-link: If ?id=... is present in URL, fetch and open drawer
  useEffect(() => {
    const idFromUrl = searchParams.get("id");
    if (idFromUrl) {
      dispatch(fetchEnquiryById(idFromUrl));
    }
  }, [searchParams, dispatch]);

  // Fetch enquiries with debounced search and status filter
  useEffect(() => {
    const timer = setTimeout(() => {
      let statusParam: EnquiryStatus | "all" | undefined;
      if (statusFilter === "Pending") statusParam = "pending";
      else if (statusFilter === "Responded") statusParam = "responded";
      else statusParam = "all";

      dispatch(
        fetchEnquiries({
          page,
          limit: pageSize,
          search: searchQuery.trim() || undefined,
          status: statusParam,
        })
      );
    }, 250);

    return () => clearTimeout(timer);
  }, [dispatch, page, pageSize, searchQuery, statusFilter]);

  const selectedQuestions = useMemo(
    () => enquiries.filter((q) => selected.has(q.id)),
    [enquiries, selected]
  );

  const handleStatusChange = async (ids: string[], status: EnquiryStatus) => {
    await dispatch(updateEnquiriesStatus({ ids, status }));
  };

  const handleDeleteConfirm = async () => {
    if (deleteIds && deleteIds.length > 0) {
      await dispatch(deleteEnquiries(deleteIds));
      setSelected((prev) => {
        const next = new Set(prev);
        deleteIds.forEach((id) => next.delete(id));
        return next;
      });
      setDeleteIds(null);
    }
  };

  const columns: Column<Enquiry>[] = [
    {
      key: "id",
      label: "ID",
      sortable: true,
      sortValue: (q) => getEnquiryListingNo(q) ?? 0,
      render: (q) => (
        <span className="text-[14px] font-medium text-[var(--color-blue)]">
          {formatListingNo(getEnquiryListingNo(q))}
        </span>
      ),
    },
    {
      key: "product",
      label: "Product",
      sortable: true,
      sortValue: (q) => getEnquiryProductTitle(q),
      render: (q) => {
        const productTitle = getEnquiryProductTitle(q);
        return (
          <div className="flex items-center gap-2.5">
            <ProductImage
              src={q.product?.images?.[0]}
              alt={productTitle}
              className="h-10 w-10 shrink-0 rounded-lg object-cover"
            />
            <span className="whitespace-nowrap text-[14px] text-[#101828]">
              {productTitle}
            </span>
          </div>
        );
      },
    },
    {
      key: "askedByName",
      label: "Asked by",
      sortable: true,
      sortValue: (q) => getEnquiryBuyerName(q),
      render: (q) => {
        const name = getEnquiryBuyerName(q);
        const email = getEnquiryBuyerEmail(q);
        return (
          <>
            <p className="whitespace-nowrap text-[13px] font-medium text-[#101828]">
              {name}
            </p>
            {email && (
              <p className="whitespace-nowrap text-[12px] text-[var(--color-blue)]">
                {email}
              </p>
            )}
          </>
        );
      },
    },
    {
      key: "question",
      label: "Question",
      render: (q) => (
        <span className="line-clamp-2 text-[13px] text-[#475467]">
          {q.question}
        </span>
      ),
    },
    {
      key: "date",
      label: "Date",
      sortable: true,
      sortValue: (q) => q.createdAt,
      render: (q) => {
        const formattedDate = q.createdAt
          ? new Date(q.createdAt).toLocaleDateString()
          : "";
        return (
          <span className="whitespace-nowrap text-[13px] text-[#475467]">
            {formattedDate}
          </span>
        );
      },
    },
    {
      key: "status",
      label: "Status",
      sortable: true,
      sortValue: (q) => q.status,
      render: (q) => <QuestionStatusBadge status={q.status} />,
    },
  ];

  return (
    <div className="min-w-0">
      <div>
        <h1 className="text-[20px] font-bold text-[#101828]">
          Questions &amp; Enquiries
        </h1>
        <p className="mt-1 text-[13px] text-[#667085]">
          Manage buyer questions across all products ({totalResults} total)
        </p>
      </div>

      <div className="mt-6">
        <DataTable<Enquiry>
          columns={columns}
          data={enquiries}
          rowKey={(q) => q.id}
          searchPlaceholder="Search questions & enquiries..."
          searchValue={searchQuery}
          onSearchChange={(query) => {
            setSearchQuery(query);
            setPage(1);
          }}
          showFilters
          onFiltersClick={() => setFiltersOpen((prev) => !prev)}
          filtersSlot={
            <FiltersDropdown
              open={filtersOpen}
              onClose={() => setFiltersOpen(false)}
              statusOptions={["All", "Pending", "Responded"]}
              ranges={[]}
              initialStatus={new Set([statusFilter])}
              onApply={(selectedStatus) => {
                const arr = Array.from(selectedStatus);
                const active = arr.find((s) => s !== "All") || "All";
                setStatusFilter(active);
                setPage(1);
              }}
              onClear={() => {
                setStatusFilter("All");
                setPage(1);
              }}
            />
          }
          showExport
          onExportClick={() => setExportOpen((prev) => !prev)}
          exportSlot={
            <ExportDropdown<Enquiry>
              open={exportOpen}
              onClose={() => setExportOpen(false)}
              allRows={enquiries}
              selectedRows={selectedQuestions}
              columns={exportColumns}
              fileName="questions"
              title="Questions & Enquiries"
            />
          }
          selectedIds={selected}
          onSelectionChange={setSelected}
          pageSize={pageSize}
          onPageSizeChange={(size) => {
            setPageSize(size);
            setPage(1);
          }}
          externalPagination={{
            currentPage: page,
            totalPages: Math.max(1, totalPages),
            onPageChange: setPage,
          }}
          renderRowActions={(question) => (
            <RowActionMenu
              open={openMenu === question.id}
              status={question.status}
              onToggle={() =>
                setOpenMenu(openMenu === question.id ? null : question.id)
              }
              onClose={() => setOpenMenu(null)}
              onViewDetails={() => {
                setOpenMenu(null);
                dispatch(setSelectedEnquiry(question));
              }}
              onMarkResponded={() => {
                setOpenMenu(null);
                handleStatusChange([question.id], "responded");
              }}
              onDelete={() => {
                setOpenMenu(null);
                setDeleteIds([question.id]);
              }}
            />
          )}
          renderBulkActionBar={() => {
            const hasPending = selectedQuestions.some(
              (q) => q.status !== "responded"
            );
            return (
              <>
                <button
                  type="button"
                  onClick={() => setDeleteIds(Array.from(selected))}
                  className="flex h-9 items-center gap-2 rounded-lg border border-[var(--color-red)] bg-white px-4 text-[13px] font-medium text-[var(--color-red)] transition-colors hover:bg-red-50 cursor-pointer"
                >
                  <TrashIcon />
                  Delete Questions
                </button>
                {hasPending && (
                  <button
                    type="button"
                    onClick={() =>
                      handleStatusChange(Array.from(selected), "responded")
                    }
                    className="flex h-9 items-center gap-2 rounded-lg border border-[var(--color-green)] bg-white px-4 text-[13px] font-medium text-[var(--color-green)] transition-colors hover:bg-green-50 cursor-pointer"
                  >
                    <CheckCircleIcon />
                    Responded
                  </button>
                )}
                <div className="relative">
                  <button
                    type="button"
                    onClick={() => setBulkExportOpen((prev) => !prev)}
                    className="flex h-9 items-center gap-2 rounded-lg border border-[var(--color-blue)] bg-white px-4 text-[13px] font-medium text-[var(--color-blue)] transition-colors hover:bg-blue-50 cursor-pointer"
                  >
                    <ExportArrowIcon />
                    Export Selection
                  </button>
                  <ExportDropdown<Enquiry>
                    open={bulkExportOpen}
                    onClose={() => setBulkExportOpen(false)}
                    allRows={enquiries}
                    selectedRows={selectedQuestions}
                    columns={exportColumns}
                    fileName="questions-selection"
                    title="Questions & Enquiries"
                  />
                </div>
              </>
            );
          }}
        />
      </div>

      <QuestionDetailsDrawer
        question={selectedEnquiry}
        open={selectedEnquiry !== null}
        loading={actionLoading}
        onClose={() => dispatch(clearSelectedEnquiry())}
        onDelete={() => {
          if (selectedEnquiry) setDeleteIds([selectedEnquiry.id]);
        }}
        onMarkResponded={() => {
          if (selectedEnquiry)
            handleStatusChange([selectedEnquiry.id], "responded");
        }}
      />

      <RemoveQuestionModal
        open={deleteIds !== null}
        count={deleteIds?.length ?? 0}
        loading={actionLoading}
        onClose={() => setDeleteIds(null)}
        onConfirm={handleDeleteConfirm}
      />
    </div>
  );
}

function RowActionMenu({
  open,
  status,
  onToggle,
  onClose,
  onViewDetails,
  onMarkResponded,
  onDelete,
}: {
  open: boolean;
  status: EnquiryStatus;
  onToggle: () => void;
  onClose: () => void;
  onViewDetails: () => void;
  onMarkResponded: () => void;
  onDelete: () => void;
}) {
  const ref = useRef<HTMLDivElement | null>(null);
  const [openUpward, setOpenUpward] = useState(false);
  useClickOutside(ref, onClose, open);

  useEffect(() => {
    if (open && ref.current) {
      const rect = ref.current.getBoundingClientRect();
      const spaceBelow = window.innerHeight - rect.bottom;
      setOpenUpward(spaceBelow < 220);
    }
  }, [open]);

  const itemClass =
    "flex w-full items-center gap-2.5 whitespace-nowrap px-3.5 py-2 text-left text-[13px] font-medium hover:bg-[#F5F7F9] cursor-pointer";

  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] cursor-pointer"
      >
        <KebabIcon />
      </button>
      {open && (
        <div
          className={`absolute right-0 ${
            openUpward ? "bottom-[calc(100%+4px)]" : "top-[calc(100%+4px)]"
          } z-50 min-w-[170px] rounded-lg border border-[#E4E7EC] bg-white py-1.5 shadow-[0_10px_24px_rgba(15,23,42,0.12)]`}
        >
          <button
            type="button"
            onClick={onViewDetails}
            className={`${itemClass} text-[#344054]`}
          >
            <EyeViewIcon />
            View Details
          </button>
          {status !== "responded" && (
            <button
              type="button"
              onClick={onMarkResponded}
              className={`${itemClass} text-[var(--color-green)]`}
            >
              <CheckCircleIcon />
              Mark as Responded
            </button>
          )}
          <button
            type="button"
            onClick={onDelete}
            className={`${itemClass} text-[var(--color-red)]`}
          >
            <TrashIcon />
            Delete
          </button>
        </div>
      )}
    </div>
  );
}