import React from "react";

interface Loan {
  loanId: string;
  loanAmount: number;
  repaymentDuration: number;
  administrativeFee: number;
  interestRate: number;
  totalRepaymentAmount: number;
  status?: string;
  dateApplied: string;
  dateApproved: string;
  dueDate: string;
}

interface LoansCardProps {
  loan?: Loan | null;
}

export const LoansCard = ({ loan }: LoansCardProps) => {
  if (!loan) {
    return (
      <div className="bg-linear-to-br from-purple-500 to-purple-600 rounded-t-[32px] p-4 sm:p-6 text-white">
        <h3 className="text-base sm:text-lg font-semibold">Loans</h3>
        <p className="text-sm text-purple-100">No loan data available.</p>
      </div>
    );
  }

  const {
    loanAmount,
    repaymentDuration,
    administrativeFee,
    interestRate,
    totalRepaymentAmount,
    status = "Unknown", 
    dateApplied,
    dueDate,
  } = loan;

  const isPaid = status?.toLowerCase() === "paid";

  return (
    <div
      className='rounded-t-[32px] p-4 sm:p-6 bg-[#541592] text-white'
    >
      <div className="flex justify-between items-center mb-3">
        <h3 className="text-base sm:text-lg font-semibold">Loan Summary</h3>
        <span
          className={`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"
          }`}
        >
          {status}
        </span>
      </div>

      <div className="text-xl sm:text-2xl lg:text-3xl font-bold mb-3 sm:mb-4">
        ₦{(totalRepaymentAmount ?? 0).toLocaleString()}
      </div>

      <div className="text-purple-100 text-xs sm:text-sm mb-1">
        Duration: {repaymentDuration} days
      </div>

      <div className="text-purple-200 text-xs mb-3 sm:mb-4">
        Applied on {dateApplied}
      </div>

      <div className="border-t border-purple-400 pt-3 sm:pt-4">
        <div className="text-xs sm:text-sm font-medium mb-2 sm:mb-3 mt-4">
          Repayment Details
        </div>

        <div className="space-y-1 sm:space-y-3">
          <div className="flex justify-between text-xs sm:text-sm">
            <span className="text-purple-100">Loan Amount</span>
            <span>₦{(loanAmount ?? 0).toLocaleString()}</span>
          </div>

          <div className="flex justify-between text-xs sm:text-sm">
            <span className="text-purple-100">Administrative Fee</span>
            <span>{administrativeFee ?? 0}%</span>
          </div>

          <div className="flex justify-between text-xs sm:text-sm">
            <span className="text-purple-100">Interest Rate</span>
            <span>{interestRate ?? 0}%</span>
          </div>

          <div className="flex justify-between text-xs sm:text-sm">
            <span className="text-purple-100">Due Date</span>
            <span>{dueDate}</span>
          </div>
        </div>

        <div className="text-xs text-purple-100 mt-3 sm:mt-10 leading-relaxed">
            Please note that a daily overdue fee of 2% of the total amount will apply
            if payment is not made by the due date. To avoid additional charges,
            please ensure timely repayment.
        </div>
      </div>
    </div>
  );
};