'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Loader2, CheckCircle, ArrowRight, ArrowLeft, Users, Building, Target, Settings } from 'lucide-react';
import toast from 'react-hot-toast';

interface CustomPlanModalProps {
  isOpen: boolean;
  onClose: () => void;
}

const industries = [
  'E-commerce & Retail',
  'SaaS & Software',
  'Marketing & Advertising Agency',
  'Healthcare & Medical',
  'Finance & Banking',
  'Insurance',
  'Education & E-learning',
  'Real Estate',
  'Travel & Tourism',
  'Technology & IT Services',
  'Manufacturing',
  'Construction & Engineering',
  'Legal Services',
  'Consulting & Business Services',
  'Non-profit & Organizations',
  'Other'
];

const companySizes = [
  '1-10 employees',
  '11-50 employees', 
  '51-200 employees',
  '201-500 employees',
  '500+ employees'
];

const monthlyBudgets = [
  '$1,000 - $5,000',
  '$5,000 - $10,000',
  '$10,000 - $20,000',
  '$20,000+',
  'Custom'
];

const daRanges = [
  'DA 30-50',
  'DA 50-70',
  'DA 70-90',
  'DA 90+',
  'Any'
];

const timelines = [
  'ASAP',
  'Within 2 weeks',
  '1 month',
  '2-3 months',
  'Flexible'
];

const additionalServices = [
  'Content Creation Only',
  'Complete Link Building Strategy',
  'Competitor Analysis',
  'Monthly Performance Reporting',
  'White-label Services',
  'Dedicated Account Manager',
  'Custom Reporting Dashboard'
];

