'use client';

import React, { useState } from 'react';
import BankLoanApplyModal from './BankLoanApplyModal';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

interface BankLoanDetailRow {
  benefitid: number;
  benefitdetails: string;
  benefitcategory: string;
}

interface BankLoanDetailProps {
  id: number;
  name: string;
  bankname: string;
  logo: string;
  image: string;
  details: { label: string; value: string }[];
  benefits: string[];
  bankloandetails?: BankLoanDetailRow[];
}

const BankLoanDetail: React.FC<BankLoanDetailProps> = ({
  id,
  name,
  bankname,
  image,
  details,
  benefits,
  bankloandetails,
}) => {
  const [showApplyModal, setShowApplyModal] = useState(false);

  const safeImage = image || "/default.webp";
  const safeDetails = Array.isArray(details) ? details : [];
  const visibleDetails = safeDetails.filter((item) => !item.label.toLowerCase().includes('annual fee'));
  const safeBenefits = Array.isArray(benefits) ? benefits : [];
  const safeBankLoanDetails = Array.isArray(bankloandetails) ? bankloandetails : [];

  const groupedDetails = safeBankLoanDetails.reduce((acc, item) => {
    const category = item.benefitcategory;
    if (!acc[category]) acc[category] = [];
    acc[category].push(item.benefitdetails);
    return acc;
  }, {} as Record<string, string[]>);

  console.log("[DEBUG] Rendering loan with name:", name);
  console.log("[DEBUG] Grouped details:", groupedDetails);

  return (
    <div className="max-w-4xl mx-auto p-6">
      {/* Breadcrumb Navigation */}
      <nav className="text-sm text-gray-600 mb-4" aria-label="Breadcrumb">
        <ol className="list-none p-0 inline-flex space-x-2">
          <li className="inline-flex items-center">
            <Link href="/" className="hover:underline text-blue-600">Home</Link>
            <span className="mx-2">/</span>
          </li>
          <li className="inline-flex items-center">
            <Link href="/loan" className="hover:underline text-blue-600">Loans</Link>
            <span className="mx-2">/</span>
          </li>
          <li className="text-gray-500" aria-current="page">{name}</li>
        </ol>
      </nav>

      <h2 className="text-2xl font-bold">{name}</h2>
      <p className="text-gray-600 text-sm mt-1">{bankname}</p>

      <Card className="mt-4 border border-blue-300">
        <CardContent className="p-6 flex flex-col md:flex-row items-center md:items-start gap-6">
          {safeImage && (
            <div className="flex-shrink-0">
              <Image
                src={safeImage}
                alt={name}
                width={0}
                height={0}
                sizes="100vw"
                className="w-28 h-16 sm:w-72 sm:h-40 object-contain rounded-md"
                unoptimized={false}
              />
            </div>
          )}

          <div className="flex-1 grid grid-cols-2 gap-4 text-sm">
            {visibleDetails.map((item, index) => (
              <div key={index} className="flex justify-between">
                <span className="font-medium text-xs text-gray-700">{item.label}</span>
                <span className="text-xs">{item.value}</span>
              </div>
            ))}
          </div>

          <div>
            <Button
              onClick={() => setShowApplyModal(true)}
              className="bg-blue-600 text-white px-6 py-2"
            >
              Apply Now
            </Button>
          </div>
              {/* Loan Apply Modal */}
              {showApplyModal && (
                <BankLoanApplyModal
                  open={showApplyModal}
                  onClose={() => setShowApplyModal(false)}
                  loan={{
                    id,
                    name,
                    bankname,
                    minIncome: Number(details.find((d) => d.label.toLowerCase().includes('salary'))?.value?.replace(/\D/g, '') || 0),
                    image,
                    features: benefits.map((details, idx) => ({ id: idx, details })),
                    offers: [],
                    flatRate:
                      details.find((d) => d.label.toLowerCase().includes('fixed'))?.value ||
                      details.find((d) => d.label.toLowerCase().includes('flat'))?.value ||
                      'N/A',
                    reducingRate: details.find((d) => d.label.toLowerCase().includes('reducing'))?.value || 'N/A',
                  }}
                />
              )}
        </CardContent>
      </Card>

      {/* Main Benefits */}
      {safeBenefits.length > 0 && (
        <div className="mt-6 border border-blue-300 p-6 rounded-lg">
          <h3 className="text-lg font-semibold text-blue-700">Main Benefits</h3>
          <ul className="mt-3 space-y-2 text-sm text-gray-700">
            {safeBenefits.map((benefit, index) => (
              <li key={index} className="flex items-start gap-2">
                <CheckCircle className="w-4 h-4 text-green-500 mt-1" />
                <span>{benefit}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Grouped Benefit Categories */}
      {Object.entries(groupedDetails).map(([category, items]) => (
        <div key={category} className="mt-6 border border-blue-300 p-6 rounded-lg">
          <h3 className="text-lg font-semibold text-blue-700">{category}</h3>
          <ul className="mt-3 space-y-2 text-sm text-gray-700">
            {items.map((detail, index) => (
              <li key={index} className="flex items-start gap-2">
                <CheckCircle className="w-4 h-4 text-green-500 mt-1" />
                <span>{detail}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
};

export default BankLoanDetail;