'use client';

import React, { useState, useEffect, useMemo } from 'react';
import {
  X,
  CreditCard,
  Lock,
  CheckCircle2,
  BookOpen,
  Layers,
  FileText,
  CheckSquare,
  Square,
  ShieldCheck,
  ArrowLeft,
  Loader2,
  Upload,
  Image as ImageIcon,
  Trash2,
} from 'lucide-react';
import { toast } from '@/context/ToastContext';
import { apiRequest } from '@/lib/api';
import { useAuth } from '@/context/AuthContext';
import StripePaymentForm from '@/components/StripePaymentForm';
import PayPalPaymentForm from '@/components/PayPalPaymentForm';

export interface RegistrationModalSelectedItem {
  id: string;
  title: string;
  price?: number;
  type?: 'course' | 'sub_course' | 'lesson';
  level?: string;
  courseId?: string;
}

export interface CourseOption {
  _id: string;
  title: string;
  level?: string;
  courseType?: string;
  parentCourse?: { _id: string; title?: string } | string | null;
  regularPrice: number;
  offerPrice?: number;
}

export interface LessonOption {
  _id: string;
  course?: string | { _id: string };
  chapterNumber: number;
  title: string;
  description?: string;
  durationMinutes?: number;
  price?: number;
  order?: number;
}

interface RegistrationModalProps {
  isOpen: boolean;
  onClose: () => void;
  selectedItem?: RegistrationModalSelectedItem | null;
  coursesOptions?: { label: string; value: string; price?: number }[];
}