export default function CustomPlanModal({ isOpen, onClose }: CustomPlanModalProps) {
  const [currentStep, setCurrentStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  
  const [formData, setFormData] = useState({
    // Step 1: Contact Information
    fullName: '',
    email: '',
    company: '',
    phone: '',
    website: '',
    
    // Step 2: Business Details
    companySize: '',
    industry: '',
    monthlyBudget: '',
    
    // Step 3: Project Requirements
    postCount: '',
    daRange: [] as string[],
    timeline: '',
    topics: '',
    
    // Step 4: Additional Services
    additionalServices: [] as string[],
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  const steps = [
    { number: 1, title: 'Contact Info', icon: Users },
    { number: 2, title: 'Business Details', icon: Building },
    { number: 3, title: 'Project Needs', icon: Target },
    { number: 4, title: 'Services', icon: Settings }
  ];

  const validateStep = (step: number) => {
    const newErrors: Record<string, string> = {};

    if (step === 1) {
      if (!formData.fullName.trim()) newErrors.fullName = 'Full name is required';
      if (!formData.email.trim()) newErrors.email = 'Email is required';
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) newErrors.email = 'Valid email required';
      if (!formData.company.trim()) newErrors.company = 'Company name is required';
      if (!formData.website.trim()) newErrors.website = 'Website is required';
      else if (!/^https?:\/\/.+\..+/.test(formData.website)) newErrors.website = 'Valid website URL required';
    }

    if (step === 2) {
      if (!formData.companySize) newErrors.companySize = 'Company size is required';
      if (!formData.industry) newErrors.industry = 'Industry is required';
      if (!formData.monthlyBudget) newErrors.monthlyBudget = 'Budget range is required';
    }

    if (step === 3) {
      if (!formData.postCount) newErrors.postCount = 'Post count is required';
      if (formData.daRange.length === 0) newErrors.daRange = 'Select at least one DA range';
      if (!formData.timeline) newErrors.timeline = 'Timeline is required';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const nextStep = () => {
    if (validateStep(currentStep)) {
      setCurrentStep(prev => Math.min(prev + 1, 4));
    } else {
      toast.error('Please fill in all required fields');
    }
  };

  const prevStep = () => {
    setCurrentStep(prev => Math.max(prev - 1, 1));
  };

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleCheckboxChange = (field: 'daRange' | 'additionalServices', value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: prev[field].includes(value)
        ? prev[field].filter(item => item !== value)
        : [...prev[field], value]
    }));
    
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleSubmit = async () => {
    if (!validateStep(4)) {
      toast.error('Please complete all required fields');
      return;
    }

    setIsSubmitting(true);

    try {
      const response = await fetch('/api/frontend/custom-plans', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      const result = await response.json();

      if (response.ok) {
        toast.success('Custom plan request submitted! We\'ll contact you within 24 hours.');
        setIsSuccess(true);
        setTimeout(() => {
          onClose();
          setIsSuccess(false);
          setCurrentStep(1);
          setFormData({
            fullName: '',
            email: '',
            company: '',
            phone: '',
            website: '',
            companySize: '',
            industry: '',
            monthlyBudget: '',
            postCount: '',
            daRange: [],
            timeline: '',
            topics: '',
            additionalServices: [],
          });
          setErrors({});
        }, 3000);
      } else {
        toast.error(result.error || 'Something went wrong! Please try again.');
      }
    } catch (error) {
      console.error('Error submitting form:', error);
      toast.error('Failed to submit. Please check your connection and try again.');
    } finally {
      setIsSubmitting(false);
    }
  };

  if (!isOpen) return null;

  return (
    <AnimatePresence>
      <div className="fixed inset-0 z-100 flex items-center justify-center">
        {/* Backdrop */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="absolute inset-0 bg-black/60 backdrop-blur-sm"
          onClick={onClose}
        />
        
        {/* Modal */}
        <motion.div
          initial={{ opacity: 0, scale: 0.9, y: 20 }}
          animate={{ opacity: 1, scale: 1, y: 0 }}
          exit={{ opacity: 0, scale: 0.9, y: 20 }}
          className="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-2xl w-full max-w-4xl mx-4 max-h-[90vh] overflow-y-auto"
        >
          {isSuccess ? (
            <div className="p-8 text-center bg-white dark:bg-gray-900">
              <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
              <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                Thank You!
              </h3>
              <p className="text-gray-600 dark:text-gray-400 mb-6">
                Your custom plan request has been received. Our team will contact you within 24 hours to discuss your requirements.
              </p>
            </div>
          ) : (
            <>
              {/* Header */}
              <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                    Custom Plan Request
                  </h2>
                  <p className="text-gray-600 dark:text-gray-400 mt-1">
                    Tell us about your requirements and we`ll create a tailored solution
                  </p>
                </div>
                <button
                  onClick={onClose}
                  className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors duration-200"
                >
                  <X className="h-5 w-5 text-gray-600 dark:text-gray-400" />
                </button>
              </div>

              {/* Progress Steps */}
              <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
                <div className="flex justify-between items-center">
                  {steps.map((step, index) => (
                    <div key={step.number} className="flex items-center">
                      <div className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all duration-300 ${
                        currentStep >= step.number
                          ? 'bg-blue-500 border-blue-500 text-white'
                          : 'border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400'
                      }`}>
                        <step.icon className="h-5 w-5" />
                      </div>
                      <span className={`ml-2 text-sm font-medium hidden sm:block ${
                        currentStep >= step.number
                          ? 'text-blue-500 dark:text-blue-400'
                          : 'text-gray-500 dark:text-gray-400'
                      }`}>
                        {step.title}
                      </span>
                      {index < steps.length - 1 && (
                        <div className={`w-12 h-0.5 mx-4 transition-all duration-300 ${
                          currentStep > step.number
                            ? 'bg-blue-500'
                            : 'bg-gray-300 dark:bg-gray-600'
                        }`} />
                      )}
                    </div>
                  ))}
                </div>
              </div>

              {/* Form Content */}
              <div className="p-6 bg-white dark:bg-gray-900">
                <AnimatePresence mode="wait">
                  {/* Step 1: Contact Information */}
                  {currentStep === 1 && (
                    <motion.div
                      key="step1"
                      initial={{ opacity: 0, x: 50 }}
                      animate={{ opacity: 1, x: 0 }}
                      exit={{ opacity: 0, x: -50 }}
                      className="space-y-6"
                    >
                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                        Contact Information
                      </h3>
                      
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Full Name *
                          </label>
                          <input
                            type="text"
                            value={formData.fullName}
                            onChange={(e) => handleInputChange('fullName', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 ${
                              errors.fullName 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                            placeholder="Enter your full name"
                          />
                          {errors.fullName && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.fullName}</p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Work Email *
                          </label>
                          <input
                            type="email"
                            value={formData.email}
                            onChange={(e) => handleInputChange('email', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 ${
                              errors.email 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                            placeholder="your@company.com"
                          />
                          {errors.email && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.email}</p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Company Name *
                          </label>
                          <input
                            type="text"
                            value={formData.company}
                            onChange={(e) => handleInputChange('company', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 ${
                              errors.company 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                            placeholder="Your company name"
                          />
                          {errors.company && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.company}</p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Phone Number
                          </label>
                          <input
                            type="tel"
                            value={formData.phone}
                            onChange={(e) => handleInputChange('phone', e.target.value)}
                            className="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                            placeholder="+1 (555) 123-4567"
                          />
                        </div>

                        <div className="md:col-span-2">
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Website URL *
                          </label>
                          <input
                            type="url"
                            value={formData.website}
                            onChange={(e) => handleInputChange('website', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 ${
                              errors.website 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                            placeholder="https://example.com"
                          />
                          {errors.website && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.website}</p>
                          )}
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* Step 2: Business Details */}
                  {currentStep === 2 && (
                    <motion.div
                      key="step2"
                      initial={{ opacity: 0, x: 50 }}
                      animate={{ opacity: 1, x: 0 }}
                      exit={{ opacity: 0, x: -50 }}
                      className="space-y-6"
                    >
                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                        Business Details
                      </h3>
                      
                      <div className="grid grid-cols-1 gap-6">
                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Company Size *
                          </label>
                          <select
                            value={formData.companySize}
                            onChange={(e) => handleInputChange('companySize', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white ${
                              errors.companySize 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                          >
                            <option value="" className="text-gray-500 dark:text-gray-400">Select Company Size</option>
                            {companySizes.map(size => (
                              <option key={size} value={size} className="text-gray-900 dark:text-white">{size}</option>
                            ))}
                          </select>
                          {errors.companySize && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.companySize}</p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Industry *
                          </label>
                          <select
                            value={formData.industry}
                            onChange={(e) => handleInputChange('industry', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white ${
                              errors.industry 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                          >
                            <option value="" className="text-gray-500 dark:text-gray-400">Select Industry</option>
                            {industries.map(industry => (
                              <option key={industry} value={industry} className="text-gray-900 dark:text-white">{industry}</option>
                            ))}
                          </select>
                          {errors.industry && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.industry}</p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Monthly Marketing Budget *
                          </label>
                          <select
                            value={formData.monthlyBudget}
                            onChange={(e) => handleInputChange('monthlyBudget', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white ${
                              errors.monthlyBudget 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                          >
                            <option value="" className="text-gray-500 dark:text-gray-400">Select Budget Range</option>
                            {monthlyBudgets.map(budget => (
                              <option key={budget} value={budget} className="text-gray-900 dark:text-white">{budget}</option>
                            ))}
                          </select>
                          {errors.monthlyBudget && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.monthlyBudget}</p>
                          )}
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* Step 3: Project Requirements */}
                  {currentStep === 3 && (
                    <motion.div
                      key="step3"
                      initial={{ opacity: 0, x: 50 }}
                      animate={{ opacity: 1, x: 0 }}
                      exit={{ opacity: 0, x: -50 }}
                      className="space-y-6"
                    >
                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                        Project Requirements
                      </h3>
                      
                      <div className="grid grid-cols-1 gap-6">
                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Desired Number of Guest Posts *
                          </label>
                          <input
                            type="number"
                            value={formData.postCount}
                            onChange={(e) => handleInputChange('postCount', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 ${
                              errors.postCount 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                            placeholder="e.g., 50"
                            min="1"
                          />
                          {errors.postCount && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.postCount}</p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-3">
                            Preferred Domain Authority Range *
                          </label>
                          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            {daRanges.map(da => (
                              <label 
                                key={da} 
                                className="flex items-center space-x-3 p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-colors duration-200 cursor-pointer"
                              >
                                <input
                                  type="checkbox"
                                  checked={formData.daRange.includes(da)}
                                  onChange={() => handleCheckboxChange('daRange', da)}
                                  className="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 dark:border-gray-500 rounded"
                                />
                                <span className="text-gray-900 dark:text-gray-100 text-sm">{da}</span>
                              </label>
                            ))}
                          </div>
                          {errors.daRange && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.daRange}</p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Project Timeline *
                          </label>
                          <select
                            value={formData.timeline}
                            onChange={(e) => handleInputChange('timeline', e.target.value)}
                            className={`w-full px-4 py-3 bg-white dark:bg-gray-800 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white ${
                              errors.timeline 
                                ? 'border-red-500 dark:border-red-400' 
                                : 'border-gray-300 dark:border-gray-600'
                            }`}
                          >
                            <option value="" className="text-gray-500 dark:text-gray-400">Select Timeline</option>
                            {timelines.map(timeline => (
                              <option key={timeline} value={timeline} className="text-gray-900 dark:text-white">{timeline}</option>
                            ))}
                          </select>
                          {errors.timeline && (
                            <p className="mt-1 text-sm text-red-500 dark:text-red-400">{errors.timeline}</p>
                          )}
                        </div>

                        <div>
                          <label className="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                            Content Topics/Niche
                          </label>
                          <textarea
                            value={formData.topics}
                            onChange={(e) => handleInputChange('topics', e.target.value)}
                            rows={4}
                            className="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                            placeholder="Describe your industry, target topics, or specific content requirements..."
                          />
                        </div>
                      </div>
                    </motion.div>
                  )}

                  {/* Step 4: Additional Services */}
                  {currentStep === 4 && (
                    <motion.div
                      key="step4"
                      initial={{ opacity: 0, x: 50 }}
                      animate={{ opacity: 1, x: 0 }}
                      exit={{ opacity: 0, x: -50 }}
                      className="space-y-6"
                    >
                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
                        Additional Services
                      </h3>
                      
                      <div>
                        <label className="block text-sm font-medium text-gray-900 dark:text-white mb-3">
                          Select additional services you need:
                        </label>
                        <div className="grid grid-cols-1 gap-3">
                          {additionalServices.map(service => (
                            <label 
                              key={service} 
                              className="flex items-center space-x-3 p-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-colors duration-200 cursor-pointer"
                            >
                              <input
                                type="checkbox"
                                checked={formData.additionalServices.includes(service)}
                                onChange={() => handleCheckboxChange('additionalServices', service)}
                                className="h-4 w-4 text-blue-500 focus:ring-blue-500 border-gray-300 dark:border-gray-500 rounded"
                              />
                              <span className="text-gray-900 dark:text-gray-100 text-sm">{service}</span>
                            </label>
                          ))}
                        </div>
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>

                {/* Navigation Buttons */}
                <div className="flex justify-between items-center mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                  <button
                    onClick={prevStep}
                    disabled={currentStep === 1}
                    className="flex items-center gap-2 px-6 py-3 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed font-medium"
                  >
                    <ArrowLeft className="h-4 w-4" />
                    Previous
                  </button>

                  {currentStep < 4 ? (
                    <button
                      onClick={nextStep}
                      className="flex items-center gap-2 px-8 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 hover:scale-105 transition-all duration-300 font-semibold shadow-lg"
                    >
                      Next Step
                      <ArrowRight className="h-4 w-4" />
                    </button>
                  ) : (
                    <button
                      onClick={handleSubmit}
                      disabled={isSubmitting}
                      className="flex items-center gap-2 px-8 py-3 bg-orange-500 text-white rounded-lg hover:bg-orange-600 hover:scale-105 transition-all duration-300 font-semibold shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      {isSubmitting ? (
                        <>
                          <Loader2 className="h-4 w-4 animate-spin" />
                          Submitting...
                        </>
                      ) : (
                        <>
                          Submit Request
                          <ArrowRight className="h-4 w-4" />
                        </>
                      )}
                    </button>
                  )}
                </div>
              </div>
            </>
          )}
        </motion.div>
      </div>
    </AnimatePresence>
  );
}