"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { motion } from "framer-motion";
import UnifiedSearchBar from "@/app/components/UnifiedSearchBar";
import Header from "@/app/components/Header";
import Footer from "@/app/components/Footer";
import { useGetAllTendersQuery, useGetTenderCategoriesQuery } from "@/redux/apis/tenderApi";
import { useSaveUserTenderMutation, useGetMySavedTendersQuery, useRemoveUserTenderMutation } from "@/redux/apis/saveTenderApi";
import { useSelector } from "react-redux";
import { selectIsAuthenticated } from "@/redux/slices/authSlice";
import { Bookmark } from "lucide-react";
// import type { Tender } from "@/lib/api";
import PlanRestrictionModal from "@/app/components/PlanRestrictionModal";
import { stateDistrictMap } from "@/lib/constants/geography";

import { sortCategories } from "@/lib/constants/categoryOrder";

// Hardcoded categories as fallback or replaced by dynamic data

type SortField = "tenderTitle" | "amount" | "publicationDate" | "bidSubmissionDate";
type SortOrder = "asc" | "desc";

function TendersList() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const isAuthenticated = useSelector(selectIsAuthenticated);
  const { data: savedTendersData } = useGetMySavedTendersQuery(undefined, { skip: !isAuthenticated });
  const [saveUserTender] = useSaveUserTenderMutation();
  const [removeUserTender] = useRemoveUserTenderMutation();
  const savedTenderIds = savedTendersData?.data?.map((t: { tenderId: number }) => t.tenderId) || [];
  const [showPlanModal, setShowPlanModal] = useState(false);

  const handleSaveToggle = async (tenderId: number) => {
    if (!isAuthenticated) {
      router.push("/login");
      return;
    }
    const isSaved = savedTenderIds.includes(tenderId);
    try {
      if (isSaved) {
        await removeUserTender(tenderId).unwrap();
      } else {
        await saveUserTender({ tenderId }).unwrap();
      }
    } catch (error: unknown) {
      const err = error as { data?: { message?: string } };
      if (err?.data?.message?.toLowerCase().includes("plan")) {
        setShowPlanModal(true);
      } else {
        console.error("Failed to save/unsave tender:", error);
      }
    }
  };

  // Extract URL parameters
  const urlSearch = searchParams.get("search") || "";
  const urlDistrict = searchParams.get("district") || "";
  const urlState = searchParams.get("state") || "";
  const urlCategory = searchParams.get("category") || "";
  const urlPage = parseInt(searchParams.get("page") || "1");

  const [searchQuery, setSearchQuery] = useState(urlSearch);
  const [selectedState, setSelectedState] = useState(urlState || "All India");
  const [selectedDistrict, setSelectedDistrict] = useState(urlDistrict || "All Districts");
  const [selectedCategory, setSelectedCategory] = useState(urlCategory || "All Categories");
  const [sortField, setSortField] = useState<SortField>("publicationDate");
  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
  const tenderTypeFilter = "all";
  const [page, setPage] = useState(urlPage);


  const states = Object.keys(stateDistrictMap).sort();
  const districts = stateDistrictMap[selectedState] || ["All Districts"];
  const { data: categoriesData } = useGetTenderCategoriesQuery({});
  const categories = ["All Categories", ...sortCategories(categoriesData?.data?.map(c => c.name) || [])];
  const limit = 10;

  // Fetch tenders using RTK Query
  const { data, isLoading, isError, error } = useGetAllTendersQuery({
    page,
    limit,
    search: searchQuery || undefined,
    district: selectedDistrict !== "All Districts" ? selectedDistrict : undefined,
    state: selectedState !== "All India" ? selectedState : undefined,
    category: selectedCategory !== "All Categories" ? selectedCategory : undefined,
    isActive: true,
  });

  const tenders = data?.data?.tenders || [];
  const totalTenders = data?.data?.pagination?.total || 0;
  const totalPages = data?.data?.pagination?.totalPages || 1;

  // Update search query when URL changes
  useEffect(() => {
    setSearchQuery(urlSearch);
  }, [urlSearch]);

  const loadMore = () => {
    if (!isLoading && page < totalPages) {
      setPage(page + 1);
    }
  };

  const handleSort = (field: SortField) => {
    if (sortField === field) {
      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
    } else {
      setSortField(field);
      setSortOrder("desc");
    }
  };

  const sortedTenders = [...tenders].sort((a, b) => {
    let aValue: string | number | null = a[sortField];
    let bValue: string | number | null = b[sortField];

    if (sortField === "amount") {
      aValue = aValue || 0;
      bValue = bValue || 0;
    } else if (sortField === "publicationDate" || sortField === "bidSubmissionDate") {
      aValue = aValue ? new Date(aValue).getTime() : 0;
      bValue = bValue ? new Date(bValue).getTime() : 0;
    } else {
      aValue = aValue || "";
      bValue = bValue || "";
    }

    if (sortOrder === "asc") {
      return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
    } else {
      return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
    }
  });

  const filteredTenders = tenderTypeFilter === "all"
    ? sortedTenders
    : sortedTenders.filter((t) => t.tenderType === tenderTypeFilter);

  const formatCurrency = (amount: number | null) => {
    if (!amount) return "N/A";
    return new Intl.NumberFormat("en-IN", {
      style: "currency",
      currency: "INR",
      maximumFractionDigits: 0,
    }).format(amount);
  };

  const formatDate = (dateString: string | null) => {
    if (!dateString) return "N/A";
    return new Date(dateString).toLocaleDateString("en-IN", {
      year: "numeric",
      month: "short",
      day: "numeric",
    });
  };

  const getSortIcon = (field: SortField) => {
    if (sortField !== field) return "↕️";
    return sortOrder === "asc" ? "↑" : "↓";
  };

 

  return (
    <div className="min-h-screen bg-gray-50 overflow-x-hidden w-full max-w-full">
      <Header />
      {/* Page Header */}
      <header className="bg-white shadow-sm border-b border-gray-200 pt-24 sm:pt-28">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between mb-4">
            <Link href="/" className="text-green-600 hover:text-green-700 font-semibold">
              ← Back to Home
            </Link>
            <h1 className="text-2xl font-bold text-gray-900">All Tenders</h1>
            <div className="w-20"></div>
          </div>

          {/* Search and Filters */}
          <div className="flex flex-col items-center mb-6">
            <UnifiedSearchBar
              searchQuery={searchQuery}
              setSearchQuery={setSearchQuery}
              selectedState={selectedState === "All India" ? "" : selectedState}
              setSelectedState={(val) => {
                setSelectedState(val || "All India");
                setSelectedDistrict("All Districts");
                setPage(1);
              }}
              states={states}
              selectedDistrict={selectedDistrict}
              setSelectedDistrict={(val) => {
                setSelectedDistrict(val);
                setPage(1);
              }}
              districts={districts}
              selectedCategory={selectedCategory}
              setSelectedCategory={(val) => {
                setSelectedCategory(val);
                setPage(1);
              }}
              categories={categories}
              onSearch={() => setPage(1)}
              onAdvanceToggle={() => router.push("/advance-search")}
            />



            {/* Breadcrumbs and Previous Searches */}
            <div className="w-full max-w-4xl mt-4 pl-1">
              <div className="flex flex-wrap items-center gap-1 text-xs text-gray-500 mb-1">
                <span>Home</span>
                <span>&rsaquo;</span>
                <span>Tenders</span>
                <span>&rsaquo;</span>
                <span>{selectedState === "All India" ? "Indian Tenders" : selectedState}</span>
                {searchQuery && (
                  <>
                    <span>&rsaquo;</span>
                    <span className="text-blue-600 font-medium">{searchQuery} Tenders</span>
                  </>
                )}
              </div>
              <div className="text-sm flex items-center gap-2">
                <span className="text-gray-600">Previous Searches :- </span>
                <button
                  onClick={() => setSearchQuery("Solar Power Plant")}
                  className="text-green-600 hover:underline hover:text-green-700 transition-colors"
                >
                  Solar Power Plant
                </button>
              </div>
            </div>
          </div>

          {/* Results Count */}
          <div className="mt-4 text-sm text-gray-600">
            Showing {filteredTenders.length} of {totalTenders} tenders
          </div>
        </div>
      </header>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {isLoading && tenders.length === 0 ? (
          <div className="text-center py-12">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
            <p className="mt-4 text-gray-600">Loading tenders...</p>
          </div>
        ) : isError ? (
          <div className="text-center py-12 text-red-600">
            <p>{(error as { data?: { message?: string } })?.data?.message || "Failed to load tenders"}</p>
          </div>
        ) : filteredTenders.length === 0 ? (
          <div className="text-center py-12">
            <p className="text-gray-600 text-lg">No tenders found matching your criteria.</p>
            {(urlSearch || urlDistrict || urlState || urlCategory) && (
              <p className="text-sm text-gray-500 mt-2">
                Try adjusting your search filters
              </p>
            )}
          </div>
        ) : (
          <>
            <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden w-full">
              <div className="overflow-x-auto w-full">
                <table className="min-w-full divide-y divide-gray-200 w-full">
                  <thead className="bg-gray-50/80 backdrop-blur-sm">
                    <tr>
                      <th className="px-3 py-3 sm:px-6 sm:py-5 text-left text-[10px] sm:text-xs font-bold text-gray-500 uppercase tracking-wider w-[50px]">
                        Status
                      </th>
                      <th
                        className="px-3 py-3 sm:px-6 sm:py-5 text-left text-[10px] sm:text-xs font-bold text-gray-500 uppercase tracking-wider w-[25%] cursor-pointer hover:bg-gray-100 transition-colors"
                        onClick={() => handleSort("tenderTitle")}
                      >
                        <div className="flex items-center gap-2">
                          Tender Information {getSortIcon("tenderTitle")}
                        </div>
                      </th>
                      <th className="px-3 py-3 sm:px-6 sm:py-5 text-left text-[10px] sm:text-xs font-bold text-gray-500 uppercase tracking-wider">
                        Type
                      </th>
                      <th
                        className="px-3 py-3 sm:px-6 sm:py-5 text-left text-[10px] sm:text-xs font-bold text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
                        onClick={() => handleSort("publicationDate")}
                      >
                        <div className="flex items-center gap-2">
                          Opening Date {getSortIcon("publicationDate")}
                        </div>
                      </th>
                      <th
                        className="px-3 py-3 sm:px-6 sm:py-5 text-left text-[10px] sm:text-xs font-bold text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
                        onClick={() => handleSort("bidSubmissionDate")}
                      >
                        <div className="flex items-center gap-2">
                          Closing Date {getSortIcon("bidSubmissionDate")}
                        </div>
                      </th>
                      <th
                        className="px-3 py-3 sm:px-6 sm:py-5 text-left text-[10px] sm:text-xs font-bold text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100 transition-colors"
                        onClick={() => handleSort("amount")}
                      >
                        <div className="flex items-center gap-2">
                          Value {getSortIcon("amount")}
                        </div>
                      </th>
                      <th className="px-3 py-3 sm:px-6 sm:py-5 text-right text-[10px] sm:text-xs font-bold text-gray-500 uppercase tracking-wider">
                        Action
                      </th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-100">
                    {filteredTenders.map((tender, index) => (
                      <motion.tr
                        key={tender.id}
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.3, delay: index * 0.05 }}
                        className="hover:bg-green-50/30 transition-all group"
                      >
                        {/* Status Column */}
                        <td className="px-3 py-3 sm:px-6 sm:py-5 align-top">
                          {(function() {
                            const isLatest = (dateString: string | null | undefined) => {
                              if (!dateString) return false;
                              const tenderDate = new Date(dateString);
                              const today = new Date();
                              
                              // Reset time to compare dates only
                              tenderDate.setHours(0, 0, 0, 0);
                              today.setHours(0, 0, 0, 0);
                              
                              const diffTime = today.getTime() - tenderDate.getTime();
                              const diffDays = diffTime / (1000 * 60 * 60 * 24);
                              
                              // Show latest only if bid/open date is today or in the past (up to 15 days)
                              return diffDays >= 0 && diffDays <= 15;
                            };
                            return isLatest(tender.publicationDate) ? (
                              <div className="relative flex items-center justify-center w-14 h-14">
                                <motion.div
                                  animate={{ rotate: 360 }}
                                  transition={{ 
                                    duration: 8, 
                                    repeat: Infinity, 
                                    ease: "linear" 
                                  }}
                                  className="absolute inset-0 text-red-600 drop-shadow-md"
                                >
                                  {/* Starburst/Seal shape */}
                                  <svg viewBox="0 0 24 24" fill="currentColor" className="w-full h-full">
                                    <path d="M12 2l1.6 4.8 4.6.5-3.4 3.2 1 4.9-4.3-2.3-4.3 2.3 1-4.9-3.4-3.2 4.6-.5L12 2z" transform="scale(1.1)" style={{ transformOrigin: "center" }} />
                                    <path d="M12 0l2.5 7.5h7.5l-6 4.5 2.5 7.5-6-4.5-6 4.5 2.5-7.5-6-4.5h7.5z" opacity="0.5" transform="rotate(22.5 12 12) scale(0.8)" />
                                    {/* Composed multi-point star shape manually or simpler burst */}
                                     {/* Let's use a cleaner multi-point polygon for a "Launch/New" style badge */}
                                    <path d="M12,22c-5.52,0-10-4.48-10-10S6.48,2,12,2s10,4.48,10,10S17.52,22,12,22z" fill="none"/>
                                    <path d="M22,12l-2.8-2.1l0.6-3.4l-3.4-0.6L14.3,3.8L12,6.5L9.7,3.8L7.6,5.9L4.2,6.5l0.6,3.4L2,12l2.8,2.1l-0.6,3.4l3.4,0.6 l2.1,2.1L12,17.5l2.3,2.7l2.1-2.1l3.4-0.6l-0.6-3.4L22,12z" />
                                  </svg>
                                </motion.div>
                                <span className="relative z-10 text-[8px] font-black text-white tracking-wider uppercase transform -rotate-12">
                                  LATEST
                                </span>
                              </div>
                            ) : null;
                          })()}
                        </td>

                        {/* Tender Info */}
                        <td className="px-3 py-3 sm:px-6 sm:py-5 align-top">
                          <div className="flex flex-col gap-1">
                            <div className="flex items-start justify-between gap-2">
                              <span className="text-xs sm:text-sm font-bold text-gray-900 group-hover:text-green-700 transition-colors line-clamp-2 leading-relaxed">
                                {tender.tenderTitle}
                              </span>
                            </div>
                            <div className="flex items-center gap-2 mt-1">
                              <span className="text-[10px] sm:text-xs text-gray-400 font-mono">
                                #{tender.tenderReferenceNumber || "NA"}
                              </span>
                            </div>
                            {tender.tenderId && (
                              <div className="text-[10px] text-gray-400">ID: {tender.tenderId}</div>
                            )}
                          </div>
                        </td>

                        {/* Type & Status */}
                        <td className="px-3 py-3 sm:px-6 sm:py-5 align-top">
                          <div className="flex flex-col gap-2 items-start">
                            <span className="inline-flex items-center px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md text-[10px] sm:text-xs font-bold bg-blue-50 text-blue-700 uppercase tracking-wide border border-blue-100">
                              {tender.tenderType || "TENDER"}
                            </span>
                            <span
                              className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-bold border ${tender.isActive
                                ? "bg-green-50 text-green-700 border-green-200"
                                : "bg-gray-50 text-gray-600 border-gray-200"
                                }`}
                            >
                              <span className={`w-1.5 h-1.5 rounded-full ${tender.isActive ? "bg-green-500 animate-pulse" : "bg-gray-400"}`}></span>
                              {tender.isActive ? "Active" : "Closed"}
                            </span>
                          </div>
                        </td>

                        {/* Opening Date */}
                        <td className="px-3 py-3 sm:px-6 sm:py-5 align-top">
                          <div className="flex flex-col">
                            <span className="text-xs sm:text-sm text-green-700 font-bold">
                              {formatDate(tender.bidOpenDate)}
                            </span>
                            <span className="text-[10px] text-gray-400 font-medium uppercase tracking-wider">Start</span>
                          </div>
                        </td>

                        {/* Closing Date */}
                        <td className="px-3 py-3 sm:px-6 sm:py-5 align-top">
                          <div className="flex flex-col">
                            <span className="text-xs sm:text-sm text-red-600 font-bold">
                              {formatDate(tender.bidSubmissionDate)}
                            </span>
                            <span className="text-[10px] text-gray-400 font-medium uppercase tracking-wider">End</span>
                          </div>
                        </td>

                        {/* Value */}
                        <td className="px-3 py-3 sm:px-6 sm:py-5 align-top">
                          <div className="flex flex-col gap-1">
                            <p className="text-sm sm:text-lg font-bold text-gray-900 tracking-tight">
                              {formatCurrency(tender.amount)}
                            </p>
                            {tender.emdAmount && (
                              <p className="text-[10px] sm:text-xs text-gray-500">
                                EMD: {formatCurrency(tender.emdAmount)}
                              </p>
                            )}
                          </div>
                        </td>

                        {/* Actions */}
                        <td className="px-3 py-3 sm:px-6 sm:py-5 align-middle text-right">
                          <div className="flex flex-col items-end gap-2">
                            <button
                              onClick={() => router.push(`/tenders/${tender.id}`)}
                              className="w-full px-2 py-1.5 sm:px-4 sm:py-2 bg-green-600 text-white text-[10px] sm:text-xs font-bold uppercase tracking-wider rounded-lg hover:bg-green-700 transition-colors shadow-sm active:scale-95 text-center min-w-[80px] sm:min-w-[100px]"
                            >
                              View Details
                            </button>
                            <div className="flex items-center justify-end gap-2 w-full">
                              <button
                                onClick={() => handleSaveToggle(tender.id)}
                                className={`p-1.5 sm:p-2 rounded-lg border transition-all ${savedTenderIds.includes(tender.id)
                                  ? "bg-green-50 border-green-200 text-green-600"
                                  : "bg-white border-gray-200 text-gray-400 hover:border-gray-300 hover:text-gray-600"
                                  }`}
                                title={savedTenderIds.includes(tender.id) ? "Unsave" : "Save"}
                              >
                                <Bookmark className={`w-3 h-3 sm:w-4 sm:h-4 ${savedTenderIds.includes(tender.id) ? "fill-current" : ""}`} />
                              </button>
                            </div>
                          </div>
                        </td>
                      </motion.tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Load More Button */}
            {page < totalPages && (
              <div className="mt-6 text-center">
                <button
                  onClick={loadMore}
                  disabled={isLoading}
                  className="px-6 py-3 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
                >
                  {isLoading ? "Loading..." : "Load More Tenders"}
                </button>
              </div>
            )}

            {page >= totalPages && filteredTenders.length > 0 && (
              <div className="mt-6 text-center text-gray-600">
                <p>No more tenders to load</p>
              </div>
            )}
          </>
        )}
      </div>
      <Footer />
      <PlanRestrictionModal
        isOpen={showPlanModal}
        onClose={() => setShowPlanModal(false)}
      />
    </div>
  );
}

export default function AllTendersPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
      </div>
    }>
      <TendersList />
    </Suspense>
  );
}