"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { type Tender } from "@/lib/api";
import { FileText, Download, Eye, Lock, MapPin, Calendar, CreditCard, Share2, Heart, Mail, Phone } from "lucide-react";
import { useSelector } from "react-redux";
import { selectIsAuthenticated, selectCurrentUser } from "@/redux/slices/authSlice";
import { useGetTenderByIdQuery } from "@/redux/apis/tenderApi";
import { useSaveUserTenderMutation, useGetMySavedTendersQuery, useRemoveUserTenderMutation } from "@/redux/apis/saveTenderApi";
import { useGetProfileQuery } from "@/redux/apis/authApi";
import Link from "next/link";
import PlanRestrictionModal from "@/app/components/PlanRestrictionModal";

interface TenderDetailsClientProps {
  tender: Tender;
}

export default function TenderDetailsClient({ tender: initialTender }: TenderDetailsClientProps) {
  const [mounted, setMounted] = useState(false);
  const isAuthenticated = useSelector(selectIsAuthenticated);
  const currentUser = useSelector(selectCurrentUser);

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

  const { data: clientResponse } = useGetTenderByIdQuery(initialTender.id, {
    skip: !mounted || !isAuthenticated,
  });

  const { data: savedTendersData } = useGetMySavedTendersQuery(undefined, { skip: !isAuthenticated });
  const { data: profileData } = useGetProfileQuery(undefined, { skip: !isAuthenticated });

  const [saveUserTender] = useSaveUserTenderMutation();
  const [removeUserTender] = useRemoveUserTenderMutation();
  const savedTenderIds = savedTendersData?.data?.map((t: any) => t.tenderId) || [];
  const [showPlanModal, setShowPlanModal] = useState(false);

  const isSaved = savedTenderIds.includes(initialTender.id);

  const handleSaveToggle = async () => {
    if (!isAuthenticated) {
      window.location.href = "/login";
      return;
    }
    try {
      if (isSaved) {
        await removeUserTender(initialTender.id).unwrap();
      } else {
        await saveUserTender({ tenderId: initialTender.id }).unwrap();
      }
    } catch (error: any) {
      if (error?.data?.message?.toLowerCase().includes("plan")) {
        setShowPlanModal(true);
      } else {
        console.error("Failed to save/unsave tender:", error);
      }
    }
  };

  const tender = clientResponse?.data || initialTender;

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

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

  const getDaysLeft = (endDate: string | null) => {
    if (!endDate) return 0;
    const end = new Date(endDate);
    const now = new Date();

    // Reset time portion to ensure calculation is based on calendar days only
    end.setHours(0, 0, 0, 0);
    now.setHours(0, 0, 0, 0);

    const diff = end.getTime() - now.getTime();
    const days = Math.ceil(diff / (1000 * 3600 * 24));
    return days > 0 ? days : 0;
  };

  const getDocumentUrl = (path: string) => {
    const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api";
    return `${apiUrl}/uploads/${path}`;
  };

  const safeParseDocuments = (docString: string | null): string[] => {
    if (!docString) return [];
    if (docString.startsWith("Please")) return [];
    try {
      const parsed = JSON.parse(docString);
      return Array.isArray(parsed) ? parsed : [];
    } catch {
      return [];
    }
  };

  const isValidDocument = (doc: string | null): boolean => {
    if (!doc) return false;
    return !doc.startsWith("Please");
  };

  const otherDocs = safeParseDocuments(tender.otherDocuments);
  const user = profileData?.data || currentUser;

  // Auth/Plan Logic for "Apply" button
  const hasTenderPlan = user?.serviceTenders || user?.tenderActive || user?.serviceTender;
  const canApply = isAuthenticated && hasTenderPlan;

  return (
    <div className="bg-gray-50 min-h-screen font-sans text-gray-800">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">

          {/* LEFT COLUMN - Main Content */}
          <div className="lg:col-span-2 space-y-6">

            {/* Header Block */}
            <div className="bg-white rounded-lg p-6 shadow-sm border border-gray-200 relative">
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
                <div className="flex items-center gap-2">
                  <Lock className="w-5 h-5 text-[#00a6e6]" />
                  <h1 className="text-xl md:text-2xl font-bold text-[#0066cc] uppercase tracking-wide">ORGANIZATION</h1>
                  {!isAuthenticated && (
                    <span className="text-sm text-red-500 font-medium flex items-center gap-1">
                      <Lock className="w-3 h-3" /> Sign In to unlock
                    </span>
                  )}
                </div>

                {/* Countdown / Icons */}
                <div className="flex items-center gap-3 mt-3 md:mt-0">
                  <div className="flex gap-2 text-gray-400">
                    <button className="hover:text-green-500 transition-colors"><MessageIcon /></button>
                    <a href="mailto:support@tender247.com" className="hover:text-blue-500 transition-colors"><Mail className="w-5 h-5" /></a>
                    <button onClick={handleSaveToggle} className={`${isSaved ? 'text-red-500' : 'hover:text-red-500'} transition-colors`}>
                      <Heart className={`w-5 h-5 ${isSaved ? 'fill-current' : ''}`} />
                    </button>
                    <button className="hover:text-blue-600 transition-colors"><Share2 className="w-5 h-5" /></button>
                  </div>

                  <div className="flex flex-col items-center justify-center bg-white border border-red-100 rounded px-2 py-1 ml-2">
                    <span className="text-xl font-bold text-red-600 leading-none">{getDaysLeft(tender.bidSubmissionEndDateOnline || tender.bidSubmissionEndDateOffline || tender.bidSubmissionDate)}</span>
                    <span className="text-[10px] text-gray-500 uppercase">Days Left</span>
                  </div>
                </div>
              </div>

              {/* Tags & Location */}
              <div className="flex flex-wrap items-center gap-3 mb-4">
                <span className="bg-gray-100 text-gray-700 px-3 py-1 rounded text-sm font-medium border border-gray-200">
                  {tender.tenderType || "Tender"}
                </span>
                <div className="flex items-center text-gray-600 text-sm font-medium">
                  <MapPin className="w-4 h-4 mr-1 text-gray-500" />
                  {tender.district}, {tender.state}
                </div>
              </div>

              {/* Description */}
              <div className="space-y-3 mb-6">
                <div>
                  <span className="font-bold text-gray-900 block mb-1">Brief :</span>
                  <p className="text-sm text-gray-600 leading-relaxed">
                    {tender.tenderTitle}
                  </p>
                </div>
                {tender.tenderDescription && (
                  <div>
                    <span className="font-bold text-gray-900 block mb-1">Description :</span>
                    <p className="text-sm text-gray-600 leading-relaxed">
                      {tender.tenderDescription}
                    </p>
                  </div>
                )}
              </div>

              {/* Key Stats Grid */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-8 text-sm mt-6 pt-6 border-t border-gray-100">
                <div>
                  <p className="text-gray-500 mb-1">Submission End Date</p>
                  <p className="font-bold text-gray-900">{formatDate(tender.bidSubmissionEndDateOnline || tender.bidSubmissionEndDateOffline || tender.bidSubmissionDate)}</p>
                </div>
                <div>
                  <p className="text-gray-500 mb-1">Opening Date</p>
                  <p className="font-bold text-gray-900">{formatDate(tender.bidOpenDate)}</p>
                </div>
                <div>
                  <p className="text-gray-500 mb-1">Tender Estimated Cost</p>
                  <p className="font-bold text-gray-900">{formatCurrency(tender.amount)}</p>
                </div>
                <div>
                  <p className="text-gray-500 mb-1">EMD</p>
                  <p className="font-bold text-gray-900">{formatCurrency(tender.emdAmount)}</p>
                </div>
                <div className="col-span-2 md:col-span-4 mt-2">
                  <span className="text-gray-500 mr-2">Tender Document Fees:</span>
                  <span className="font-bold text-gray-900">{formatCurrency(tender.tenderFee)}</span>
                </div>
              </div>
            </div>

            {/* Tender Overview */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
              <div className="bg-gray-50 px-6 py-3 border-b border-gray-200">
                <h3 className="font-bold text-gray-800">Tender Overview</h3>
              </div>
              <div className="p-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4 text-sm">
                  <OverviewRow label="T247 ID" value={tender.id.toString().substring(0, 8).toUpperCase()} />
                  <OverviewRow label="Organization Tender ID" value={tender.tenderId || "N/A"} />
                  <OverviewRow label="Tender Reference Number" value={tender.tenderReferenceNumber || "N/A"} />
                  <OverviewRow label="Tender Type" value={tender.tenderType || "N/A"} />
                  <OverviewRow label="Site Location" value={`${tender.city || tender.district || 'Not Specified'}, ${tender.state || 'India'}`} />
                  <OverviewRow label="Pincode" value={tender.pincode || "N/A"} />
                </div>
              </div>
            </div>

            {/* Tender Documents */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
              <div className="bg-gray-50 px-6 py-3 border-b border-gray-200">
                <h3 className="font-bold text-gray-800">Tender Documents</h3>
              </div>
              <div className="p-6 space-y-3">
                {/* NIT / Tender Notice */}
                {isValidDocument(tender.tenderNoticeDocument) && (
                  <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-0">
                    <span className="text-sm font-medium text-gray-700">NIT / Tender Notice</span>
                    <a href={getDocumentUrl(tender.tenderNoticeDocument!)} target="_blank" className="text-orange-600 font-medium text-sm hover:underline">Download</a>
                  </div>
                )}
                {/* BOQ */}
                {isValidDocument(tender.boqDocument) && (
                  <div className="flex justify-between items-center py-2 border-b border-gray-100 last:border-0">
                    <span className="text-sm font-medium text-gray-700">BOQ Document</span>
                    <a href={getDocumentUrl(tender.boqDocument!)} target="_blank" className="text-orange-600 font-medium text-sm hover:underline">Download</a>
                  </div>
                )}
                {/* Other Docs */}
                {otherDocs.map((doc, idx) => (
                  <div key={idx} className="flex justify-between items-center py-2 border-b border-gray-100 last:border-0">
                    <span className="text-sm font-medium text-gray-700">Additional Document {idx + 1}</span>
                    <a href={getDocumentUrl(doc)} target="_blank" className="text-orange-600 font-medium text-sm hover:underline">Download</a>
                  </div>
                ))}

                {!isValidDocument(tender.tenderNoticeDocument) && !isValidDocument(tender.boqDocument) && otherDocs.length === 0 && (
                  <div className="text-center text-gray-500 text-sm py-2">No documents available</div>
                )}
              </div>
            </div>

            {/* Apply Action */}
            <div className="mt-6 flex justify-center">
              {!isAuthenticated ? (
                <Link href="/login" className="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded shadow-lg transition-colors w-full sm:w-auto text-center">
                  Login to Apply
                </Link>
              ) : !hasTenderPlan ? (
                <Link href="/plans" className="bg-orange-600 hover:bg-orange-700 text-white font-bold py-3 px-8 rounded shadow-lg transition-colors w-full sm:w-auto text-center">
                  Buy Plan to Apply
                </Link>
              ) : (
                <Link href={`/tenders/${tender.id}/apply`} className="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded shadow-lg transition-colors w-full sm:w-auto text-center">
                  Apply for Tender
                </Link>
              )}
            </div>

          </div>

          {/* RIGHT COLUMN - Sidebar */}
          <div className="lg:col-span-1 space-y-6">

            {/* Insights Widget */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
              <div className="bg-orange-600 px-4 py-2 text-center">
                <h3 className="text-white text-sm font-bold uppercase tracking-wide">INSIGHTS : BY COUNT</h3>
              </div>
              <div className="grid grid-cols-2 divide-x divide-gray-200">
                <div className="p-4 text-center">
                  <p className="text-2xl font-bold text-gray-900">957</p>
                  <p className="text-[10px] text-gray-500 leading-tight mt-1">Solar Power Plant Tenders - Live</p>
                </div>
                <div className="p-4 text-center">
                  <p className="text-2xl font-bold text-gray-900">7.73 K</p>
                  <p className="text-[10px] text-gray-500 leading-tight mt-1">Solar Power Plant Results - Last 1 Year</p>
                </div>
              </div>
            </div>

            {/* Max Win Widget */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden p-4">
              <p className="text-xs text-gray-500 mb-2">Maximum Win:</p>
              <div className="p-4 text-center text-gray-400 text-xs italic">
                No data available
              </div>
              <button className="w-full bg-orange-500 hover:bg-orange-600 text-white text-xs font-bold py-2 rounded uppercase transition-colors opacity-50 cursor-not-allowed">
                Click to Know Maximum Win
              </button>
            </div>

            {/* Participants Widget */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden p-4">
              <p className="text-xs text-gray-500 mb-2">Probable Participants:</p>
              <div className="p-4 text-center text-gray-400 text-xs italic">
                No data available
              </div>
              <button className="w-full bg-orange-500 hover:bg-orange-600 text-white text-xs font-bold py-2 rounded uppercase transition-colors opacity-50 cursor-not-allowed">
                View All Probable Participants
              </button>
            </div>

            {/* Previous Results Widget */}
            <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden p-4 pb-2">
              <button className="w-full bg-orange-500 hover:bg-orange-600 text-white text-xs font-bold py-2 rounded uppercase transition-colors mb-2">
                View Previous Results
              </button>
              <p className="text-[10px] text-center text-gray-400">According to your category of Interest</p>
            </div>

          </div>
        </div>
      </div>

      <PlanRestrictionModal
        isOpen={showPlanModal}
        onClose={() => setShowPlanModal(false)}
      />
    </div>
  );
}

function OverviewRow({ label, value, isLink = false }: { label: string; value: string; isLink?: boolean }) {
  return (
    <div className="flex justify-between md:block">
      <span className="text-gray-500 block text-xs md:mb-1">{label} -</span>
      <span className={`text-gray-900 font-medium ${isLink ? 'text-orange-600 cursor-pointer text-xs font-normal' : ''}`}>
        {value}
      </span>
    </div>
  );
}

function MessageIcon() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
    </svg>
  );
}