"use client";

import { formatAmount } from "../../lib/utils/helpers";
import Button from "../Button";
import { CircleFadingPlus } from "lucide-react";
import { useRouter } from "next/navigation";
import { useAuth } from "../../context/AuthContext";

interface LoanOverviewProps {
  title: string;
  amount: number | undefined;
  growth: string;
  bgColor: string;
  textColor: string;
  totalRepaymentAmount?: string
}

// Financial Card Component
export const LoanOverview = ({
  title,
  amount,
  bgColor,
  textColor,
}: LoanOverviewProps) => {
    const router = useRouter();
    const { userLoanSummary } = useAuth();
  
  const navigateToRepayLoan = () => {
    router.push('/loan/repayloan');
  }

  const isPaid = userLoanSummary?.status?.toLowerCase() === "paid";
    
  return (
    <>
      <div className={`${bgColor} rounded-3xl p-4 sm:p-8 text-white`}>
        {/* Title + Amount */}
        <h3 className="text-base sm:text-lg font-semibold mb-2">{title}</h3>
        <div className="flex mb-2 justify-between">

          <p className="text-xl sm:text-2xl lg:text-3xl font-bold"> 
            {formatAmount(amount)}
          </p>

        <span
          className={`inline-flex justify-center items-center px-3 rounded-full text-xs sm:text-sm font-medium  ${
            isPaid ? "bg-green-100 py-1 text-green-800" : "bg-yellow-100 text-yellow-800"
          }`}
        >
          {userLoanSummary?.status}
        </span>
        </div>

              {/* Growth */}
        <div className="w-[30%]">
            <div className={`flex items-center justify-between p-2 ${textColor}`}>
              <span className="text-xs sm:text-sm">Due date</span>
              <span className="text-xs sm:text-sm">
                {userLoanSummary?.dueDate
                  ? new Date(userLoanSummary.dueDate).toLocaleDateString('en-GB', {
                      day: '2-digit',
                      month: 'long',
                      year: 'numeric',
                    })
                  : ''}
              </span>
            </div>
            <div className={`flex items-center justify-between p-2 ${textColor}`}>
              <span className="text-xs sm:text-sm">Due amount</span>
            <span className="text-xs sm:text-sm">{ formatAmount(userLoanSummary?.loanAmount)}</span>
            </div>
            <div className={`flex items-center justify-between p-2 ${textColor}`}>
              <span className="text-xs sm:text-sm">Monthly Repayment</span>
              <span className="text-xs sm:text-sm">
                {formatAmount(
                  (userLoanSummary?.loanAmount || 0) /
                  ((userLoanSummary?.repaymentDuration || 0) / 30 || 1)
                )}
              </span>
            </div>
        </div>

        {/* Action Buttons */}
        <div className="mt-4 flex flex-wrap gap-3">
            <Button
              type="button"
              bgColor={`${
                userLoanSummary?.status === "Paid" || userLoanSummary?.status === "Rejected"
                  ? "bg-[#FFFFFF] hover:bg-[#8E48A0] hover:text-[#fff] hover:border hover:border-white cursor-not-allowed"
                  : "bg-white "
              }`}
              textColor="text-black"
              width="15%"
              onClick={navigateToRepayLoan}
              disabled={
                userLoanSummary?.status === "Paid" ||
                userLoanSummary?.status === "Rejected"
              }
            >
              <div className="flex items-center justify-center gap-2">
                <CircleFadingPlus size={16} strokeWidth={3} />
                <h4 className="text-xs sm:text-sm md:text-base">Repay loan</h4>
              </div>
            </Button>
            <Button
              type="button"
              border="border border-white"
              width="15%"
              bgColor="transparent"
            >
              <div className="flex items-center justify-center gap-2">
                <CircleFadingPlus size={16} strokeWidth={3} />
                <h4 className="text-xs sm:text-sm md:text-base">View All</h4>
              </div>
            </Button>
        </div>
      </div>
      </>
  );
};