"use client";

import React, { useState, useEffect } from "react";
import { ChevronRight } from "lucide-react";
import SeaQaQuestionCard from "./SeaQaQuestionCard";
import { useGetQuestionListQuery } from "@/api/seaqa.api";
import ErrorCard from "@/components/common/ErrorCard";

interface SeaQaQuestionListProps {
  categoryIds: number[];
  answerFilter?: string[];
  searchText?: string;
}

const PER_PAGE = 20;

function buildPageNumbers(
  currentPage: number,
  totalPages: number,
  compact = false,
): (number | "...")[] {
  // Compact layout keeps the row narrow enough to fit small (mobile) screens.
  if (compact) {
    if (totalPages <= 5)
      return Array.from({ length: totalPages }, (_, i) => i + 1);
    if (currentPage <= 2) return [1, 2, 3, "...", totalPages];
    if (currentPage >= totalPages - 1) {
      return [1, "...", totalPages - 2, totalPages - 1, totalPages];
    }
    return [1, "...", currentPage, "...", totalPages];
  }

  if (totalPages <= 7)
    return Array.from({ length: totalPages }, (_, i) => i + 1);

  const pages: (number | "...")[] = [];
  if (currentPage <= 4) {
    pages.push(1, 2, 3, 4, 5, "...", totalPages - 1, totalPages);
  } else if (currentPage >= totalPages - 3) {
    pages.push(
      1,
      2,
      "...",
      totalPages - 4,
      totalPages - 3,
      totalPages - 2,
      totalPages - 1,
      totalPages,
    );
  } else {
    pages.push(
      1,
      2,
      "...",
      currentPage - 1,
      currentPage,
      currentPage + 1,
      "...",
      totalPages - 1,
      totalPages,
    );
  }
  return pages;
}

const SeaQaQuestionList: React.FC<SeaQaQuestionListProps> = ({
  categoryIds,
  answerFilter,
  searchText,
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [isCompact, setIsCompact] = useState(false);

  useEffect(() => {
    setCurrentPage(1);
  }, [categoryIds, answerFilter, searchText]);

  useEffect(() => {
    const mq = window.matchMedia("(max-width: 640px)");
    const update = () => setIsCompact(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);

  const { data, isLoading, isError, refetch } = useGetQuestionListQuery({
    page: currentPage,
    perPage: PER_PAGE,
    ...(categoryIds.length > 0 ? { categoryIds } : {}),
    ...(answerFilter && answerFilter.length > 0
      ? { answerFilter: answerFilter.map((t) => t.toLowerCase()) }
      : {}),
    ...(searchText ? { searchText } : {}),
    goodQuestionsOnTopRandom: true,
  });

  const questions = data?.data ?? [];
  const totalPages = data?.totalPages ?? 1;
  const pageNumbers = buildPageNumbers(currentPage, totalPages, isCompact);

  const handlePageChange = (page: number) => {
    if (page < 1 || page > totalPages) return;
    setCurrentPage(page);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  if (isLoading) {
    return (
      <div className="flex flex-col gap-3">
        {Array.from({ length: 5 }).map((_, i) => (
          <div
            key={i}
            className="bg-white rounded-2xl px-6 py-4 animate-pulse h-28"
          />
        ))}
      </div>
    );
  }

  if (isError) {
    return (
      <ErrorCard
        message="Failed to load questions. Please try again."
        onRetry={() => refetch()}
      />
    );
  }

  if (questions.length === 0) {
    return (
      <div className="bg-white rounded-2xl px-6 py-16 text-center text-[14px] text-[#9ca3af]">
        No questions match your search.
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-3">
      {questions.map((q) => (
        <SeaQaQuestionCard key={q.id} question={q} />
      ))}

      {totalPages > 1 && (
        <div className="flex flex-wrap items-center justify-center gap-1 mt-4">
          {pageNumbers.map((page, idx) =>
            page === "..." ? (
              <span
                key={`ellipsis-${idx}`}
                className="px-3 py-1.5 text-sm text-[#9ca3af] select-none"
              >
                ...
              </span>
            ) : (
              <button
                key={page}
                onClick={() => handlePageChange(page as number)}
                className={`min-w-9 h-9 px-3 rounded-lg text-sm font-medium transition-colors cursor-pointer ${
                  currentPage === page
                    ? "bg-[#3b82f6] text-white"
                    : "bg-white border border-[#e5e7eb] text-[#374151] hover:border-[#94a3b8]"
                }`}
              >
                {page}
              </button>
            ),
          )}
          <button
            onClick={() => handlePageChange(currentPage + 1)}
            disabled={currentPage === totalPages}
            className="flex items-center gap-1 ml-1 px-3 h-9 rounded-lg text-sm font-medium bg-white border border-[#e5e7eb] text-[#374151] hover:border-[#94a3b8] disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors"
          >
            Next <ChevronRight size={14} />
          </button>
        </div>
      )}
    </div>
  );
};

export default SeaQaQuestionList;