"use client";
import FeatureCard from '@/components/mortgage-calculator/FeatureCard';
import { ComparisonIcon, OffersIcon, FreeServiceIcon } from '@/components/mortgage-calculator/icons';
import MortgageCalculator1 from '@/components/mortgage-calculator/MortageCalculator1';
import MortgageCalculator2 from '@/components/mortgage-calculator/MortgageCalculator2';
import MortgageCalculator3 from '@/components/mortgage-calculator/MortageCalculator3';
import MortgageCalculator4 from '@/components/mortgage-calculator/MortageCalculator4';
import ProgressSteps from '@/components/mortgage-calculator/ProgressSteps';
import { Button } from '@/components/ui/button';
import { useEffect, useRef, useState } from 'react';
import Image from 'next/image';
import HorizontalAutoScroll from '@/components/HorizontalAutoScroll';
import Dialog from '@/components/ui/dialog';
import AccurateMortgageCalculator from '@/components/mortgage-calculator/AccurateMortgageCalculator';
import { createFinanceRequest } from '@/lib/api';
const MortgageCalculatorPage = () => {
    const [currentStep, setCurrentStep] = useState(1);
    const formRef = useRef<HTMLFormElement | null>(null);
    const [canProceed, setCanProceed] = useState(false);
    const [dialogOpen, setDialogOpen] = useState(false);

    // Lifted Form State
    const [formData, setFormData] = useState<any>({
        mortgageType: '',
        supportProgram: '',
        firstProperty: '',
        jobSector: '',
        rank: '',
        birthMonth: '',
        birthYear: '',
        basicSalary: '',
        netMonthlySalary: '',
        currentBank: '',
        hasLoans: '',
        loanType: [],
        monthlyLoans: '',
        loanDuration: '',
        isPropertyReady: '',
        propertyPrice: '',
        firstPayment: '',
        fullName: '',
        whatsappNumber: '',
        city: '',
        // Accurate calculator fields
        age: '',
        job: '',
        bank: '',
        salary: '',
        appointmentDate: '',
        maritalStatus: '',
        commitments: '',
        id_image: null,
        salary_certificate: null,
    });

    const updateFormData = (newData: any) => {
        setFormData((prev: any) => ({ ...prev, ...newData }));
    };

    const handleNextStep = () => {
        if (!formRef.current) return;
        const valid = formRef.current.reportValidity();
        if (!valid) return;

        if (currentStep === 4) {
            // Final submission for the 4-step form
            submitFinanceRequest();
            return;
        }

        setCurrentStep(currentStep + 1);
    }

    const handlePrevStep = () => {
        if (currentStep === 1) return;
        setCurrentStep(currentStep - 1);
    }

    const submitFinanceRequest = async (accurateData?: any) => {
        const finalData = accurateData || formData;
        const token = localStorage.getItem('amtar_auth_token');

        if (!token) {
            alert('يرجى تسجيل الدخول أولاً');
            return;
        }

        // Prepare data for backend
        // Combine extra fields into commitments
        let combinedCommitments = finalData.commitments || '';
        if (finalData.whatsappNumber || finalData.city || finalData.isPropertyReady) {
            combinedCommitments += `\n--- معلومات إضافية ---\n`;
            if (finalData.whatsappNumber) combinedCommitments += `الواتساب: ${finalData.whatsappNumber}\n`;
            if (finalData.city) combinedCommitments += `المدينة: ${finalData.city}\n`;
            if (finalData.isPropertyReady) combinedCommitments += `العقار جاهز: ${finalData.isPropertyReady === 'yes' ? 'نعم' : 'لا'}\n`;
            if (finalData.mortgageType) combinedCommitments += `نوع التمويل: ${finalData.mortgageType}\n`;
            if (finalData.jobSector) combinedCommitments += `قطاع العمل: ${finalData.jobSector}\n`;
        }

        const requestData: any = {
            name: finalData.fullName || finalData.name || 'عميل',
            job: finalData.job || finalData.jobSector || '',
            age: parseInt(finalData.age || '0', 10) || undefined,
            marital_status: finalData.maritalStatus || (finalData.maritalStatus === 'single' ? 'single' : 'married'),
            bank: finalData.bank || finalData.currentBank || '',
            salary: parseFloat(finalData.salary || finalData.netMonthlySalary || '0'),
            hiring_date: finalData.appointmentDate || undefined,
            commitments: combinedCommitments,
            property_price: parseFloat(finalData.propertyPrice || '0'),
            id_image: finalData.id_image,
            salary_certificate: finalData.salary_certificate,
            is_supported_by_moh: finalData.supportProgram === 'yes',
        };

        try {
            const result = await createFinanceRequest(requestData, token);
            if (result.success || result.status === 'success' || result.id) {
                alert('تم إرسال طلبك بنجاح');
                setDialogOpen(false);
                // Optionally redirect or reset
            } else {
                alert('فشل إرسال الطلب: ' + (result.message || 'خطأ غير معروف'));
            }
        } catch (error) {
            console.error('Submission error:', error);
            alert('حدث خطأ أثناء الإرسال');
        }
    };

    useEffect(() => {
        if (!formRef.current) return;
        setTimeout(() => setCanProceed(formRef.current?.checkValidity() ?? false), 0);
    }, [currentStep, formData]);

    const MortgageCalculatorComponents = [
        <MortgageCalculator1 key={1} data={formData} updateData={updateFormData} />,
        <MortgageCalculator2 key={2} data={formData} updateData={updateFormData} />,
        <MortgageCalculator3 key={3} data={formData} updateData={updateFormData} />,
        <MortgageCalculator4 key={4} data={formData} updateData={updateFormData} />,
    ];

    return (
        <div className="px-4 max-w-[90%] mx-auto">
            <div className="w-full md:w-1/2 mx-auto mt-8 md:mt-14 mb-6 text-center">
                <h1 className="text-2xl md:text-4xl font-semibold">حاسبة تمويل العقاري</h1>
                <p className="mt-2 text-[#45556C] text-md md:text-lg">
                    <span className="font-semibold text-[#1D293D]">ابحث عن تمويلك العقاري بسهولة</span> مع كثرة خيارات البنوك والجهات التمويلية، قد يكون اختيار المنتج المناسب مهمة معقدة. لذلك بسّطنا لك عملية البحث والمقارنة لتجد أفضل تمويل عقاري بكل سهولة واطمئنان.
                </p>
            </div>

            <div className="mt-10 flex flex-col md:flex-row gap-4">
                <FeatureCard
                    icon={<ComparisonIcon />}
                    title="مقارنة فورية"
                    description="استعرض مجموعة واسعة من عروض التمويل العقاري من عدة بنوك في مكان واحد دون الحاجة للتنقل بينها."
                />

                <FeatureCard
                    icon={<OffersIcon />}
                    title="عروض تمويل مميزة"
                    description="اختر العرض الأنسب لك واحصل على أفضل النسب والخيارات التي تناسب احتياجاتك."
                />

                <FeatureCard
                    icon={<FreeServiceIcon />}
                    title="خدمة مجانية بالكامل"
                    description="كل خدمات المقارنة والبحث عن التمويل العقاري متاحة لك دون أي رسوم."
                />
            </div>

            <div className='mt-10 w-full md:w-1/2 mx-auto border border-[#CAD5E2] p-3 rounded-xl'>
                <div className="bg-[#E2E8F0] p-4 rounded-md">
                    <h4 className="text-lg font-semibold">احسب تمويلك</h4>
                </div>

                <ProgressSteps classNames='mt-6 w-full md:w-[80%] mx-auto' steps={MortgageCalculatorComponents.length} currentStep={currentStep} />

                <form
                    ref={formRef}
                    onChange={() => setCanProceed(formRef.current?.checkValidity() ?? false)}
                    onInput={() => setCanProceed(formRef.current?.checkValidity() ?? false)}
                >
                    {MortgageCalculatorComponents[currentStep - 1]}
                </form>

                <div className='flex justify-center gap-4 mt-8'>
                    <Button type='button' className='px-10 py-2 rounded-full bg-[#0719381A] text-[#4F5874] hover:bg-[#0719381A]' onClick={handlePrevStep}>السابق</Button>
                    <Button type='button' className='px-10 py-2 rounded-full' onClick={handleNextStep} disabled={!canProceed}>
                        {currentStep === MortgageCalculatorComponents.length ? 'احسب تمويلك' : 'التالي'}
                    </Button>
                </div>
            </div>

            <div className='mt-8 hidden md:flex gap-6'>
                <div className='flex-1 flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/alrajhi-bank.png" alt="" width={80} height={80} />
                </div>
                <div className='flex-1 flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/snb.png" alt="" width={80} height={80} />
                </div>
                <div className='flex-1 flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/samba.png" alt="" width={80} height={80} />
                </div>
                <div className='flex-1 flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/riyad-bank.png" alt="" width={80} height={80} />
                </div>
                <div className='flex-1 flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/alawal-bank.png" alt="" width={80} height={80} />
                </div>
                <div className='flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/sabb.png" alt="" width={30} height={30} />
                </div>
                <div className='flex-1 flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/saudi-fransi-capital.png" alt="" width={80} height={80} />
                </div>
                <div className='flex-1 flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/bank-albilad.png" alt="" width={80} height={80} />
                </div>
                <div className='flex-1 flex justify-center items-center group'>
                    <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/alinma.png" alt="" width={80} height={80} />
                </div>
            </div>

            <div className='md:hidden mt-8'>
                <HorizontalAutoScroll classNames="md:hidden flex overflow-x-auto pt-6 pb-6 no-scrollbar">
                    <div className="flex gap-4">
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/alrajhi-bank.png" alt="" width={120} height={120} />
                        </div>
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/snb.png" alt="" width={120} height={120} />
                        </div>
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/samba.png" alt="" width={120} height={120} />
                        </div>
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/riyad-bank.png" alt="" width={120} height={120} />
                        </div>
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/alawal-bank.png" alt="" width={120} height={120} />
                        </div>
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/sabb.png" alt="" width={50} height={50} />
                        </div>
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/saudi-fransi-capital.png" alt="" width={120} height={120} />
                        </div>
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/bank-albilad.png" alt="" width={120} height={120} />
                        </div>
                        <div className="w-[40vw] flex items-center justify-center group">
                            <Image className='object-contain grayscale opacity-60 group-hover:filter-none group-hover:opacity-100 transition-[filter,opacity] duration-200' src="/mortgage-calculator/banks/alinma.png" alt="" width={120} height={120} />
                        </div>
                    </div>
                </HorizontalAutoScroll>
            </div>

            <div className='flex justify-center'>
                <Button type='button' onClick={() => setDialogOpen(true)} className='mt-10 px-4 py-3 bg-[#052531] flex items-center gap-2 text-white rounded-full'>
                    احسب تمويلك بشكل دقيق
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M11.3337 11.3334L4.66699 4.66669M4.66699 4.66669V11.3334M4.66699 4.66669H11.3337" stroke="white" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                </Button>
            </div>
            <Dialog open={dialogOpen} onOpenChange={setDialogOpen} title='احسب تمويلك'>
                <AccurateMortgageCalculator setDialogOpen={setDialogOpen} onSubmit={submitFinanceRequest} />
            </Dialog>
        </div>
    );
};

export default MortgageCalculatorPage;