"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import ApplicantInfoCard from "./components/ApplicantInfoCard";
import QuotationUploadForm from "./components/QuotationUploadForm";
import UploadedQuotationsList from "./components/UploadedQuotationsList";
import { verifyQuotationToken } from "@/src/services/admin/services";
import { useCustomToast } from "@/src/hooks/web/useCustomToast";

export default function SharePage() {
  const searchParams = useSearchParams();
  const token = searchParams.get("token");

  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [applicationData, setApplicationData] = useState<any>(null);
  const [refreshKey, setRefreshKey] = useState(0);
  const [uploadedCount, setUploadedCount] = useState(0);
  const { showToast } = useCustomToast();
  useEffect(() => {
    if (!token) {
      setError("Invalid or missing token");
      setLoading(false);
      return;
    }

    const verifyToken = async () => {
      try {
        const response = await verifyQuotationToken(token);
        const data = response.data?.data || response.data;
        setApplicationData(data.application);
      } catch (err: any) {
        setError(err.response?.data?.message || "Failed to verify token");
        showToast({
          title: "Error",
          description: err.response?.data?.message || "Failed to verify token",
          type: "error",
        });
      } finally {
        setLoading(false);
      }
    };

    verifyToken();
  }, [token]);

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-US", {
      day: "2-digit",
      month: "short",
      year: "numeric",
    });
  };

  const handleUploadSuccess = () => {
    setRefreshKey((prev) => prev + 1);
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600"></div>
      </div>
    );
  }

  if (error || !applicationData) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-red-600 mb-2">Access Denied</h2>
          <p className="text-gray-600">{error || "Unable to load application data"}</p>
        </div>
      </div>
    );
  }

  return (
    <>
      <section
        className="relative w-full bg-cover bg-center bg-no-repeat py-6 md:py-10 px-5 lg:px-20 rounded-lg overflow-hidden mt-5"
        style={{ backgroundImage: "url('about/about-bg.png')" }}
      >
        <div className="absolute inset-0 bg-black/40"></div>
        <div className="relative z-10 max-w-7xl mx-auto">
          <h1 className="text-white text-[20px] lg:text-[35px] font-semibold">
            Upload Quotation
          </h1>
        </div>
      </section>

      <section className="w-full py-10 px-0 lg:px-10">
        <div className="max-w-7xl mx-auto">
          <div className="space-y-6">
            <ApplicantInfoCard
              applicantName={applicationData.applicant_name}
              applicationNo={applicationData.application_no}
              submittedDate={formatDate(applicationData.created_on)}
            />
            
            <div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
              <UploadedQuotationsList 
                key={refreshKey} 
                applicationId={applicationData.id}
                onCountChange={setUploadedCount}
              />
            </div>

            <div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
              <QuotationUploadForm 
                token={token!}
                uploadedCount={uploadedCount}
                onSuccess={handleUploadSuccess} 
              />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}