'use client';

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import BankLoanDetail from "@/components/customui/BankLoanDetail";
import { getPublicBaseUrl } from "@/lib/publicBaseUrl";

interface LoanData {
  id: number;
  name: string;
  bankname: string;
  logo: string;
  image: string;
  details: { label: string; value: string }[];
  benefits: string[];
  bankloandetails?: {
    benefitid: number;
    benefitdetails: string;
    benefitcategory: string;
  }[];
}

export default function LoanPageClient() {
  const searchParams = useSearchParams();
  const loanurl = searchParams.get("loanurl");

  const [loanData, setLoanData] = useState<LoanData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!loanurl) {
      setError("Loan URL (loanurl) is missing in the URL.");
      setLoading(false);
      return;
    }

    const fetchLoanData = async () => {
      try {
        const baseUrl = getPublicBaseUrl();
        const url = `${baseUrl}/api/bankloandetails/${encodeURIComponent(loanurl)}`;
        console.log("[INFO] Fetching loan data from:", url);

        const response = await fetch(url);
        if (!response.ok) {
          console.error("[ERROR] API response not OK:", response.status);
          setError("Something went wrong or invalid loan URL");
          return;
        }

        const data: LoanData = await response.json();
        if (!data || !data.name || !Array.isArray(data.details)) {
          console.error("[ERROR] Invalid data format received:", data);
          setError("Invalid loan data format");
          return;
        }

        setLoanData(data);
      } catch (err) {
        console.error("[ERROR] Fetch failed:", err);
        setError("An error occurred while loading loan details.");
      } finally {
        setLoading(false);
      }
    };

    fetchLoanData();
  }, [loanurl]);

  if (loading) return <p className="text-center mt-10">Loading...</p>;
  if (error) return <p className="text-center text-red-500">{error}</p>;
  if (!loanData) return null;

  return <BankLoanDetail {...loanData} />;
}