import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Textarea } from './ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Badge } from './ui/badge';
import { Avatar, AvatarFallback } from './ui/avatar';
import { Progress } from './ui/progress';
import { Switch } from './ui/switch';
import { Calendar } from './ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
import { Separator } from './ui/separator';
import { RadioGroup, RadioGroupItem } from './ui/radio-group';
import { Checkbox } from './ui/checkbox';
import { motion, AnimatePresence } from 'motion/react';
import { TemplateSelectionModal } from './modals/TemplateSelectionModal';
import { 
  ArrowLeft, 
  ArrowRight, 
  Calendar as CalendarIcon, 
  Upload, 
  X, 
  User, 
  Clock, 
  FileText,
  Check,
  Users,
  Star,
  Zap,
  Shield,
  Target,
  Flame,
  TrendingUp,
  Building,
  DollarSign,
  AlertCircle,
  CheckCircle,
  Info,
  Sparkles,
  Rocket,
  Plus,
  Minus,
  Eye,
  EyeOff,
  Search,
  Filter,
  Download,
  Globe,
  Lock,
  Lightbulb,
  PieChart,
  BarChart3,
  Activity,
  Settings
} from 'lucide-react';
import { format } from 'date-fns';

interface NewRequestWizardProps {
  onBack?: () => void;
  onSubmit?: (requestData: any) => void;
}

interface RequestTemplate {
  id: string;
  name: string;
  description: string;
  category: string;
  icon: React.ComponentType<any>;
  estimatedTime: string;
  commonApprovers: string[];
  suggestedSLA: number;
  priority: 'high' | 'medium' | 'low';
  fields: {
    amount?: boolean;
    vendor?: boolean;
    timeline?: boolean;
    impact?: boolean;
  };
}

const REQUEST_TEMPLATES: RequestTemplate[] = [
  {
    id: 'custom',
    name: 'Custom Request',
    description: 'Create a custom request for unique business needs with full flexibility to define your own workflow and requirements',
    category: 'General',
    icon: Lightbulb,
    estimatedTime: 'Variable',
    commonApprovers: [],
    suggestedSLA: 3,
    priority: 'medium',
    fields: {}
  },
  {
    id: 'existing-template',
    name: 'Existing Template',
    description: 'Use a pre-configured template with predefined approval workflows, timelines, and requirements for faster processing',
    category: 'Templates',
    icon: FileText,
    estimatedTime: '1-2 days',
    commonApprovers: ['Department Head', 'Manager'],
    suggestedSLA: 2,
    priority: 'medium',
    fields: { timeline: true }
  }
];

const MOCK_USERS = [
  { id: '1', name: 'Mike Johnson', role: 'Team Lead', avatar: 'MJ', department: 'Operations', email: 'mike.johnson@royalenfield.com', level: 2, canClose: false },
  { id: '2', name: 'Lisa Wong', role: 'Finance Manager', avatar: 'LW', department: 'Finance', email: 'lisa.wong@royalenfield.com', level: 3, canClose: false },
  { id: '3', name: 'David Kumar', role: 'Department Head', avatar: 'DK', department: 'IT', email: 'david.kumar@royalenfield.com', level: 4, canClose: true },
  { id: '4', name: 'Anna Smith', role: 'Marketing Coordinator', avatar: 'AS', department: 'Marketing', email: 'anna.smith@royalenfield.com', level: 1, canClose: false },
  { id: '5', name: 'John Doe', role: 'Budget Analyst', avatar: 'JD', department: 'Finance', email: 'john.doe@royalenfield.com', level: 2, canClose: false },
  { id: '6', name: 'Sarah Chen', role: 'Marketing Manager', avatar: 'SC', department: 'Marketing', email: 'sarah.chen@royalenfield.com', level: 3, canClose: false },
  { id: '7', name: 'Emily Davis', role: 'Creative Director', avatar: 'ED', department: 'Marketing', email: 'emily.davis@royalenfield.com', level: 3, canClose: false },
  { id: '8', name: 'Robert Kim', role: 'Legal Counsel', avatar: 'RK', department: 'Legal', email: 'robert.kim@royalenfield.com', level: 4, canClose: true },
  { id: '9', name: 'Jennifer Lee', role: 'CEO', avatar: 'JL', department: 'Executive', email: 'jennifer.lee@royalenfield.com', level: 5, canClose: true },
  { id: '10', name: 'Michael Brown', role: 'CFO', avatar: 'MB', department: 'Finance', email: 'michael.brown@royalenfield.com', level: 5, canClose: true }
];

const USER_LEVELS = [
  { level: 1, name: 'Junior Level', description: 'Junior staff and coordinators', color: 'bg-gray-100 text-gray-800' },
  { level: 2, name: 'Mid Level', description: 'Team leads and supervisors', color: 'bg-blue-100 text-blue-800' },
  { level: 3, name: 'Senior Level', description: 'Managers and senior staff', color: 'bg-green-100 text-green-800' },
  { level: 4, name: 'Executive Level', description: 'Department heads and directors', color: 'bg-orange-100 text-orange-800' },
  { level: 5, name: 'C-Suite Level', description: 'Executive leadership', color: 'bg-purple-100 text-purple-800' }
];

const SLA_TEMPLATES = [
  { id: 'urgent', name: 'Urgent', hours: 4, description: 'Critical business impact', color: 'bg-red-100 text-red-800' },
  { id: 'high', name: 'High Priority', hours: 24, description: 'High business impact', color: 'bg-orange-100 text-orange-800' },
  { id: 'medium', name: 'Medium Priority', hours: 72, description: 'Moderate business impact', color: 'bg-yellow-100 text-yellow-800' },
  { id: 'low', name: 'Low Priority', hours: 120, description: 'Low business impact', color: 'bg-green-100 text-green-800' },
  { id: 'custom', name: 'Custom SLA', hours: 0, description: 'Define your own timeline', color: 'bg-blue-100 text-blue-800' }
];

const STEP_NAMES = [
  'Template Selection',
  'Basic Information',
  'Approval Workflow',
  'Participants & Access',
  'Documents & Attachments',
  'Review & Submit'
];

