"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import Header from "@/app/components/Header";
import Footer from "@/app/components/Footer";
import { useGetMySavedTendersQuery, useRemoveUserTenderMutation } from "@/redux/apis/saveTenderApi";
import { useSelector } from "react-redux";
import { selectIsAuthenticated } from "@/redux/slices/authSlice";

function SavedTendersList() {
  const router = useRouter();
  const isAuthenticated = useSelector(selectIsAuthenticated);
  const { data, isLoading, isError, error } = useGetMySavedTendersQuery(undefined, { skip: !isAuthenticated });
  const [removeUserTender] = useRemoveUserTenderMutation();
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  const savedTenders = data?.data || [];
  const tenders = savedTenders.map((item: any) => item.tender).filter(Boolean);

  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 handleRemove = async (tenderId: number) => {
    await removeUserTender(tenderId);
  };

  if (!mounted) return null;

  if (!isAuthenticated) {
    return (
      <div className="min-h-screen bg-gray-50 flex flex-col">
        <Header />
        <div className="flex-1 flex flex-col items-center justify-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">Please log in to view saved tenders</h2>
          <Link href="/login" className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
            Log In
          </Link>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 overflow-x-hidden w-full max-w-full">
      <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">
            <h1 className="text-2xl font-bold text-gray-900">My Saved Tenders</h1>
            <Link href="/tenders" className="text-green-600 hover:text-green-700 font-medium">Browse All Tenders</Link>
          </div>
          {tenders.length > 0 && <p className="mt-2 text-gray-600">You have {tenders.length} saved tenders.</p>}
        </div>
      </header>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {isLoading ? (
          <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 saved tenders...</p>
          </div>
        ) : tenders.length === 0 ? (
          <div className="text-center py-12 bg-white rounded-lg shadow-sm">
            <p className="text-gray-600 text-lg mb-4">No saved tenders found.</p>
            <Link href="/tenders" className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
              Explore Tenders
            </Link>
          </div>
        ) : (
          <div className="bg-white rounded-lg shadow-lg 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-green-600">
                  <tr>
                    <th className="px-4 py-4 text-left text-xs font-semibold text-white uppercase tracking-wider">Tender Title</th>
                    <th className="px-4 py-4 text-left text-xs font-semibold text-white uppercase tracking-wider">Ref No</th>
                    <th className="px-4 py-4 text-left text-xs font-semibold text-white uppercase tracking-wider">Amount</th>
                    <th className="px-4 py-4 text-left text-xs font-semibold text-white uppercase tracking-wider">Closing Date</th>
                    <th className="px-4 py-4 text-center text-xs font-semibold text-white uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {tenders.map((tender: any) => (
                    <tr key={tender.id} className="hover:bg-gray-50 transition-colors">
                      <td className="px-4 py-4">
                        <div className="text-sm font-medium text-gray-900 max-w-md break-words">{tender.tenderTitle}</div>
                      </td>
                      <td className="px-4 py-4 text-sm text-gray-900">{tender.tenderReferenceNumber || "N/A"}</td>
                      <td className="px-4 py-4 text-sm text-gray-900">{formatCurrency(tender.amount)}</td>
                      <td className="px-4 py-4 text-sm text-gray-900">{formatDate(tender.bidSubmissionDate)}</td>
                      <td className="px-4 py-4 text-center whitespace-nowrap">
                        <button
                          onClick={() => router.push(`/tenders/${tender.id}`)}
                          className="px-3 py-1.5 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 mr-2 text-sm font-medium"
                        >
                          View
                        </button>
                        <button
                          onClick={() => handleRemove(tender.id)}
                          className="px-3 py-1.5 bg-red-100 text-red-700 rounded hover:bg-red-200 text-sm font-medium"
                        >
                          Remove
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>
      <Footer />
    </div>
  );
}

export default function MySavedTendersPage() {
  return (
    <Suspense fallback={<div className="min-h-screen flex items-center justify-center">Loading...</div>}>
      <SavedTendersList />
    </Suspense>
  );
}