export default function RegistrationModal({
  isOpen,
  onClose,
  selectedItem,
}: RegistrationModalProps) {
  const { user } = useAuth();

  // Form Field State
  const [name, setName] = useState('');
  const [whatsapp, setWhatsapp] = useState('');
  const [email, setEmail] = useState('');
  const [country, setCountry] = useState('Pakistan');
  const [paymentMethod, setPaymentMethod] = useState<'stripe' | 'paypal' | 'bank'>('stripe');
  const [submitting, setSubmitting] = useState(false);

  // Bank Transfer Payment Proof Upload State
  const [proofOfPaymentUrl, setProofOfPaymentUrl] = useState('');
  const [uploadingProof, setUploadingProof] = useState(false);

  const handleProofFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (!file.type.startsWith('image/') && !file.type.includes('pdf')) {
      toast.error('Please upload an image (PNG, JPG, WEBP) or PDF receipt.');
      return;
    }

    setUploadingProof(true);
    try {
      const formData = new FormData();
      formData.append('file', file);
      formData.append('category', 'payment-receipts');

      const apiBase = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api';
      const token = localStorage.getItem('token') || '';

      const res = await fetch(`${apiBase}/upload`, {
        method: 'POST',
        headers: {
          Authorization: token ? `Bearer ${token}` : '',
        },
        body: formData,
      });

      const data = await res.json();
      setUploadingProof(false);

      if (data.success && (data.fileUrl || data.url)) {
        setProofOfPaymentUrl(data.fileUrl || data.url);
        toast.success('Payment receipt screenshot uploaded successfully!');
      } else {
        toast.error(data.error || 'Failed to upload receipt screenshot');
      }
    } catch (err: any) {
      setUploadingProof(false);
      toast.error(err.message || 'Error uploading receipt');
    }
  };


  // Stripe Payment Intent State
  const [stripeIntent, setStripeIntent] = useState<{
    clientSecret: string;
    publishableKey: string;
    orderId: string;
    amount: number;
  } | null>(null);
  const [initializingStripe, setInitializingStripe] = useState(false);

  // PayPal Payment State
  const [paypalClientId, setPaypalClientId] = useState<string>('');

  // Cascading Course & Lesson Data State
  const [courses, setCourses] = useState<CourseOption[]>([]);
  const [loadingCourses, setLoadingCourses] = useState(false);

  const [selectedMainCourseId, setSelectedMainCourseId] = useState<string>('');
  const [selectedSubCourseId, setSelectedSubCourseId] = useState<string>('');

  // Purchase Scope: 'complete' (buy whole course, lessons = []) vs 'lessons' (select individual lessons)
  const [purchaseScope, setPurchaseScope] = useState<'complete' | 'lessons'>('complete');

  // Lessons State
  const [availableLessons, setAvailableLessons] = useState<LessonOption[]>([]);
  const [loadingLessons, setLoadingLessons] = useState<boolean>(false);
  const [selectedLessonIds, setSelectedLessonIds] = useState<string[]>([]);

  // 1. Prefill student info from logged-in user
  useEffect(() => {
    if (user) {
      if (user.name) setName(user.name);
      if (user.email) setEmail(user.email);
      if (user.phoneNumber) setWhatsapp(user.phoneNumber);
    }
  }, [user]);

  // Bank Settings State (fetched dynamically from Settings table)
  const [bankSettings, setBankSettings] = useState<{
    accountHolder: string;
    iban: string;
    bicSwift: string;
    bankName: string;
  }>({
    accountHolder: '',
    iban: '',
    bicSwift: '',
    bankName: '',
  });

  // 2. Fetch all courses and system settings when modal opens
  useEffect(() => {
    if (!isOpen) return;

    const fetchCoursesData = async () => {
      setLoadingCourses(true);
      const res = await apiRequest('/courses');
      if (res.success && Array.isArray(res.courses)) {
        setCourses(res.courses);
      }
      setLoadingCourses(false);
    };

    const fetchSettings = async () => {
      try {
        const res = await apiRequest('/settings');
        if (res.success && res.settings) {
          if (res.settings.bankTransfer) {
            const bt = res.settings.bankTransfer;
            setBankSettings({
              accountHolder: bt.accountHolder || '',
              iban: bt.iban || '',
              bicSwift: bt.bicSwift || '',
              bankName: bt.bankName || '',
            });
          }
          if (res.settings.paypal?.clientId) {
            setPaypalClientId(res.settings.paypal.clientId);
          }
        }
      } catch (err) {
        console.error('Failed to fetch settings:', err);
      }
    };

    fetchCoursesData();
    fetchSettings();
  }, [isOpen]);

  // Reset Stripe Intent if user changes course selection
  useEffect(() => {
    setStripeIntent(null);
  }, [selectedMainCourseId, selectedSubCourseId, purchaseScope, selectedLessonIds, paymentMethod]);

  // Helper to get parent ID string
  const getParentId = (course: CourseOption): string | null => {
    if (!course.parentCourse) return null;
    if (typeof course.parentCourse === 'string') return course.parentCourse;
    if (typeof course.parentCourse === 'object' && course.parentCourse._id) {
      return course.parentCourse._id;
    }
    return null;
  };

  // Main Courses (Top level: no parent course)
  const mainCourses = useMemo(() => {
    return courses.filter((c) => !getParentId(c));
  }, [courses]);

  // Sub-Courses belonging to selected main course
  const subCourses = useMemo(() => {
    if (!selectedMainCourseId) return [];
    return courses.filter((c) => getParentId(c) === selectedMainCourseId);
  }, [courses, selectedMainCourseId]);

  // Active Target Course ID (sub-course if selected, otherwise main course)
  const activeCourseId = selectedSubCourseId || selectedMainCourseId;

  const activeCourse = useMemo(() => {
    return courses.find((c) => c._id === activeCourseId) || null;
  }, [courses, activeCourseId]);

  // 3. Handle preselected item passed into modal
  useEffect(() => {
    if (!selectedItem || courses.length === 0) return;

    if (selectedItem.type === 'lesson') {
      setPurchaseScope('lessons');
      setSelectedLessonIds([selectedItem.id]);
      if (selectedItem.courseId) {
        const foundCourse = courses.find((c) => c._id === selectedItem.courseId);
        if (foundCourse) {
          const parentId = getParentId(foundCourse);
          if (parentId) {
            setSelectedMainCourseId(parentId);
            setSelectedSubCourseId(foundCourse._id);
          } else {
            setSelectedMainCourseId(foundCourse._id);
            setSelectedSubCourseId('');
          }
        }
      }
    } else {
      const foundCourse = courses.find((c) => c._id === selectedItem.id);
      if (foundCourse) {
        const parentId = getParentId(foundCourse);
        if (parentId) {
          setSelectedMainCourseId(parentId);
          setSelectedSubCourseId(foundCourse._id);
        } else {
          setSelectedMainCourseId(foundCourse._id);
          setSelectedSubCourseId('');
        }
      } else if (mainCourses.length > 0) {
        setSelectedMainCourseId(mainCourses[0]._id);
      }
    }
  }, [selectedItem, courses, mainCourses]);

  // Default selection if nothing selected
  useEffect(() => {
    if (courses.length > 0 && !selectedMainCourseId) {
      setSelectedMainCourseId(mainCourses[0]?._id || courses[0]._id);
    }
  }, [courses, selectedMainCourseId, mainCourses]);

  // Reset sub-course & lessons when main course changes
  const handleMainCourseChange = (mainId: string) => {
    setSelectedMainCourseId(mainId);
    setSelectedSubCourseId('');
    setSelectedLessonIds([]);
  };

  // Reset lessons when sub-course changes
  const handleSubCourseChange = (subId: string) => {
    setSelectedSubCourseId(subId);
    setSelectedLessonIds([]);
  };

  // 4. Fetch lessons for activeCourseId
  useEffect(() => {
    if (!activeCourseId) {
      setAvailableLessons([]);
      setSelectedLessonIds([]);
      return;
    }

    const fetchLessons = async () => {
      setLoadingLessons(true);
      const res = await apiRequest(`/lessons?courseId=${activeCourseId}`);
      if (res.success && Array.isArray(res.lessons)) {
        setAvailableLessons(res.lessons);
      } else {
        setAvailableLessons([]);
      }
      setLoadingLessons(false);
    };

    fetchLessons();
  }, [activeCourseId]);

  // Calculate dynamic total price
  const totalAmount = useMemo(() => {
    if (!activeCourse) return 0;

    if (purchaseScope === 'complete') {
      return activeCourse.offerPrice ?? activeCourse.regularPrice ?? 0;
    } else {
      return selectedLessonIds.reduce((sum, lessonId) => {
        const found = availableLessons.find((l) => l._id === lessonId);
        return sum + (found?.price || 0);
      }, 0);
    }
  }, [activeCourse, purchaseScope, selectedLessonIds, availableLessons]);

  const handleToggleLesson = (lessonId: string) => {
    setSelectedLessonIds((prev) =>
      prev.includes(lessonId)
        ? prev.filter((id) => id !== lessonId)
        : [...prev, lessonId]
    );
  };

  const handleSelectAllLessons = () => {
    if (selectedLessonIds.length === availableLessons.length) {
      setSelectedLessonIds([]);
    } else {
      setSelectedLessonIds(availableLessons.map((l) => l._id));
    }
  };

  if (!isOpen) return null;

  const handlePaymentSuccess = (orderId: string) => {
    toast.success('🎉 Payment successful! Course access has been granted.');
    onClose();
    setTimeout(() => {
      window.location.href = '/student/purchases';
    }, 1200);
  };

  const handlePaymentError = (errorMsg: string) => {
    toast.error(errorMsg || 'Payment failed. Please try again.');
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!name.trim() || !email.trim() || !whatsapp.trim()) {
      toast.error('Please complete all required contact fields.');
      return;
    }

    if (!activeCourseId) {
      toast.error('Please select a course.');
      return;
    }

    if (purchaseScope === 'lessons' && selectedLessonIds.length === 0) {
      toast.error('Please select at least one lesson or choose "Buy Complete Course".');
      return;
    }

    // Official Stripe Hosted Checkout Session Redirect
    if (paymentMethod === 'stripe') {
      setInitializingStripe(true);
      try {
        const res = await apiRequest('/payments/create-checkout-session', {
          method: 'POST',
          body: JSON.stringify({
            studentName: name.trim(),
            email: email.trim(),
            whatsappNumber: whatsapp.trim(),
            country,
            courseId: activeCourseId,
            lessons: purchaseScope === 'complete' ? [] : selectedLessonIds,
            amount: totalAmount,
          }),
        });

        if (res.success && res.url) {
          toast.success('Redirecting to official Stripe Checkout...');
          window.location.href = res.url;
        } else {
          setInitializingStripe(false);
          toast.error(res.error || 'Could not initialize Stripe checkout session.');
        }
      } catch (err: any) {
        setInitializingStripe(false);
        toast.error(err.message || 'Server error initializing Stripe payment');
      }
      return;
    }

    // Bank Transfer Flow
    setSubmitting(true);

    try {
      const payload = {
        studentName: name.trim(),
        email: email.trim(),
        whatsappNumber: whatsapp.trim(),
        country,
        courseId: activeCourseId,
        lessons: purchaseScope === 'complete' ? [] : selectedLessonIds,
        gateway: paymentMethod === 'bank' ? 'bank_transfer' : paymentMethod,
        paymentRequired: true,
        amount: totalAmount,
        bankTransferDetails: paymentMethod === 'bank' ? {
          accountHolder: bankSettings.accountHolder,
          iban: bankSettings.iban,
          bicSwift: bankSettings.bicSwift,
          bankName: bankSettings.bankName,
          reference: activeCourse?.title ? `${activeCourse.title}${activeCourse.level ? ` (${activeCourse.level})` : ''}` : 'Course Payment',
          proofOfPaymentUrl,
          paymentScreenshot: proofOfPaymentUrl,
          paymentScreenShot: proofOfPaymentUrl,
        } : undefined,
      };

      const res = await apiRequest('/orders', {
        method: 'POST',
        body: JSON.stringify(payload),
      });

      setSubmitting(false);

      if (res.success || res.order) {
        toast.success('Order request submitted successfully!');
        onClose();
      } else {
        toast.success(`Thank you ${name}! Your enrollment request for "${activeCourse?.title || 'German Course'}" has been submitted successfully.`);
        onClose();
      }
    } catch (err: any) {
      setSubmitting(false);
      toast.success(`Registration request submitted successfully for ${name}!`);
      onClose();
    }
  };

  const countries = [
    'Pakistan',
    'Germany',
    'Austria',
    'Switzerland',
    'United States',
    'United Kingdom',
    'India',
    'Canada',
    'Australia',
    'Other',
  ];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-xs animate-fadeIn !m-0">
      <div className="relative w-full max-w-3xl bg-white rounded-3xl shadow-2xl border border-gray-100 p-6 sm:p-8 space-y-5 max-h-[92vh] overflow-y-auto">
        {/* Close Modal Button */}
        <button
          type="button"
          onClick={onClose}
          className="absolute top-5 right-5 p-2 rounded-full text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition cursor-pointer z-10"
          aria-label="Close modal"
        >
          <X className="w-5 h-5" />
        </button>

        {/* Header */}
        <div className="text-center pt-1">
          <h2 className="font-courgette text-3xl sm:text-4xl text-black font-normal tracking-tight">
            Registration & Checkout
          </h2>
          {/* <p className="text-xs text-gray-500 font-medium mt-1">
            {stripeIntent ? 'Secure Card Payment with Stripe Elements' : 'Select your course and preferred payment method'}
          </p> */}
        </div>

        {/* If Stripe Payment Intent initialized, show Stripe Elements Form */}
        {stripeIntent ? (
          <div className="space-y-4 animate-fadeIn pt-2">
            <div className="p-4 rounded-2xl bg-amber-50 border border-amber-200 flex items-center justify-between">
              <div>
                <p className="text-xs font-bold text-gray-800">
                  Purchasing: <span className="font-black text-black">{activeCourse?.title || 'German Course'}</span>
                </p>
                <p className="text-[11px] text-gray-600">
                  Student: <span className="font-semibold">{name}</span> ({email})
                </p>
              </div>
              <div className="text-right">
                <span className="text-xs text-gray-500 block uppercase font-bold">Total</span>
                <span className="text-xl font-black text-gray-900">€{stripeIntent.amount.toFixed(2)}</span>
              </div>
            </div>

            <button
              type="button"
              onClick={() => setStripeIntent(null)}
              className="text-xs text-amber-700 hover:text-amber-900 font-bold flex items-center gap-1 cursor-pointer"
            >
              <ArrowLeft className="w-4 h-4" /> Edit Registration Details
            </button>

            {/* PCI-Compliant Stripe Payment Component */}
            <StripePaymentForm
              clientSecret={stripeIntent.clientSecret}
              publishableKey={stripeIntent.publishableKey}
              orderId={stripeIntent.orderId}
              amount={stripeIntent.amount}
              onSuccess={handlePaymentSuccess}
              onError={handlePaymentError}
              onCancel={() => setStripeIntent(null)}
            />
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="space-y-4 text-xs sm:text-sm">
            {/* Name */}
            <div>
              <label className="block font-bold text-gray-800 mb-1.5">
                Name <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                required
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Enter your full name"
                className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 placeholder-gray-400 focus:bg-white focus:border-[#FFC700] focus:ring-2 focus:ring-[#FFC700]/20 outline-none transition font-medium"
              />
            </div>

            {/* Whatsapp Number */}
            <div>
              <label className="block font-bold text-gray-800 mb-1.5">
                Whatsapp Number <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                required
                value={whatsapp}
                onChange={(e) => setWhatsapp(e.target.value)}
                placeholder="Enter WhatsApp number"
                className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 placeholder-gray-400 focus:bg-white focus:border-[#FFC700] focus:ring-2 focus:ring-[#FFC700]/20 outline-none transition font-medium"
              />
            </div>

            {/* E-Mail */}
            <div>
              <label className="block font-bold text-gray-800 mb-1.5">
                E-Mail <span className="text-red-500">*</span>
              </label>
              <input
                type="email"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter email address"
                className="w-full px-4 py-3 rounded-xl bg-blue-50/60 border border-blue-100 text-gray-900 placeholder-gray-400 focus:bg-white focus:border-[#FFC700] focus:ring-2 focus:ring-[#FFC700]/20 outline-none transition font-medium"
              />
            </div>

            {/* Country */}
            <div>
              <label className="block font-bold text-gray-800 mb-1.5">
                Country <span className="text-red-500">*</span>
              </label>
              <select
                value={country}
                onChange={(e) => setCountry(e.target.value)}
                className="w-full px-4 py-3 rounded-xl bg-blue-50/60 border border-blue-100 text-gray-900 focus:bg-white focus:border-[#FFC700] focus:ring-2 focus:ring-[#FFC700]/20 outline-none transition font-medium"
              >
                {countries.map((c) => (
                  <option key={c} value={c}>
                    {c}
                  </option>
                ))}
              </select>
            </div>

            {/* Cascading Course Selection: Main Course & Sub-Course */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-1">
              {/* Main Course Dropdown */}
              <div>
                <label className="block font-bold text-gray-800 mb-1.5 flex items-center gap-1 truncate">
                  <BookOpen className="w-4 h-4 text-amber-600 shrink-0" />
                  <span>Select Main Course <span className="text-red-500">*</span></span>
                </label>
                <select
                  value={selectedMainCourseId}
                  onChange={(e) => handleMainCourseChange(e.target.value)}
                  className="w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-gray-900 focus:bg-white focus:border-[#FFC700] focus:ring-2 focus:ring-[#FFC700]/20 outline-none transition font-bold truncate cursor-pointer"
                  required
                >
                  {mainCourses.map((c) => (
                    <option key={c._id} value={c._id}>
                      {c.title} {c.level ? `(${c.level})` : ''} - €{c.offerPrice ?? c.regularPrice}
                    </option>
                  ))}
                </select>
              </div>

              {/* Sub-Course Dropdown */}
              <div>
                <label className="block font-bold text-gray-800 mb-1.5 flex items-center gap-1 truncate">
                  <Layers className="w-4 h-4 text-amber-600 shrink-0" />
                  <span>Select Sub-Course {subCourses.length > 0 ? '(Optional)' : ''}</span>
                </label>
                {selectedMainCourseId ? (
                  subCourses.length > 0 ? (
                    <select
                      value={selectedSubCourseId}
                      onChange={(e) => handleSubCourseChange(e.target.value)}
                      className="w-full px-4 py-3 rounded-xl bg-amber-50/50 border border-amber-200 text-gray-900 focus:bg-white focus:border-[#FFC700] focus:ring-2 focus:ring-[#FFC700]/20 outline-none transition font-bold truncate cursor-pointer"
                    >
                      <option value="">-- Main Course Default --</option>
                      {subCourses.map((sc) => (
                        <option key={sc._id} value={sc._id}>
                          {sc.title} - €{sc.offerPrice ?? sc.regularPrice}
                        </option>
                      ))}
                    </select>
                  ) : (
                    <div className="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-xs font-semibold text-gray-400 flex items-center h-[46px]">
                      No sub-courses (Main course active)
                    </div>
                  )
                ) : (
                  <div className="px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 text-xs font-semibold text-gray-400 flex items-center h-[46px]">
                    Select main course first
                  </div>
                )}
              </div>
            </div>

            {/* Lessons Selection Scope */}
            {activeCourseId && (
              <div className="space-y-3 p-4 rounded-2xl border border-gray-200 bg-gray-50/70 animate-fadeIn mt-2">
                <label className="block font-extrabold text-gray-900 uppercase tracking-wider text-xs flex items-center gap-1.5">
                  <FileText className="w-4 h-4 text-amber-600" />
                  <span>Purchase Scope & Lessons Selection</span>
                </label>

                {/* Scope Radio Selection */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <label
                    className={`p-3 rounded-xl border cursor-pointer transition flex items-center gap-2.5 ${purchaseScope === 'complete'
                      ? 'bg-amber-100/90 border-amber-500 font-extrabold text-gray-900'
                      : 'bg-white border-gray-200 text-gray-700 hover:border-amber-300'
                      }`}
                  >
                    <input
                      type="radio"
                      name="purchaseScope"
                      value="complete"
                      checked={purchaseScope === 'complete'}
                      onChange={() => {
                        setPurchaseScope('complete');
                        setSelectedLessonIds([]);
                      }}
                      className="w-4 h-4 accent-black cursor-pointer"
                    />
                    <div>
                      <span className="text-xs font-extrabold block">Buy Complete Course</span>
                      <span className="text-[10px] text-gray-500 font-medium">Access full level course content</span>
                    </div>
                  </label>

                  <label
                    className={`p-3 rounded-xl border cursor-pointer transition flex items-center gap-2.5 ${purchaseScope === 'lessons'
                      ? 'bg-amber-100/90 border-amber-500 font-extrabold text-gray-900'
                      : 'bg-white border-gray-200 text-gray-700 hover:border-amber-300'
                      }`}
                  >
                    <input
                      type="radio"
                      name="purchaseScope"
                      value="lessons"
                      checked={purchaseScope === 'lessons'}
                      onChange={() => setPurchaseScope('lessons')}
                      className="w-4 h-4 accent-black cursor-pointer"
                    />
                    <div>
                      <span className="text-xs font-extrabold block">Select Specific Lessons</span>
                      <span className="text-[10px] text-gray-500 font-medium">Choose individual video lessons</span>
                    </div>
                  </label>
                </div>

                {/* Lessons Checkbox List if 'lessons' mode chosen */}
                {purchaseScope === 'lessons' && (
                  <div className="pt-2 space-y-2 animate-fadeIn">
                    <div className="flex items-center justify-between text-xs font-bold text-gray-700">
                      <span>Available Lessons ({availableLessons.length}):</span>
                      {availableLessons.length > 0 && (
                        <button
                          type="button"
                          onClick={handleSelectAllLessons}
                          className="text-[11px] text-amber-700 hover:underline font-extrabold cursor-pointer"
                        >
                          {selectedLessonIds.length === availableLessons.length ? 'Deselect All' : 'Select All'}
                        </button>
                      )}
                    </div>

                    {loadingLessons ? (
                      <div className="py-6 text-center text-xs text-gray-500 font-medium">
                        Loading lessons...
                      </div>
                    ) : availableLessons.length === 0 ? (
                      <div className="p-3 rounded-xl bg-white border border-gray-200 text-xs text-amber-700 italic text-center">
                        No standalone lessons available for this course yet.
                      </div>
                    ) : (
                      <div className="max-h-44 overflow-y-auto space-y-1.5 pr-1">
                        {availableLessons.map((l) => {
                          const isSelected = selectedLessonIds.includes(l._id);
                          return (
                            <div
                              key={l._id}
                              onClick={() => handleToggleLesson(l._id)}
                              className={`p-2.5 rounded-xl border cursor-pointer transition flex items-center justify-between gap-3 text-xs ${isSelected
                                ? 'bg-amber-200/80 border-amber-500 font-extrabold text-gray-900'
                                : 'bg-white border-gray-200 hover:border-amber-300 text-gray-800'
                                }`}
                            >
                              <div className="flex items-center gap-2.5">
                                {isSelected ? (
                                  <CheckSquare className="w-4 h-4 text-amber-900 shrink-0" />
                                ) : (
                                  <Square className="w-4 h-4 text-gray-400 shrink-0" />
                                )}
                                <div>
                                  <span className="font-bold block text-gray-900">{l.title}</span>
                                  <span className="text-[10px] text-gray-500 font-medium">
                                    Chapter {l.chapterNumber} {l.durationMinutes ? `• ${l.durationMinutes} mins` : ''}
                                  </span>
                                </div>
                              </div>
                              <span className="font-black text-amber-900 shrink-0">€{l.price || 0}</span>
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                )}
              </div>
            )}

            {/* Payment Method Radio Selection */}
            <div className="space-y-2 pt-1">
              <label className="block font-bold text-gray-800">
                Payment Method <span className="text-red-500">*</span>
              </label>
              <div className="space-y-2 text-xs font-semibold text-gray-800">
                <label className="flex items-center gap-2.5 cursor-pointer p-2.5 rounded-xl border border-amber-200 bg-amber-50/30 hover:bg-amber-50 transition">
                  <input
                    type="radio"
                    name="paymentMethod"
                    value="stripe"
                    checked={paymentMethod === 'stripe'}
                    onChange={() => setPaymentMethod('stripe')}
                    className="w-4 h-4 text-[#FFC700] focus:ring-[#FFC700]"
                  />
                  <div className="flex items-center justify-between w-full pr-1">
                    <span className="font-extrabold text-gray-900 flex items-center gap-1.5">
                      <CreditCard className="w-4 h-4 text-amber-600" />
                      Pay with Card (Stripe)
                    </span>
                    {/* <span className="text-[10px] bg-amber-200 text-amber-900 font-extrabold px-2 py-0.5 rounded-md uppercase">
                      PCI Compliant
                    </span> */}
                  </div>
                </label>

                <label className="flex items-center gap-2.5 cursor-pointer p-2.5 rounded-xl border border-gray-200 hover:bg-gray-50 transition">
                  <input
                    type="radio"
                    name="paymentMethod"
                    value="paypal"
                    checked={paymentMethod === 'paypal'}
                    onChange={() => setPaymentMethod('paypal')}
                    className="w-4 h-4 text-[#FFC700] focus:ring-[#FFC700]"
                  />
                  <span>Pay with PayPal</span>
                </label>

                <label className="flex items-center gap-2.5 cursor-pointer p-2.5 rounded-xl border border-gray-200 hover:bg-gray-50 transition">
                  <input
                    type="radio"
                    name="paymentMethod"
                    value="bank"
                    checked={paymentMethod === 'bank'}
                    onChange={() => setPaymentMethod('bank')}
                    className="w-4 h-4 text-[#FFC700] focus:ring-[#FFC700]"
                  />
                  <span className="font-extrabold text-gray-900">Bank Transfer</span>
                </label>
              </div>
            </div>

            {/* Bank Account Details display when Bank Transfer selected */}
            {paymentMethod === 'bank' && (
              <div className="p-4 rounded-xl bg-slate-50 border border-slate-200 text-xs text-gray-800 space-y-2.5 animate-fadeIn shadow-xs">
                <h4 className="font-black text-sm text-gray-900 border-b border-gray-200 pb-1.5 tracking-tight">
                  Bank Account Detail
                </h4>
                <div className="space-y-1.5 font-medium text-gray-800">
                  <p className="font-bold text-gray-900 text-xs">Bank Transfer:</p>
                  {bankSettings.accountHolder && (
                    <p>
                      <span className="font-bold text-gray-900">Account Name:</span>{' '}
                      <span className="text-gray-800">{bankSettings.accountHolder}</span>
                    </p>
                  )}
                  {bankSettings.iban && (
                    <div>
                      <span className="font-bold text-gray-900">Account Nr. IBAN:</span>
                      <p className="font-bold text-gray-900 font-mono text-[13px] tracking-wider mt-0.5 select-all">
                        {bankSettings.iban}
                      </p>
                    </div>
                  )}
                  {bankSettings.bicSwift && (
                    <p>
                      <span className="font-bold text-gray-900">BIC:</span>{' '}
                      <span className="font-mono text-gray-800">{bankSettings.bicSwift}</span>
                    </p>
                  )}
                  <p>
                    <span className="font-bold text-gray-900">Reference:</span>{' '}
                    <span className="text-gray-800 font-medium">
                      {activeCourse?.title
                        ? `${activeCourse.title}${activeCourse.level ? ` (${activeCourse.level})` : ''}`
                        : 'Your Course Name (e.g, A1, A2, B2)'}
                    </span>
                  </p>
                  {bankSettings.bankName && (
                    <p>
                      <span className="font-bold text-gray-900">Bank Name:</span>{' '}
                      <span className="text-gray-800">{bankSettings.bankName}</span>
                    </p>
                  )}
                </div>

                {/* Upload Payment Screenshot Input */}
                <div className="pt-3 border-t border-slate-200 space-y-2">
                  <label className="block font-bold text-xs text-gray-900 flex items-center justify-between">
                    <span className="flex items-center gap-1.5">
                      <ImageIcon className="w-4 h-4 text-amber-600" />
                      <span>Upload Payment Receipt / Screenshot</span>
                    </span>
                    {uploadingProof && (
                      <span className="text-amber-600 flex items-center gap-1 text-[11px] font-semibold">
                        <Loader2 className="w-3 h-3 animate-spin" /> Uploading...
                      </span>
                    )}
                  </label>

                  {proofOfPaymentUrl ? (
                    <div className="relative rounded-2xl border-2 border-emerald-400 bg-white p-2.5 flex flex-col items-center justify-center gap-2 group">
                      {proofOfPaymentUrl.endsWith('.pdf') ? (
                        <div className="p-4 text-center space-y-1">
                          <CheckCircle2 className="w-6 h-6 text-emerald-600 mx-auto" />
                          <span className="text-xs font-bold text-gray-800 block">PDF Receipt Uploaded</span>
                          <a
                            href={proofOfPaymentUrl}
                            target="_blank"
                            rel="noreferrer"
                            className="text-xs font-bold text-amber-700 hover:underline inline-block"
                          >
                            Open PDF Document ↗
                          </a>
                        </div>
                      ) : (
                        <div className="relative w-full flex flex-col items-center">
                          <img
                            src={proofOfPaymentUrl}
                            alt="Uploaded Payment Receipt Screenshot"
                            className="max-h-48 w-auto rounded-xl object-contain border border-gray-200 shadow-xs"
                          />
                        </div>
                      )}

                      <button
                        type="button"
                        onClick={() => setProofOfPaymentUrl('')}
                        className="absolute top-3 right-3 p-1.5 rounded-full bg-red-600 hover:bg-red-700 text-white shadow-md transition cursor-pointer"
                        title="Remove Screenshot"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  ) : (
                    <label className="border-2 border-dashed border-slate-300 hover:border-[#FFC700] bg-white rounded-xl p-4 flex flex-col items-center justify-center gap-1.5 cursor-pointer transition text-center group">
                      <input
                        type="file"
                        accept="image/*,.pdf"
                        onChange={handleProofFileUpload}
                        className="hidden"
                        disabled={uploadingProof}
                      />
                      <Upload className="w-5 h-5 text-gray-400 group-hover:text-amber-600 transition" />
                      <span className="text-xs font-bold text-gray-700 group-hover:text-black">
                        Click to upload payment screenshot or receipt
                      </span>
                      <span className="text-[10px] text-gray-400">Supported formats: PNG, JPG, WEBP, PDF</span>
                    </label>
                  )}
                </div>
              </div>
            )}


            {/* Payment Amount Highlight */}
            {/* <div className="p-3.5 rounded-xl bg-amber-50 border border-amber-200 flex items-center justify-between">
              <span className="text-xs font-extrabold text-gray-800 uppercase tracking-wider">Total Payable Amount</span>
              <span className="text-lg font-black text-gray-900">€{totalAmount.toFixed(2)}</span>
            </div> */}

            {/* Submit / PayPal Buttons Container */}
            {paymentMethod === 'paypal' ? (
              <div className="mt-4 pt-1">
                <PayPalPaymentForm
                  clientId={paypalClientId}
                  courseId={activeCourseId}
                  courseTitle={activeCourse?.title || 'German Course'}
                  lessons={purchaseScope === 'complete' ? [] : selectedLessonIds}
                  studentName={name}
                  email={email}
                  whatsappNumber={whatsapp}
                  amount={totalAmount}
                  onSuccess={handlePaymentSuccess}
                  onError={handlePaymentError}
                />
              </div>
            ) : (
              <button
                type="submit"
                disabled={submitting || initializingStripe}
                className="w-full py-3.5 px-4 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] font-extrabold text-sm uppercase tracking-wider shadow-md hover:shadow-lg transition-all active:scale-95 group disabled:opacity-50 mt-4 flex items-center justify-center gap-2 cursor-pointer"
              >
                {initializingStripe ? (
                  <>
                    <Loader2 className="w-5 h-5 animate-spin" />
                    <span>REDIRECTING TO STRIPE...</span>
                  </>
                ) : submitting ? (
                  'SUBMITTING ORDER...'
                ) : paymentMethod === 'stripe' ? (
                  `PROCEED TO STRIPE CHECKOUT (€${totalAmount.toFixed(2)})`
                ) : (
                  `PAY NOW (€${totalAmount.toFixed(2)})`
                )}
              </button>
            )}
          </form>
        )}
      </div>
    </div>
  );
}