export function NewRequestWizard({ onBack, onSubmit }: NewRequestWizardProps) {
  const [currentStep, setCurrentStep] = useState(1);
  const [selectedTemplate, setSelectedTemplate] = useState<RequestTemplate | null>(null);
  const [userSearch, setUserSearch] = useState('');
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [emailInput, setEmailInput] = useState('');
  const [showTemplateModal, setShowTemplateModal] = useState(false);
  const [newUserData, setNewUserData] = useState({
    name: '',
    email: '',
    role: '',
    department: '',
    level: 1
  });
  const [showUserInvite, setShowUserInvite] = useState(false);
  
  const [formData, setFormData] = useState({
    // Template and basic info
    template: '',
    title: '',
    description: '',
    category: '',
    
    // Details
    priority: '',
    urgency: '',
    businessImpact: '',
    amount: '',
    currency: 'USD',
    vendor: '',
    timeline: '',
    
    // SLA and dates
    slaTemplate: '',
    slaHours: 0,
    customSlaHours: 0,
    slaEndDate: undefined as Date | undefined,
    expectedCompletionDate: undefined as Date | undefined,
    breachEscalation: true,
    reminderSchedule: '50' as '25' | '50' | '75',
    
    // Workflow
    workflowType: 'sequential' as 'sequential' | 'parallel',
    requiresAllApprovals: true,
    escalationEnabled: true,
    reminderEnabled: true,
    minimumLevel: 1,
    maxLevel: 1,
    
    // Participants
    approvers: [] as any[],
    approverCount: 1,
    spectators: [] as any[],
    ccList: [] as any[],
    invitedUsers: [] as any[],
    
    // Access settings
    allowComments: true,
    allowDocumentUpload: true,
    
    // Documents
    documents: [] as File[],
    
    // Additional metadata
    tags: [] as string[],
    relatedRequests: [] as string[],
    costCenter: '',
    project: ''
  });

  const totalSteps = STEP_NAMES.length;

  const updateFormData = (field: string, value: any) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const filteredUsers = MOCK_USERS.filter(user =>
    user.name.toLowerCase().includes(userSearch.toLowerCase()) ||
    user.role.toLowerCase().includes(userSearch.toLowerCase()) ||
    user.department.toLowerCase().includes(userSearch.toLowerCase()) ||
    user.email.toLowerCase().includes(userSearch.toLowerCase())
  );

  const validateEmail = (email: string) => {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  };

  const getLevelInfo = (level: number) => {
    return USER_LEVELS.find(l => l.level === level) || USER_LEVELS[0];
  };

  const createUserFromEmail = (email: string, name: string = '', role: string = '', department: string = '', level: number = 1) => {
    const avatar = name ? name.split(' ').map(n => n[0]).join('').toUpperCase() : email.split('@')[0].substring(0, 2).toUpperCase();
    return {
      id: `temp-${Date.now()}-${Math.random()}`,
      name: name || email.split('@')[0],
      email,
      role: role || 'External User',
      department: department || 'External',
      avatar,
      level,
      canClose: level >= 4,
      isInvited: true
    };
  };

  const calculateSLAEndDate = (hours: number) => {
    const now = new Date();
    const endDate = new Date(now.getTime() + (hours * 60 * 60 * 1000));
    return endDate;
  };

  const updateMaxLevel = () => {
    const maxApproverLevel = Math.max(...formData.approvers.map(a => a.level), 0);
    updateFormData('maxLevel', maxApproverLevel);
  };

  const getPriorityIcon = (priority: string) => {
    switch (priority) {
      case 'high': return <Flame className="w-4 h-4 text-red-600" />;
      case 'medium': return <Target className="w-4 h-4 text-orange-600" />;
      case 'low': return <TrendingUp className="w-4 h-4 text-green-600" />;
      default: return <Target className="w-4 h-4 text-gray-600" />;
    }
  };

  const isStepValid = () => {
    switch (currentStep) {
      case 1: return selectedTemplate !== null;
      case 2: return formData.title.trim() !== '' && formData.description.trim() !== '' && formData.priority !== '';
      case 3: return (formData.approverCount || 1) > 0 && 
                     formData.approvers.length === (formData.approverCount || 1) && 
                     formData.approvers.every(approver => {
                       if (!approver || !approver.email) return false;
                       
                       // Check TAT validation based on type
                       const tatType = approver.tatType || 'hours';
                       if (tatType === 'hours') {
                         return approver.tat && approver.tat > 0 && approver.tat <= 720;
                       } else if (tatType === 'days') {
                         return approver.tat && approver.tat > 0 && approver.tat <= 30;
                       }
                       return false;
                     });
      case 4: return true; // Participants are optional except approvers
      case 5: return true; // Documents are optional
      case 6: return true; // Review & Submit
      default: return false;
    }
  };

  const nextStep = () => {
    if (currentStep < totalSteps && isStepValid()) {
      setCurrentStep(currentStep + 1);
    }
  };

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

  const selectTemplate = (template: RequestTemplate) => {
    setSelectedTemplate(template);
    updateFormData('template', template.id);
    updateFormData('category', template.category);
    updateFormData('priority', template.priority);
    
    // Auto-suggest SLA
    const suggestedDate = new Date();
    suggestedDate.setDate(suggestedDate.getDate() + template.suggestedSLA);
    updateFormData('slaEndDate', suggestedDate);
    
    // If user selected "Existing Template", show the template selection modal
    if (template.id === 'existing-template') {
      setShowTemplateModal(true);
    }
  };

  const handleTemplateSelection = (templateId: string) => {
    // This will be handled by routing to the specific template wizard in App.tsx
    if (onSubmit) {
      onSubmit({ templateType: templateId });
    }
  };

  const addUser = (user: any, type: 'approvers' | 'spectators' | 'ccList' | 'invitedUsers') => {
    const currentList = formData[type];
    if (!currentList.find((u: any) => u.id === user.id)) {
      const updatedList = [...currentList, user];
      updateFormData(type, updatedList);
      
      // Update max level if adding approver
      if (type === 'approvers') {
        setTimeout(updateMaxLevel, 0);
      }
    }
  };

  const removeUser = (userId: string, type: 'approvers' | 'spectators' | 'ccList' | 'invitedUsers') => {
    const currentList = formData[type];
    updateFormData(type, currentList.filter((u: any) => u.id !== userId));
    
    // Update max level if removing approver
    if (type === 'approvers') {
      setTimeout(updateMaxLevel, 0);
    }
  };

  const addUserByEmail = () => {
    if (!validateEmail(emailInput)) return;
    
    // Check if user already exists
    const existingUser = [...MOCK_USERS, ...formData.invitedUsers].find(u => u.email === emailInput);
    if (existingUser) {
      setEmailInput('');
      return existingUser;
    }
    
    // Create new user
    const newUser = createUserFromEmail(
      emailInput,
      newUserData.name,
      newUserData.role,
      newUserData.department,
      newUserData.level
    );
    
    addUser(newUser, 'invitedUsers');
    setEmailInput('');
    setNewUserData({ name: '', email: '', role: '', department: '', level: 1 });
    setShowUserInvite(false);
    
    return newUser;
  };

  const inviteAndAddUser = (type: 'approvers' | 'spectators' | 'ccList') => {
    const user = addUserByEmail();
    if (user && type !== 'invitedUsers') {
      addUser(user, type);
    }
  };

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || []);
    updateFormData('documents', [...formData.documents, ...files]);
  };

  const handleSubmit = () => {
    if (isStepValid()) {
      const requestData = {
        ...formData,
        template: selectedTemplate,
        id: `RE-REQ-${Date.now()}`,
        createdAt: new Date().toISOString(),
        status: 'pending'
      };
      onSubmit?.(requestData);
    }
  };

  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="min-h-full flex flex-col items-center justify-center py-8"
          >
            {/* Header Section */}
            <div className="text-center mb-12 max-w-3xl">
              <h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
                Choose Your Request Type
              </h1>
              <p className="text-lg text-gray-600">
                Start with a pre-built template for faster approvals, or create a custom request tailored to your needs.
              </p>
            </div>

            {/* Template Cards Grid */}
            <div className="w-full max-w-6xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
              {REQUEST_TEMPLATES.map((template) => (
                <motion.div
                  key={template.id}
                  whileHover={{ scale: 1.03 }}
                  whileTap={{ scale: 0.98 }}
                  transition={{ type: "spring", stiffness: 300, damping: 20 }}
                >
                  <Card
                    className={`cursor-pointer h-full transition-all duration-300 border-2 ${
                      selectedTemplate?.id === template.id
                        ? 'border-blue-500 shadow-xl bg-blue-50/50 ring-2 ring-blue-200'
                        : 'border-gray-200 hover:border-blue-300 hover:shadow-lg'
                    }`}
                    onClick={() => selectTemplate(template)}
                  >
                    <CardHeader className="space-y-4 pb-4">
                      <div className="flex items-start justify-between">
                        <div className={`w-14 h-14 rounded-xl flex items-center justify-center ${
                          selectedTemplate?.id === template.id
                            ? 'bg-blue-100'
                            : 'bg-gray-100'
                        }`}>
                          <template.icon className={`w-7 h-7 ${
                            selectedTemplate?.id === template.id
                              ? 'text-blue-600'
                              : 'text-gray-600'
                          }`} />
                        </div>
                        {selectedTemplate?.id === template.id && (
                          <motion.div
                            initial={{ scale: 0 }}
                            animate={{ scale: 1 }}
                            transition={{ type: "spring", stiffness: 500, damping: 15 }}
                          >
                            <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center">
                              <Check className="w-5 h-5 text-white" />
                            </div>
                          </motion.div>
                        )}
                      </div>
                      <div className="text-left">
                        <CardTitle className="text-xl mb-2">{template.name}</CardTitle>
                        <div className="flex items-center gap-2">
                          <Badge variant="secondary" className="text-xs">
                            {template.category}
                          </Badge>
                          {getPriorityIcon(template.priority)}
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent className="pt-0 space-y-4">
                      <p className="text-sm text-gray-600 leading-relaxed line-clamp-2">
                        {template.description}
                      </p>
                      <Separator />
                      <div className="grid grid-cols-2 gap-3 text-xs text-gray-500">
                        <div className="flex items-center gap-1.5">
                          <Clock className="w-3.5 h-3.5" />
                          <span>{template.estimatedTime}</span>
                        </div>
                        <div className="flex items-center gap-1.5">
                          <Users className="w-3.5 h-3.5" />
                          <span>{template.commonApprovers.length} approvers</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>

            {/* Template Details Card - Only show when template is selected */}
            <AnimatePresence>
              {selectedTemplate && (
                <motion.div
                  initial={{ opacity: 0, y: 20, height: 0 }}
                  animate={{ opacity: 1, y: 0, height: 'auto' }}
                  exit={{ opacity: 0, y: -20, height: 0 }}
                  transition={{ duration: 0.3 }}
                  className="w-full max-w-6xl"
                >
                  <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200">
                    <CardHeader>
                      <CardTitle className="flex items-center gap-2 text-blue-900">
                        <Info className="w-5 h-5" />
                        {selectedTemplate.name} - Template Details
                      </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className="bg-white/60 p-3 rounded-lg">
                          <Label className="text-blue-900 font-semibold">Suggested SLA</Label>
                          <p className="text-blue-700 mt-1">{selectedTemplate.suggestedSLA} days</p>
                        </div>
                        <div className="bg-white/60 p-3 rounded-lg">
                          <Label className="text-blue-900 font-semibold">Priority Level</Label>
                          <div className="flex items-center gap-1 mt-1">
                            {getPriorityIcon(selectedTemplate.priority)}
                            <span className="text-blue-700 capitalize">{selectedTemplate.priority}</span>
                          </div>
                        </div>
                        <div className="bg-white/60 p-3 rounded-lg">
                          <Label className="text-blue-900 font-semibold">Estimated Duration</Label>
                          <p className="text-blue-700 mt-1">{selectedTemplate.estimatedTime}</p>
                        </div>
                      </div>
                      <div className="bg-white/60 p-3 rounded-lg">
                        <Label className="text-blue-900 font-semibold">Common Approvers</Label>
                        <div className="flex flex-wrap gap-2 mt-2">
                          {selectedTemplate.commonApprovers.map((approver, index) => (
                            <Badge key={`${selectedTemplate.id}-approver-${index}-${approver}`} variant="outline" className="border-blue-300 text-blue-700 bg-white">
                              {approver}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        );

      case 2:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="space-y-6"
          >
            <div className="text-center mb-8">
              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-blue-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <FileText className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">Basic Information</h2>
              <p className="text-gray-600">
                Provide the essential details for your {selectedTemplate?.name || 'request'}.
              </p>
            </div>

            <div className="max-w-2xl mx-auto space-y-6">
              <div>
                <Label htmlFor="title" className="text-base font-semibold">Request Title *</Label>
                <p className="text-sm text-gray-600 mb-3">
                  Be specific and descriptive. This will be visible to all participants.
                </p>
                <Input
                  id="title"
                  placeholder="e.g., Approval on new office location"
                  value={formData.title}
                  onChange={(e) => updateFormData('title', e.target.value)}
                  className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
                />
              </div>
              
              <div>
                <Label htmlFor="description" className="text-base font-semibold">Detailed Description *</Label>
                <p className="text-sm text-gray-600 mb-3">
                  Explain what you need approval for, why it's needed, and any relevant background information.
                </p>
                <Textarea
                  id="description"
                  placeholder="Provide comprehensive details about your request including scope, objectives, expected outcomes, and any supporting context that will help approvers make an informed decision."
                  className="min-h-[120px] text-base border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm resize-none"
                  value={formData.description}
                  onChange={(e) => updateFormData('description', e.target.value)}
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label className="text-base font-semibold">Priority Level *</Label>
                  <p className="text-sm text-gray-600 mb-2">
                    select priority for your request
                  </p>
                  <RadioGroup
                    value={formData.priority || ''}
                    onValueChange={(value) => {
                      console.log('Priority changed to:', value);
                      updateFormData('priority', value);
                    }}
                  >
                    <div 
                      className={`flex items-center space-x-3 p-3 rounded-lg border-2 cursor-pointer transition-all ${
                        formData.priority === 'express' 
                          ? 'border-red-500 bg-red-100' 
                          : 'border-red-200 bg-red-50 hover:bg-red-100'
                      }`}
                      onClick={() => updateFormData('priority', 'express')}
                    >
                      <RadioGroupItem value="express" id="express" />
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <Zap className="w-4 h-4 text-red-600" />
                          <Label htmlFor="express" className="font-medium text-red-900 cursor-pointer">Express</Label>
                          <Badge variant="destructive" className="text-xs">URGENT</Badge>
                        </div>
                        <p className="text-xs text-red-700">
                          Includes calendar days in TAT - faster processing timeline
                        </p>
                      </div>
                    </div>
                    <div 
                      className={`flex items-center space-x-3 p-3 rounded-lg border cursor-pointer transition-all ${
                        formData.priority === 'standard' 
                          ? 'border-blue-500 bg-blue-50' 
                          : 'border-gray-200 hover:bg-gray-50'
                      }`}
                      onClick={() => updateFormData('priority', 'standard')}
                    >
                      <RadioGroupItem value="standard" id="standard" />
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <Clock className="w-4 h-4 text-blue-600" />
                          <Label htmlFor="standard" className="font-medium text-blue-900 cursor-pointer">Standard</Label>
                          <Badge variant="secondary" className="text-xs">DEFAULT</Badge>
                        </div>
                        <p className="text-xs text-gray-600">
                          Includes working days in TAT - regular processing timeline
                        </p>
                      </div>
                    </div>
                  </RadioGroup>
                </div>


              </div>

              {/* SLA Configuration */}
              <div className="space-y-4">



              </div>

              {/* Template-specific fields */}
              {(selectedTemplate?.fields.amount || selectedTemplate?.fields.vendor || selectedTemplate?.fields.timeline || selectedTemplate?.fields.impact) && (
                <div className="border-t pt-6">
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">Additional Details</h3>
                  <div className="space-y-6">
                    {selectedTemplate?.fields.amount && (
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className="md:col-span-2">
                          <Label htmlFor="amount" className="text-base font-semibold">Budget Amount</Label>
                          <Input
                            id="amount"
                            placeholder="Enter amount"
                            value={formData.amount}
                            onChange={(e) => updateFormData('amount', e.target.value)}
                            className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
                          />
                        </div>
                        <div>
                          <Label className="text-base font-semibold">Currency</Label>
                          <Select value={formData.currency} onValueChange={(value) => updateFormData('currency', value)}>
                            <SelectTrigger className="h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="USD">USD ($)</SelectItem>
                              <SelectItem value="EUR">EUR (€)</SelectItem>
                              <SelectItem value="GBP">GBP (£)</SelectItem>
                              <SelectItem value="INR">INR (₹)</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    )}

                    {selectedTemplate?.fields.vendor && (
                      <div>
                        <Label htmlFor="vendor" className="text-base font-semibold">Vendor/Supplier</Label>
                        <Input
                          id="vendor"
                          placeholder="Enter vendor or supplier name"
                          value={formData.vendor}
                          onChange={(e) => updateFormData('vendor', e.target.value)}
                          className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
                        />
                      </div>
                    )}

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <Label htmlFor="costCenter" className="text-base font-semibold">Cost Center</Label>
                        <Input
                          id="costCenter"
                          placeholder="e.g., Marketing, IT, Operations"
                          value={formData.costCenter}
                          onChange={(e) => updateFormData('costCenter', e.target.value)}
                          className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
                        />
                      </div>
                      <div>
                        <Label htmlFor="project" className="text-base font-semibold">Related Project</Label>
                        <Input
                          id="project"
                          placeholder="Associated project name or code"
                          value={formData.project}
                          onChange={(e) => updateFormData('project', e.target.value)}
                          className="text-base h-12 border-2 border-gray-300 focus:border-blue-500 bg-white shadow-sm"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </motion.div>
        );

      case 3:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="space-y-6"
          >
            <div className="text-center mb-8">
              <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <Users className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">Approval Workflow</h2>
              <p className="text-gray-600">
                Define the approval hierarchy and assign approvers by email ID.
              </p>
            </div>

            <div className="max-w-4xl mx-auto space-y-8">
              {/* Number of Approvers */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Settings className="w-5 h-5" />
                    Approval Configuration
                  </CardTitle>
                  <CardDescription>
                    Configure how many approvers you need and define the approval sequence.
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div>
                    <Label className="text-base font-semibold mb-4 block">Number of Approvers *</Label>
                    <div className="flex items-center gap-4">
                      <Button 
                        type="button"
                        variant="outline" 
                        size="sm"
                        onClick={() => {
                          const currentCount = formData.approverCount || 1;
                          const newCount = Math.max(1, currentCount - 1);
                          updateFormData('approverCount', newCount);
                          // Trim approvers array if reducing count
                          if (formData.approvers.length > newCount) {
                            updateFormData('approvers', formData.approvers.slice(0, newCount));
                          }
                        }}
                        disabled={(formData.approverCount || 1) <= 1}
                      >
                        <Minus className="w-4 h-4" />
                      </Button>
                      <span className="text-2xl font-semibold w-12 text-center">{formData.approverCount || 1}</span>
                      <Button 
                        type="button"
                        variant="outline" 
                        size="sm"
                        onClick={() => {
                          const currentCount = formData.approverCount || 1;
                          const newCount = Math.min(10, currentCount + 1);
                          updateFormData('approverCount', newCount);
                        }}
                        disabled={(formData.approverCount || 1) >= 10}
                      >
                        <Plus className="w-4 h-4" />
                      </Button>
                    </div>
                    <p className="text-sm text-gray-600 mt-2">
                      Maximum 10 approvers allowed. Each approver will review sequentially.
                    </p>
                  </div>
                </CardContent>
              </Card>

              {/* Approval Hierarchy */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Shield className="w-5 h-5" />
                    Approval Hierarchy *
                  </CardTitle>
                  <CardDescription>
                    Define the approval sequence. Each approver will review the request in order from Level 1 to Level {formData.approverCount || 1}.
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  {/* Initiator Card */}
                  <div className="p-4 rounded-lg border-2 border-blue-200 bg-blue-50">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center">
                        <User className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <span className="font-semibold text-blue-900">Request Initiator</span>
                          <Badge variant="secondary" className="text-xs">YOU</Badge>
                        </div>
                        <p className="text-sm text-blue-700">Creates and submits the request</p>
                      </div>
                    </div>
                  </div>

                  {/* Dynamic Approver Cards */}
                  {Array.from({ length: formData.approverCount || 1 }, (_, index) => {
                    const level = index + 1;
                    const isLast = level === (formData.approverCount || 1);
                    
                    // Ensure approvers array has enough items
                    if (!formData.approvers[index]) {
                      const newApprovers = [...formData.approvers];
                      newApprovers[index] = { email: '', name: '', level: level, tat: '' };
                      updateFormData('approvers', newApprovers);
                    }

                    return (
                      <div key={level} className="space-y-3">
                        {/* Connection Line */}
                        <div className="flex justify-center">
                          <div className="w-px h-6 bg-gray-300"></div>
                        </div>
                        
                        {/* Approver Card */}
                        <div className={`p-4 rounded-lg border-2 transition-all ${
                          formData.approvers[index]?.email 
                            ? 'border-green-200 bg-green-50' 
                            : 'border-gray-200 bg-gray-50'
                        }`}>
                          <div className="flex items-center gap-3">
                            <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
                              formData.approvers[index]?.email 
                                ? 'bg-green-600' 
                                : 'bg-gray-400'
                            }`}>
                              <span className="text-white font-semibold">{level}</span>
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-3">
                                <span className="font-semibold text-gray-900">
                                  Approver Level {level}
                                </span>
                                {isLast && (
                                  <Badge variant="destructive" className="text-xs">FINAL APPROVER</Badge>
                                )}
                              </div>
                              <div className="space-y-4">
                                <div>
                                  <Label htmlFor={`approver-${level}`} className="text-sm font-medium">
                                    Email Address *
                                  </Label>
                                  <Input
                                    id={`approver-${level}`}
                                    type="email"
                                    placeholder="approver@royalenfield.com"
                                    value={formData.approvers[index]?.email || ''}
                                    onChange={(e) => {
                                      const newApprovers = [...formData.approvers];
                                      newApprovers[index] = {
                                        ...newApprovers[index],
                                        email: e.target.value,
                                        level: level
                                      };
                                      updateFormData('approvers', newApprovers);
                                    }}
                                    className="h-10 border-2 border-gray-300 focus:border-blue-500 mt-1"
                                  />
                                  <p className="text-xs text-gray-500 mt-1 flex items-center gap-1">
                                    <span className="font-medium">@</span>
                                    Use @ sign to tag a user
                                  </p>
                                </div>

                                {/* Peer Approver Section */}
                                <div className="border-t border-gray-200 pt-3">


                                  {(formData.approvers[index]?.showPeerInput || formData.approvers[index]?.peerEmail) && (
                                    <div className="space-y-2">
                                      <Input
                                        type="email"
                                        placeholder="peer.approver@royalenfield.com"
                                        value={formData.approvers[index]?.peerEmail || ''}
                                        onChange={(e) => {
                                          const newApprovers = [...formData.approvers];
                                          newApprovers[index] = {
                                            ...newApprovers[index],
                                            peerEmail: e.target.value,
                                            level: level
                                          };
                                          updateFormData('approvers', newApprovers);
                                        }}
                                        className="h-9 border-2 border-gray-300 focus:border-blue-500 text-sm"
                                      />
                                      <p className="text-xs text-gray-500">
                                        This user can approve the request if the main approver is unavailable.
                                      </p>
                                    </div>
                                  )}

                                  {formData.approvers[index]?.peerEmail && (
                                    <div className="mt-2 p-2 bg-blue-50 rounded-lg border border-blue-200">
                                      <div className="flex items-center gap-2">
                                        <div className="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center">
                                          <Users className="w-3 h-3 text-white" />
                                        </div>
                                        <div className="flex-1">
                                          <p className="text-sm font-medium text-blue-900">
                                            {formData.approvers[index]?.peerEmail}
                                          </p>
                                          <p className="text-xs text-blue-700">Peer Approver</p>
                                        </div>
                                      </div>
                                    </div>
                                  )}
                                </div>
                                
                                <div>
                                  <Label htmlFor={`tat-${level}`} className="text-sm font-medium">
                                    TAT (Turn Around Time) *
                                  </Label>
                                  <div className="flex items-center gap-2 mt-1">
                                    <Input
                                      id={`tat-${level}`}
                                      type="number"
                                      placeholder={formData.approvers[index]?.tatType === 'days' ? '7' : '24'}
                                      min="1"
                                      max={formData.approvers[index]?.tatType === 'days' ? '30' : '720'}
                                      value={formData.approvers[index]?.tat || ''}
                                      onChange={(e) => {
                                        const newApprovers = [...formData.approvers];
                                        newApprovers[index] = {
                                          ...newApprovers[index],
                                          tat: parseInt(e.target.value) || '',
                                          level: level,
                                          tatType: formData.approvers[index]?.tatType || 'hours'
                                        };
                                        updateFormData('approvers', newApprovers);
                                      }}
                                      className="h-10 border-2 border-gray-300 focus:border-blue-500 flex-1"
                                    />
                                    
                                    <Select
                                      value={formData.approvers[index]?.tatType || 'hours'}
                                      onValueChange={(value) => {
                                        const newApprovers = [...formData.approvers];
                                        newApprovers[index] = {
                                          ...newApprovers[index],
                                          tatType: value as 'hours' | 'days',
                                          level: level,
                                          // Clear the value when switching to set appropriate defaults
                                          tat: ''
                                        };
                                        updateFormData('approvers', newApprovers);
                                      }}
                                    >
                                      <SelectTrigger className="w-20 h-10 border-2 border-gray-300">
                                        <SelectValue />
                                      </SelectTrigger>
                                      <SelectContent>
                                        <SelectItem value="hours">Hours</SelectItem>
                                        <SelectItem value="days">Days</SelectItem>
                                      </SelectContent>
                                    </Select>
                                  </div>
                                  <p className="text-xs text-gray-600 mt-1">
                                    {formData.approvers[index]?.tatType === 'days' 
                                      ? 'Maximum days for this approver to review and respond (1-30 days)'
                                      : 'Maximum time for this approver to review and respond (1-720 hours)'
                                    }
                                  </p>
                                </div>
                                
                                <p className="text-xs text-gray-600">
                                  {isLast 
                                    ? 'This approver can close the request upon approval' 
                                    : 'Request will proceed to next level upon approval'
                                  }
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    );
                  })}

                  {/* Enhanced Summary with TAT */}
                  <div className="mt-6 space-y-4">
                    {/* Approval Flow Summary */}
                    <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
                      <div className="flex items-start gap-3">
                        <Info className="w-5 h-5 text-blue-600 mt-0.5" />
                        <div>
                          <h4 className="font-semibold text-blue-900 mb-1">Approval Flow Summary</h4>
                          <p className="text-sm text-blue-700">
                            Your request will follow this sequence: <strong>You (Initiator)</strong> → 
                            {Array.from({ length: formData.approverCount || 1 }, (_, i) => 
                              ` Level ${i + 1} Approver`
                            ).join(' → ')}. 
                            The final approver can close the request.
                          </p>
                        </div>
                      </div>
                    </div>

                    {/* TAT Summary */}
                    {(() => {
                      // Calculate total TAT
                      let totalHours = 0;
                      let tatBreakdown = [];
                      let hasIncompleteData = false;

                      for (let i = 0; i < (formData.approverCount || 1); i++) {
                        const approver = formData.approvers[i];
                        if (approver?.tat && approver?.tatType) {
                          const tatValue = parseInt(approver.tat);
                          const hours = approver.tatType === 'days' ? tatValue * 24 : tatValue;
                          totalHours += hours;
                          tatBreakdown.push({
                            level: i + 1,
                            tat: approver.tat,
                            tatType: approver.tatType,
                            hours: hours
                          });
                        } else {
                          hasIncompleteData = true;
                        }
                      }

                      const totalDays = Math.ceil(totalHours / 24);
                      const workingDays = Math.ceil(totalHours / 8); // Assuming 8-hour working days

                      return (
                        <div className="p-4 bg-gradient-to-r from-emerald-50 to-teal-50 rounded-lg border border-emerald-200">
                          <div className="flex items-start gap-3">
                            <Clock className="w-5 h-5 text-emerald-600 mt-0.5" />
                            <div className="flex-1">
                              <div className="flex items-center justify-between mb-2">
                                <h4 className="font-semibold text-emerald-900">TAT Summary</h4>
                                {!hasIncompleteData && (
                                  <div className="text-right">
                                    <div className="text-lg font-bold text-emerald-800">{totalDays} {totalDays === 1 ? 'Day' : 'Days'}</div>
                                    <div className="text-xs text-emerald-600">Total Duration</div>
                                  </div>
                                )}
                              </div>
                              
                              {hasIncompleteData ? (
                                <p className="text-sm text-amber-700 bg-amber-50 p-2 rounded border border-amber-200">
                                  <AlertCircle className="w-4 h-4 inline mr-1" />
                                  Complete all approver TAT information to see total duration summary
                                </p>
                              ) : (
                                <div className="space-y-3">
                                  {/* TAT Breakdown */}
                                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    {tatBreakdown.map((item, index) => (
                                      <div key={index} className="bg-white/60 p-2 rounded border border-emerald-100">
                                        <div className="flex items-center justify-between">
                                          <span className="text-sm font-medium text-emerald-900">Level {item.level}</span>
                                          <span className="text-sm text-emerald-700">{item.tat} {item.tatType}</span>
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                  
                                  {/* Total Summary */}
                                  <div className="bg-white/80 p-3 rounded border border-emerald-200">
                                    <div className="grid grid-cols-2 gap-4 text-center">
                                      <div>
                                        <div className="text-lg font-bold text-emerald-800">{totalHours}h</div>
                                        <div className="text-xs text-emerald-600">Total Hours</div>
                                      </div>
                                      <div>
                                        <div className="text-lg font-bold text-emerald-800">{workingDays}</div>
                                        <div className="text-xs text-emerald-600">Working Days*</div>
                                      </div>
                                    </div>
                                    <p className="text-xs text-emerald-600 mt-2 text-center">
                                      *Based on 8-hour working days
                                    </p>
                                  </div>
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      );
                    })()}
                  </div>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        );

      case 4:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="space-y-6"
          >
            <div className="text-center mb-8">
              <div className="w-16 h-16 bg-gradient-to-br from-teal-500 to-green-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <Eye className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">Participants & Access</h2>
              <p className="text-gray-600">
                Configure additional participants and visibility settings for your request.
              </p>
            </div>

            <div className="max-w-3xl mx-auto space-y-8">


              {/* Additional Participants */}
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* Spectators */}
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center justify-between text-base">
                      <div className="flex items-center gap-2">
                        <Eye className="w-4 h-4" />
                        Spectators
                      </div>
                      <Badge variant="outline" className="text-xs">
                        {formData.spectators.length}
                      </Badge>
                    </CardTitle>
                    <CardDescription>
                      Users who can view and comment but cannot approve
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">

                      
                      <div className="flex items-center gap-2">
                        <Input
                          placeholder="Use @ sign to add a user"
                          value={emailInput}
                          onChange={(e) => setEmailInput(e.target.value)}
                          onKeyPress={(e) => {
                            if (e.key === 'Enter' && validateEmail(emailInput)) {
                              inviteAndAddUser('spectators');
                            }
                          }}
                          className="text-sm"
                        />
                        <Button
                          size="sm"
                          onClick={() => inviteAndAddUser('spectators')}
                          disabled={!validateEmail(emailInput)}
                        >
                          Add
                        </Button>
                      </div>
                    </div>

                    <div className="space-y-2 max-h-40 overflow-y-auto">
                      {formData.spectators.map((spectator) => (
                        <div key={spectator.id} className="flex items-center justify-between p-2 bg-teal-50 rounded-lg">
                          <div className="flex items-center gap-2">
                            <Avatar className="h-6 w-6">
                              <AvatarFallback className="bg-teal-600 text-white text-xs">
                                {spectator.avatar}
                              </AvatarFallback>
                            </Avatar>
                            <span className="text-sm font-medium">{spectator.name}</span>
                          </div>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => removeUser(spectator.id, 'spectators')}
                          >
                            <X className="h-3 w-3" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

                {/* CC List */}

              </div>
            </div>
          </motion.div>
        );

      case 5:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="space-y-6"
          >
            <div className="text-center mb-8">
              <div className="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <Upload className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">Documents & Attachments</h2>
              <p className="text-gray-600">
                Upload supporting documents, files, and any additional materials for your request.
              </p>
            </div>

            <div className="max-w-2xl mx-auto space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="w-5 h-5" />
                    File Upload
                  </CardTitle>
                  <CardDescription>
                    Attach supporting documents (PDF, Word, Excel, Images). Max 10MB per file.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
                    <Upload className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Upload Files</h3>
                    <p className="text-gray-600 mb-4">
                      Drag and drop files here, or click to browse
                    </p>
                    <input
                      type="file"
                      multiple
                      accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.ppt,.pptx"
                      onChange={handleFileUpload}
                      className="hidden"
                      id="file-upload"
                    />
                    <Label htmlFor="file-upload" className="cursor-pointer">
                      <Button variant="outline" size="lg" type="button">
                        <Plus className="w-4 h-4 mr-2" />
                        Browse Files
                      </Button>
                    </Label>
                    <p className="text-xs text-gray-500 mt-2">
                      Supported formats: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG, PPT, PPTX
                    </p>
                  </div>
                </CardContent>
              </Card>

              {formData.documents.length > 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center justify-between">
                      <span>Uploaded Files</span>
                      <Badge variant="secondary">
                        {formData.documents.length} file{formData.documents.length !== 1 ? 's' : ''}
                      </Badge>
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {formData.documents.map((file, index) => (
                        <div key={index} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg border">
                          <div className="flex items-center gap-3">
                            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                              <FileText className="h-5 w-5 text-blue-600" />
                            </div>
                            <div>
                              <p className="font-medium text-gray-900">{file.name}</p>
                              <div className="flex items-center gap-3 text-sm text-gray-600">
                                <span>{(file.size / (1024 * 1024)).toFixed(2)} MB</span>
                                <span>•</span>
                                <span>{file.type || 'Unknown type'}</span>
                              </div>
                            </div>
                          </div>
                          <div className="flex items-center gap-2">
                            <Button variant="ghost" size="sm">
                              <Eye className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => {
                                const newDocs = formData.documents.filter((_, i) => i !== index);
                                updateFormData('documents', newDocs);
                              }}
                            >
                              <X className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              )}
            </div>
          </motion.div>
        );

      case 6:
        return (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="space-y-6"
          >
            <div className="text-center mb-8">
              <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-teal-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <CheckCircle className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">Review & Submit</h2>
              <p className="text-gray-600">
                Please review all details before submitting your request for approval.
              </p>
            </div>

            <div className="max-w-5xl mx-auto space-y-8">
              {/* Request Overview */}
              <Card className="border-2 border-green-200 bg-green-50/50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-green-900">
                    <Rocket className="w-5 h-5" />
                    Request Overview
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div>
                      <Label className="text-green-900 font-semibold">Request Type</Label>
                      <p className="text-green-800 mt-1">{selectedTemplate?.name}</p>
                      <Badge variant="outline" className="mt-2 text-xs border-green-300 text-green-700">
                        {selectedTemplate?.category}
                      </Badge>
                    </div>
                    <div>
                      <Label className="text-green-900 font-semibold">Priority</Label>
                      <div className="flex items-center gap-2 mt-1">
                        {getPriorityIcon(formData.priority)}
                        <span className="text-green-800 capitalize">{formData.priority}</span>
                      </div>
                    </div>
                    <div>
                      <Label className="text-green-900 font-semibold">Workflow Type</Label>
                      <p className="text-green-800 mt-1 capitalize">{formData.workflowType}</p>
                      <p className="text-sm text-green-700">{formData.approverCount || 1} Level{(formData.approverCount || 1) > 1 ? 's' : ''}</p>
                    </div>

                  </div>
                  
                  <div>
                    <Label className="text-green-900 font-semibold">Request Title</Label>
                    <p className="text-green-800 font-medium mt-1 text-lg">{formData.title}</p>
                  </div>
                </CardContent>
              </Card>

              {/* Basic Information */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="w-5 h-5" />
                    Basic Information
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <Label className="font-semibold">Description</Label>
                    <p className="text-sm text-gray-700 mt-1 p-3 bg-gray-50 rounded-lg border">
                      {formData.description}
                    </p>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <Label className="font-semibold">Priority Level</Label>
                      <div className="flex items-center gap-2 mt-1">
                        {getPriorityIcon(formData.priority)}
                        <span className="capitalize font-medium">{formData.priority}</span>
                      </div>
                    </div>
                    {formData.urgency && (
                      <div>
                        <Label className="font-semibold">Urgency</Label>
                        <p className="text-sm text-gray-700 mt-1 capitalize">{formData.urgency}</p>
                      </div>
                    )}
                  </div>

                  {formData.businessImpact && (
                    <div>
                      <Label className="font-semibold">Business Impact</Label>
                      <p className="text-sm text-gray-700 mt-1 p-3 bg-gray-50 rounded-lg border">
                        {formData.businessImpact}
                      </p>
                    </div>
                  )}
                    
                  {/* Financial Information */}
                  {formData.amount && (
                    <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
                      <div className="flex items-center gap-2 mb-3">
                        <DollarSign className="w-4 h-4 text-blue-600" />
                        <Label className="font-semibold text-blue-900">Financial Details</Label>
                      </div>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <span className="text-sm text-blue-700">Amount</span>
                          <p className="font-semibold text-blue-900">{formData.amount} {formData.currency}</p>
                        </div>
                        {formData.costCenter && (
                          <div>
                            <span className="text-sm text-blue-700">Cost Center</span>
                            <p className="font-medium text-blue-900">{formData.costCenter}</p>
                          </div>
                        )}
                      </div>
                    </div>
                  )}

                  {/* Additional Fields */}
                  {(formData.vendor || formData.timeline || formData.project) && (
                    <div className="space-y-3">
                      <Label className="font-semibold">Additional Information</Label>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {formData.vendor && (
                          <div>
                            <span className="text-sm text-gray-600">Vendor</span>
                            <p className="text-sm font-medium">{formData.vendor}</p>
                          </div>
                        )}
                        {formData.timeline && (
                          <div>
                            <span className="text-sm text-gray-600">Timeline</span>
                            <p className="text-sm font-medium">{formData.timeline}</p>
                          </div>
                        )}
                        {formData.project && (
                          <div>
                            <span className="text-sm text-gray-600">Related Project</span>
                            <p className="text-sm font-medium">{formData.project}</p>
                          </div>
                        )}
                        {formData.expectedCompletionDate && (
                          <div>
                            <span className="text-sm text-gray-600">Expected Completion</span>
                            <p className="text-sm font-medium">{format(formData.expectedCompletionDate, 'PPP')}</p>
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* Approval Workflow */}
              <Card className="border-2 border-orange-200 bg-orange-50/50">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2 text-orange-900">
                    <Users className="w-5 h-5" />
                    Approval Workflow
                  </CardTitle>
                  <CardDescription className="text-orange-700">
                    Sequential approval hierarchy with TAT (Turn Around Time) for each level
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-3 bg-orange-100 rounded-lg">
                    <div>
                      <Label className="text-orange-900 font-semibold">Workflow Type</Label>
                      <p className="text-orange-800 mt-1 capitalize">{formData.workflowType}</p>
                    </div>
                    <div>
                      <Label className="text-orange-900 font-semibold">Approval Levels</Label>
                      <p className="text-orange-800 mt-1">{formData.approverCount || 1} Level{(formData.approverCount || 1) > 1 ? 's' : ''}</p>
                    </div>
                    <div>
                      <Label className="text-orange-900 font-semibold">Escalation</Label>
                      <p className="text-orange-800 mt-1">{formData.escalationEnabled ? 'Enabled' : 'Disabled'}</p>
                    </div>
                  </div>

                  {/* Approver Details */}
                  <div className="space-y-4">
                    {Array.from({ length: formData.approverCount || 1 }, (_, index) => {
                      const level = index + 1;
                      const isLast = level === (formData.approverCount || 1);
                      const approver = formData.approvers[index];
                      
                      return (
                        <div key={level} className="p-4 bg-white rounded-lg border border-orange-200">
                          <div className="flex items-center gap-4">
                            <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
                              approver?.email ? 'bg-green-600' : 'bg-gray-400'
                            }`}>
                              <span className="text-white font-semibold">{level}</span>
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-2">
                                <span className="font-semibold text-gray-900">
                                  Approver Level {level}
                                </span>
                                {isLast && (
                                  <Badge variant="destructive" className="text-xs">FINAL APPROVER</Badge>
                                )}
                              </div>
                              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                  <span className="text-sm text-gray-600">Email Address</span>
                                  <p className="text-sm font-medium text-gray-900">
                                    {approver?.email || 'Not assigned'}
                                  </p>
                                </div>
                                <div>
                                  <span className="text-sm text-gray-600">TAT (Turn Around Time)</span>
                                  <p className="text-sm font-medium text-gray-900">
                                    {approver?.tat ? 
                                      `${approver.tat} ${approver.tatType === 'days' ? 'day' : 'hour'}${approver.tat !== 1 ? 's' : ''}` 
                                      : 'Not set'
                                    }
                                  </p>
                                </div>
                              </div>
                            </div>
                            <div className="flex flex-col items-end gap-1">
                              {approver?.email && (
                                <Badge variant="outline" className="text-xs border-green-300 text-green-700">
                                  ✓ Assigned
                                </Badge>
                              )}
                              {isLast && (
                                <Badge className="text-xs bg-red-100 text-red-800 border border-red-200">
                                  Can Close
                                </Badge>
                              )}
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </CardContent>
              </Card>

              {/* Participants & Access */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Eye className="w-5 h-5" />
                    Participants & Access Control
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-3 bg-gray-50 rounded-lg">

                    <div>
                      <Label className="font-semibold">Comments</Label>
                      <p className="text-sm text-gray-700 mt-1">{formData.allowComments ? 'Allowed' : 'Disabled'}</p>
                    </div>
                    <div>
                      <Label className="font-semibold">Document Upload</Label>
                      <p className="text-sm text-gray-700 mt-1">{formData.allowDocumentUpload ? 'Allowed' : 'Disabled'}</p>
                    </div>
                  </div>

                  {/* Spectators */}
                  {formData.spectators.length > 0 && (
                    <div>
                      <Label className="font-semibold text-sm">Spectators ({formData.spectators.length})</Label>
                      <div className="flex flex-wrap gap-2 mt-2">
                        {formData.spectators.map((spectator) => (
                          <Badge key={spectator.id} variant="outline" className="text-xs">
                            {spectator.name} ({spectator.email})
                          </Badge>
                        ))}
                      </div>
                      <p className="text-xs text-gray-600 mt-2">View-only access with commenting privileges</p>
                    </div>
                  )}

                  {/* CC List */}
                  {formData.ccList.length > 0 && (
                    <div>
                      <Label className="font-semibold text-sm">CC List ({formData.ccList.length})</Label>
                      <div className="flex flex-wrap gap-2 mt-2">
                        {formData.ccList.map((cc) => (
                          <Badge key={cc.id} variant="secondary" className="text-xs">
                            {cc.name} ({cc.email})
                          </Badge>
                        ))}
                      </div>
                      <p className="text-xs text-gray-600 mt-2">Will receive email notifications about request updates</p>
                    </div>
                  )}
                </CardContent>
              </Card>

              {/* Documents & Attachments */}
              {formData.documents.length > 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Upload className="w-5 h-5" />
                      Documents & Attachments
                    </CardTitle>
                    <CardDescription>
                      {formData.documents.length} document{formData.documents.length !== 1 ? 's' : ''} attached to this request
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-3">
                      {formData.documents.map((doc, index) => (
                        <div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg border">
                          <FileText className="w-5 h-5 text-gray-500 flex-shrink-0" />
                          <div className="flex-1 min-w-0">
                            <p className="font-medium text-sm truncate">{doc.name}</p>
                            <div className="flex items-center gap-3 text-xs text-gray-500 mt-1">
                              <span>{(doc.size / (1024 * 1024)).toFixed(2)} MB</span>
                              <span>•</span>
                              <span>{doc.type || 'Unknown type'}</span>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              )}



              {/* Final Confirmation */}
              <Card className="border-2 border-blue-200 bg-blue-50/50">
                <CardContent className="pt-6">
                  <div className="flex items-start gap-4">
                    <CheckCircle className="w-6 h-6 text-blue-600 mt-1 flex-shrink-0" />
                    <div className="flex-1">
                      <h3 className="font-semibold text-blue-900 mb-2">Ready to Submit Request</h3>
                      <p className="text-sm text-blue-700 mb-4">
                        Once submitted, your request will enter the approval workflow and notifications will be sent to all relevant participants.
                      </p>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                        <div>
                          <span className="text-blue-700">Request Type:</span>
                          <p className="font-medium text-blue-900">{selectedTemplate?.name}</p>
                        </div>
                        <div>
                          <span className="text-blue-700">Approval Levels:</span>
                          <p className="font-medium text-blue-900">{formData.approverCount || 1}</p>
                        </div>
                        <div>
                          <span className="text-blue-700">Documents:</span>
                          <p className="font-medium text-blue-900">{formData.documents.length} attached</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </motion.div>
        );

      default:
        return null;
    }
  };



  return (
    <div className="h-full flex flex-col bg-gradient-to-br from-gray-50 to-white">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 px-6 py-4 flex-shrink-0">
        <div className="flex items-center justify-between max-w-6xl mx-auto">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" onClick={onBack} className="shrink-0">
              <ArrowLeft className="h-5 w-5" />
            </Button>
            <div>
              <h1 className="text-2xl font-bold text-gray-900">Create New Request</h1>
              <p className="text-gray-600">
                Step {currentStep} of {totalSteps}: {STEP_NAMES[currentStep - 1]}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <div className="text-right">
              <p className="text-sm font-medium text-gray-900">{Math.round((currentStep / totalSteps) * 100)}% Complete</p>
              <p className="text-xs text-gray-600">{totalSteps - currentStep} steps remaining</p>
            </div>
          </div>
        </div>
      </div>

      {/* Progress Bar */}
      <div className="bg-white border-b border-gray-200 px-6 py-3 flex-shrink-0">
        <div className="max-w-6xl mx-auto">
          <div className="flex items-center justify-between mb-2">
            {STEP_NAMES.map((stepName, index) => (
              <div key={index} className="flex items-center">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ${
                  index + 1 < currentStep 
                    ? 'bg-green-600 text-white' 
                    : index + 1 === currentStep 
                    ? 'bg-blue-600 text-white' 
                    : 'bg-gray-200 text-gray-600'
                }`}>
                  {index + 1 < currentStep ? (
                    <Check className="w-4 h-4" />
                  ) : (
                    index + 1
                  )}
                </div>
                {index < STEP_NAMES.length - 1 && (
                  <div className={`w-12 lg:w-16 h-1 mx-2 ${
                    index + 1 < currentStep ? 'bg-green-600' : 'bg-gray-200'
                  }`} />
                )}
              </div>
            ))}
          </div>
          <div className="hidden lg:flex justify-between text-xs text-gray-600 mt-2">
            {STEP_NAMES.map((stepName, index) => (
              <span key={index} className={`${
                index + 1 === currentStep ? 'font-semibold text-blue-600' : ''
              }`}>
                {stepName}
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto">
        <div className="max-w-6xl mx-auto p-6">
          <AnimatePresence mode="wait">
            {renderStepContent()}
          </AnimatePresence>
        </div>
      </div>

      {/* Footer */}
      <div className="bg-white border-t border-gray-200 px-6 py-4 flex-shrink-0">
        <div className="flex justify-between items-center max-w-6xl mx-auto">
          <Button
            variant="outline"
            onClick={prevStep}
            disabled={currentStep === 1}
            size="lg"
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            Previous
          </Button>

          <div className="flex gap-3">
            <Button variant="outline" onClick={onBack} size="lg">
              Save Draft
            </Button>
            {currentStep === totalSteps ? (
              <Button
                onClick={handleSubmit}
                disabled={!isStepValid()}
                size="lg"
                className="bg-green-600 hover:bg-green-700 px-8"
              >
                <Rocket className="h-4 w-4 mr-2" />
                Submit Request
              </Button>
            ) : (
              <Button
                onClick={() => {
                  console.log('Next button clicked!');
                  console.log('Current step:', currentStep);
                  console.log('Is step valid:', isStepValid());
                  console.log('Form data:', formData);
                  nextStep();
                }}
                disabled={!isStepValid()}
                size="lg"
                className="px-8"
              >
                Next Step
                <ArrowRight className="h-4 w-4 ml-2" />
              </Button>
            )}
          </div>
        </div>
      </div>

      {/* Template Selection Modal */}
      <TemplateSelectionModal 
        open={showTemplateModal}
        onClose={() => setShowTemplateModal(false)}
        onSelectTemplate={handleTemplateSelection}
      />
    </div>
  );
}