"use client";
import React from "react";
import Image from "next/image";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import BankLoanApplyForm from "./BankLoanApplyForm";

interface Feature {
  id: number;
  details: string;
}
interface Offer {
  id: number;
  details: string;
}

interface BankLoanCardType {
  id: number;
  name: string;
  bankname: string;
  minIncome: number;
  image: string;
  features: Feature[];
  offers: Offer[];
  flatRate?: string;
  reducingRate?: string;
}

interface Props {
  loan: BankLoanCardType;
  open: boolean;
  onClose: () => void;
}

const BankLoanApplyModal: React.FC<Props> = ({ loan, open, onClose }) => {
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl w-full sm:max-h-none sm:overflow-y-visible max-h-[90vh] overflow-y-auto sm:rounded-xl rounded-none">
        <DialogHeader>
          <DialogTitle className="text-base sm:text-xl">
            Apply for {loan.name}
          </DialogTitle>
        </DialogHeader>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
          {/* You can add a loan details summary here if needed */}
          <div className="hidden md:block">
            <Image
              src={loan.image}
              alt={loan.name}
              width={600}
              height={160}
              className="w-full h-40 object-contain rounded-md"
            />
            <div className="mt-4">
              <h3 className="text-blue-700 font-semibold text-lg text-center mb-1 break-words">
                {loan.name}
              </h3>
              <div className="text-xs sm:text-sm space-y-1 mb-4">
                <div className="flex justify-between flex-wrap">
                  <span className="text-gray-500 font-medium">Minimum Salary</span>
                  <span className="font-semibold text-black">
                    AED {parseInt(String(loan.minIncome)).toLocaleString()}
                  </span>
                </div>
                <div className="flex justify-between flex-wrap">
                  <span className="text-gray-500 font-medium">Fixed Rate</span>
                  <span className="font-semibold text-black">{loan.flatRate ?? "N/A"}</span>
                </div>
                <div className="flex justify-between flex-wrap">
                  <span className="text-gray-500 font-medium">Reducing Rate</span>
                  <span className="font-semibold text-black">{loan.reducingRate ?? "N/A"}</span>
                </div>
              </div>
              {loan.features.length > 0 && (
                <div>
                  <h4 className="font-semibold text-sm text-gray-700 mt-4 mb-2">Features</h4>
                  <ul className="text-sm text-gray-800 space-y-2">
                    {loan.features.slice(0, 4).map((feature) => (
                      <li key={feature.id} className="flex gap-2 items-start">
                        <span className="text-red-500 mt-0.5">✔️</span>
                        <span className="break-words">{feature.details}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          </div>
          <BankLoanApplyForm
            loanId={loan.id}
            loanName={loan.name}
            bankName={loan.bankname}
            onSuccess={onClose}
          />
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default BankLoanApplyModal;