import { useState, useRef, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { RichTextEditor } from '@/components/ui/rich-text-editor';
import { FormattedDescription } from '@/components/common/FormattedDescription';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { motion, AnimatePresence } from 'framer-motion';
import {
  ArrowLeft,
  ArrowRight,
  Calendar as CalendarIcon,
  Check,
  Receipt,
  Building,
  MapPin,
  Clock,
  CheckCircle,
  Info,
  FileText,
  Users,
  XCircle,
  Loader2,
} from 'lucide-react';
import { format } from 'date-fns';
import { toast } from 'sonner';
import { verifyDealerLogin, searchExternalDealerByCode, type DealerInfo } from '@/services/dealerApi';
import { ClaimApproverSelectionStep } from './ClaimApproverSelectionStep';
import { useAuth } from '@/contexts/AuthContext';
import { getPublicConfigurations, AdminConfiguration, getActivityTypes, type ActivityType } from '@/services/adminApi';
import { PolicyViolationModal } from '@/components/modals/PolicyViolationModal';

// CLAIM_STEPS definition (same as in ClaimApproverSelectionStep)
const CLAIM_STEPS = [
  { level: 1, name: 'Dealer Proposal Submission', description: 'Dealer submits proposal documents', defaultTat: 72, isAuto: false, approverType: 'dealer' },
  { level: 2, name: 'Requestor Evaluation', description: 'Initiator evaluates dealer proposal', defaultTat: 48, isAuto: false, approverType: 'initiator' },
  { level: 3, name: 'Department Lead Approval', description: 'Department lead approves and blocks IO budget', defaultTat: 72, isAuto: false, approverType: 'manual' },
  { level: 4, name: 'Activity Creation', description: 'System auto-processes activity creation', defaultTat: 1, isAuto: true, approverType: 'system' },
  { level: 5, name: 'Dealer Completion Documents', description: 'Dealer submits completion documents', defaultTat: 120, isAuto: false, approverType: 'dealer' },
  { level: 6, name: 'Requestor Claim Approval', description: 'Initiator approves completion', defaultTat: 48, isAuto: false, approverType: 'initiator' },
  { level: 7, name: 'E-Invoice Generation', description: 'System generates e-invoice via DMS', defaultTat: 1, isAuto: true, approverType: 'system' },
  { level: 8, name: 'Credit Note Confirmation', description: 'System/Finance processes credit note confirmation', defaultTat: 48, isAuto: true, approverType: 'system' },
];

interface ClaimManagementWizardProps {
  onBack?: () => void;
  onSubmit?: (claimData: any) => void;
}

const STEP_NAMES = [
  'Claim Details',
  'Approver Selection',
  'Review & Submit'
];

export function ClaimManagementWizard({ onBack, onSubmit }: ClaimManagementWizardProps) {
  const { user } = useAuth();
  const [currentStep, setCurrentStep] = useState(1);
  const [verifyingDealer, setVerifyingDealer] = useState(false);
  const [dealerSearchResults, setDealerSearchResults] = useState<DealerInfo[]>([]);
  const [dealerSearchLoading, setDealerSearchLoading] = useState(false);
  const [dealerSearchInput, setDealerSearchInput] = useState('');
  const dealerSearchTimer = useRef<any>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const submitTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  // System policy state
  const [systemPolicy, setSystemPolicy] = useState({
    maxApprovalLevels: 10,
    maxParticipants: 50,
    allowSpectators: true,
    maxSpectators: 20
  });

  const [policyViolationModal, setPolicyViolationModal] = useState<{
    open: boolean;
    violations: Array<{ type: string; message: string; currentValue?: number; maxValue?: number }>;
  }>({
    open: false,
    violations: []
  });

  const [activityTypes, setActivityTypes] = useState<ActivityType[]>([]);
  const [loadingActivityTypes, setLoadingActivityTypes] = useState(true);

  // Load activity types from API on mount
  useEffect(() => {
    const loadActivityTypes = async () => {
      try {
        setLoadingActivityTypes(true);
        const types = await getActivityTypes();
        setActivityTypes(types);
      } catch (error) {
        console.error('Failed to load activity types:', error);
        toast.error('Failed to load activity types. Please refresh the page.');
      } finally {
        setLoadingActivityTypes(false);
      }
    };

    loadActivityTypes();
  }, []);

  // Load system policy on mount
  useEffect(() => {
    const loadSystemPolicy = async () => {
      try {
        const systemSettingsConfigs = await getPublicConfigurations('SYSTEM_SETTINGS');
        const workflowSharingConfigs = await getPublicConfigurations('WORKFLOW_SHARING');
        const allConfigs = [...systemSettingsConfigs, ...workflowSharingConfigs];
        const configMap: Record<string, string> = {};
        allConfigs.forEach((c: AdminConfiguration) => {
          configMap[c.configKey] = c.configValue;
        });

        setSystemPolicy({
          maxApprovalLevels: parseInt(configMap['MAX_APPROVAL_LEVELS'] || '10'),
          maxParticipants: parseInt(configMap['MAX_PARTICIPANTS_PER_REQUEST'] || '50'),
          allowSpectators: configMap['ALLOW_ADD_SPECTATOR']?.toLowerCase() === 'true',
          maxSpectators: parseInt(configMap['MAX_SPECTATORS_PER_REQUEST'] || '20')
        });
      } catch (error) {
        console.error('Failed to load system policy:', error);
      }
    };

    loadSystemPolicy();
  }, []);

  // Cleanup timeout on unmount
  useEffect(() => {
    return () => {
      if (submitTimeoutRef.current) {
        clearTimeout(submitTimeoutRef.current);
      }
    };
  }, []);

  const [formData, setFormData] = useState({
    activityName: '',
    activityType: '',
    dealerCode: '',
    dealerName: '',
    dealerEmail: '',
    dealerPhone: '',
    dealerAddress: '',
    dealerItemGroup: '', // For validation
    activityDate: undefined as Date | undefined,
    location: '',
    requestDescription: '',
    periodStartDate: undefined as Date | undefined,
    periodEndDate: undefined as Date | undefined,
    estimatedBudget: '',
    // Approvers array for all 8 steps
    approvers: [] as Array<{
      email: string;
      name?: string;
      userId?: string;
      level: number;
      tat?: number | string;
      tatType?: 'hours' | 'days';
      isAdditional?: boolean;
      insertAfterLevel?: number;
      stepName?: string;
      originalStepLevel?: number;
    }>
  });

  const totalSteps = STEP_NAMES.length;

  // Handle dealer search input with debouncing
  const handleDealerSearchInputChange = (value: string) => {
    setDealerSearchInput(value);

    // Clear previous timer
    if (dealerSearchTimer.current) {
      clearTimeout(dealerSearchTimer.current);
    }

    // If input is empty, clear results
    if (!value || value.trim().length < 2) {
      setDealerSearchResults([]);
      setDealerSearchLoading(false);
      return;
    }

    // Set loading state
    setDealerSearchLoading(true);

    // Debounce search
    dealerSearchTimer.current = setTimeout(async () => {
      try {
        const result = await searchExternalDealerByCode(value);
        if (result) {
          // Map external API response to DealerInfo structure
          const mappedDealer: DealerInfo = {
            dealerId: result.dealer || result.dealer_code || value,
            dealerCode: result.dealer || result.dealer_code || value,
            dealerName: result['dealer name'] || result.dealer_name || 'Unknown Dealer',
            displayName: result['dealer name'] || result.dealer_name || 'Unknown Dealer',
            email: result['dealer email'] || '',
            phone: result['dealer phone'] || '',
            city: result['re city'] || result.city || '',
            state: result['re state code'] || result.state || '',
            isLoggedIn: true, // We'll verify this in the next step
            parentCode: result.parentcode || null,
            itemGroup: result['item group'] || null,
          };
          setDealerSearchResults([mappedDealer]);
        } else {
          setDealerSearchResults([]);
        }
      } catch (error) {
        console.error('Error searching external dealer:', error);
        setDealerSearchResults([]);
      } finally {
        setDealerSearchLoading(false);
      }
    }, 300);
  };

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

      // Validate period dates
      if (field === 'periodStartDate') {
        if (value && updated.periodEndDate && value > updated.periodEndDate) {
          updated.periodEndDate = undefined;
          toast.error('End date must be on or after the start date. End date has been cleared.');
        }
      } else if (field === 'periodEndDate') {
        if (value && updated.periodStartDate && value < updated.periodStartDate) {
          toast.error('End date must be on or after the start date.');
          return prev;
        }
      }

      // 1b. Validate Activity Type change against already selected Dealer
      if (field === 'activityType' && updated.dealerCode) {
        const selectedActivity = activityTypes.find(t => t.title === value);
        if (selectedActivity) {
          if (selectedActivity.creditPostingOn) {
            const activityCategory = selectedActivity.creditPostingOn.toLowerCase();
            const dealerGroup = (updated.dealerItemGroup || '').toLowerCase();

            // If we have a dealer group, validate it
            if (dealerGroup) {
              let isMatch = false;
              if ((activityCategory === 'vehicle' || activityCategory === 'vehicles') && (dealerGroup === 'vehicle' || dealerGroup === 'vehicles')) isMatch = true;
              else if (activityCategory === 'spares' && dealerGroup === 'spares') isMatch = true;
              else if (activityCategory === 'gma' && dealerGroup === 'gma') isMatch = true;
              else if (activityCategory === 'apparel' && dealerGroup === 'apparel') isMatch = true;
              else if (activityCategory === dealerGroup) isMatch = true;

              if (!isMatch) {
                toast.error(`incorrect Delercode for selected service group`, {
                  description: `Activity requires ${selectedActivity.creditPostingOn}, but already selected dealer is ${updated.dealerItemGroup}`,
                  duration: 6000
                });
                return prev;
              }
            }
          } else {
            console.warn(`[ClaimWizard] Activity type "${value}" is missing creditPostingOn configuration.`);
          }
        }
      }

      return updated;
    });
  };

  // Helper to update multiple fields at once
  const updateMultipleFormData = (updates: Record<string, any>) => {
    setFormData(prev => ({ ...prev, ...updates }));
  };

  const isStepValid = () => {
    switch (currentStep) {
      case 1:
        return formData.activityName &&
          formData.activityType &&
          formData.dealerCode &&
          formData.dealerName &&
          formData.activityDate &&
          formData.location &&
          formData.requestDescription;
      case 2:
        // Validate that all required approvers are assigned (Step 3 only, Step 8 is now system/Finance)
        const approvers = formData.approvers || [];
        // Find step 3 approver by originalStepLevel first, then fallback to level
        const step3Approver = approvers.find((a: any) =>
          a.originalStepLevel === 3 || (!a.originalStepLevel && a.level === 3 && !a.isAdditional)
        );
        // Step 8 is now a system step, no validation needed
        return step3Approver?.email && step3Approver?.userId && step3Approver?.tat;
      case 3:
        return true;
      default:
        return false;
    }
  };

  const nextStep = () => {
    if (currentStep < totalSteps) {
      if (!isStepValid()) {
        // Show specific error messages for step 2 (approver selection)
        if (currentStep === 2) {
          const approvers = formData.approvers || [];
          // Find step 3 approver by originalStepLevel first, then fallback to level
          const step3Approver = approvers.find((a: any) =>
            a.originalStepLevel === 3 || (!a.originalStepLevel && a.level === 3 && !a.isAdditional)
          );
          const missingSteps: string[] = [];

          if (!step3Approver?.email || !step3Approver?.userId || !step3Approver?.tat) {
            missingSteps.push('Department Lead Approval');
          }

          if (missingSteps.length > 0) {
            toast.error(`Please add missing approvers: ${missingSteps.join(', ')}`);
          } else {
            toast.error('Please complete all required approver selections (email, user verification, and TAT) before proceeding.');
          }
        } else {
          toast.error('Please complete all required fields before proceeding.');
        }
        return;
      }
      setCurrentStep(currentStep + 1);
    }
  };

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

  const handleDealerSelect = async (selectedDealer: DealerInfo) => {
    // Verify dealer is logged in
    setVerifyingDealer(true);
    try {
      const verifiedDealer = await verifyDealerLogin(selectedDealer.dealerCode);

      if (!verifiedDealer.isLoggedIn) {
        toast.error(
          `Dealer "${verifiedDealer.dealerName || verifiedDealer.displayName}" (${verifiedDealer.dealerCode}) is not mapped to the system.`,
          { duration: 5000 }
        );
        // Clear the selection
        setDealerSearchInput('');
        setDealerSearchResults([]);
        updateFormData('dealerCode', '');
        updateFormData('dealerName', '');
        updateFormData('dealerEmail', '');
        updateFormData('dealerPhone', '');
        updateFormData('dealerAddress', '');
        setVerifyingDealer(false);
        return;
      }

      // 1a. Validate Category Match (Frontend UX)
      if (formData.activityType) {
        const selectedActivity = activityTypes.find(t => t.title === formData.activityType);
        if (selectedActivity && selectedActivity.creditPostingOn) {
          const activityCategory = selectedActivity.creditPostingOn.toLowerCase();
          const dealerGroup = (verifiedDealer.itemGroup || '').toLowerCase();

          let isMatch = false;
          // Vehicle matches Vehicle
          if (activityCategory === 'vehicle' && dealerGroup === 'vehicle') {
            isMatch = true;
          }
          // Spares matches Spares (Strict)
          else if (activityCategory === 'spares' && dealerGroup === 'spares') {
            isMatch = true;
          }
          // GMA matches GMA (Strict)
          else if (activityCategory === 'gma' && dealerGroup === 'gma') {
            isMatch = true;
          }
          // Apparel matches Apparel (Strict)
          else if (activityCategory === 'apparel' && dealerGroup === 'apparel') {
            isMatch = true;
          }
          // Direct match fallback
          else if (activityCategory === dealerGroup) {
            isMatch = true;
          }

          if (!isMatch) {
            toast.error(`incorrect Delercode for selected service group`, {
              description: `Activity requires ${selectedActivity.creditPostingOn}, but dealer is ${verifiedDealer.itemGroup || 'N/A'}`,
              duration: 6000
            });
            // Clear the selection
            setDealerSearchInput('');
            setDealerSearchResults([]);
            setVerifyingDealer(false);
            return;
          }
        }
      }

      // Dealer is logged in, update form data in one batch
      updateMultipleFormData({
        dealerCode: verifiedDealer.dealerCode,
        dealerName: verifiedDealer.dealerName || verifiedDealer.displayName,
        dealerEmail: verifiedDealer.email || '',
        dealerPhone: verifiedDealer.phone || '',
        dealerAddress: '',
        dealerItemGroup: verifiedDealer.itemGroup || ''
      });

      // Clear search input and results
      setDealerSearchInput(verifiedDealer.dealerName || verifiedDealer.displayName);
      setDealerSearchResults([]);

      toast.success(`Dealer "${verifiedDealer.dealerName || verifiedDealer.displayName}" verified and mapped to the System`);
    } catch (error: any) {
      const errorMessage = 'Dealer is not mapped to the system'
      toast.error(errorMessage, { duration: 5000 });
      // Clear the selection
      setDealerSearchInput('');
      setDealerSearchResults([]);
      updateFormData('dealerCode', '');
      updateFormData('dealerName', '');
      updateFormData('dealerEmail', '');
      updateFormData('dealerPhone', '');
      updateFormData('dealerAddress', '');
    } finally {
      setVerifyingDealer(false);
    }
  };

  const handleSubmit = () => {
    // Prevent multiple submissions
    if (isSubmitting) {
      return;
    }

    // Approvers are already using integer levels with proper shifting
    // Just sort them and prepare for submission
    const approvers = formData.approvers || [];
    const sortedApprovers = [...approvers].sort((a, b) => a.level - b.level);

    // Check for duplicate levels (should not happen, but safeguard)
    const levelMap = new Map<number, typeof sortedApprovers[0]>();
    const duplicates: number[] = [];

    sortedApprovers.forEach((approver) => {
      if (levelMap.has(approver.level)) {
        duplicates.push(approver.level);
      } else {
        levelMap.set(approver.level, approver);
      }
    });

    if (duplicates.length > 0) {
      toast.error(`Duplicate approver levels detected: ${duplicates.join(', ')}. Please refresh and try again.`);
      console.error('Duplicate levels found:', duplicates, sortedApprovers);
      return;
    }

    // Prepare final approvers array - preserve stepName for additional approvers
    // The backend will use stepName to set the levelName for approval levels
    // Also preserve originalStepLevel so backend can identify which step each approver belongs to
    const finalApprovers = sortedApprovers.map((approver) => {
      const result: any = {
        email: approver.email,
        name: approver.name,
        userId: approver.userId,
        level: approver.level,
        tat: approver.tat,
        tatType: approver.tatType,
      };

      // Preserve stepName for additional approvers
      if (approver.isAdditional && approver.stepName) {
        result.stepName = approver.stepName;
        result.isAdditional = true;
      }

      // Preserve originalStepLevel for fixed steps (so backend can identify which step this is)
      if (approver.originalStepLevel) {
        result.originalStepLevel = approver.originalStepLevel;
      }

      return result;
    });

    const claimData = {
      ...formData,
      templateType: 'claim-management',
      submittedAt: new Date().toISOString(),
      status: 'pending',
      currentStep: 'initiator-review',
      // Pass normalized approvers array to backend
      approvers: finalApprovers
    };

    // Set submitting state to prevent multiple clicks
    setIsSubmitting(true);

    // Clear any existing timeout
    if (submitTimeoutRef.current) {
      clearTimeout(submitTimeoutRef.current);
    }

    // Set a timeout as a fallback to reset loading state (30 seconds)
    // In most cases, the parent component will navigate away on success, 
    // but this prevents the button from being stuck in loading state if there's an error
    submitTimeoutRef.current = setTimeout(() => {
      setIsSubmitting(false);
      submitTimeoutRef.current = null;
    }, 30000);

    // Don't show toast here - let the parent component handle success/error after API call
    if (onSubmit) {
      try {
        onSubmit(claimData);
        // Note: On success, the component will unmount when parent navigates away (timeout cleared in useEffect)
        // On error, the timeout will reset the state after 30 seconds
      } catch (error) {
        // If onSubmit throws synchronously, reset state immediately
        if (submitTimeoutRef.current) {
          clearTimeout(submitTimeoutRef.current);
          submitTimeoutRef.current = null;
        }
        setIsSubmitting(false);
        console.error('Error submitting claim:', error);
      }
    } else {
      // If no onSubmit handler, reset immediately
      if (submitTimeoutRef.current) {
        clearTimeout(submitTimeoutRef.current);
        submitTimeoutRef.current = null;
      }
      setIsSubmitting(false);
    }
  };

  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="space-y-6"
          >
            <div className="text-center mb-8">
              <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <Receipt className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-2xl font-bold text-gray-900 mb-2">Claim Details</h2>
              <p className="text-gray-600">
                Provide comprehensive information about your claim request
              </p>
            </div>

            <div className="max-w-3xl mx-auto space-y-6">
              {/* Activity Name and Type */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label htmlFor="activityName" className="text-base font-semibold">Activity Name *</Label>
                  <Input
                    id="activityName"
                    placeholder="e.g., Himalayan Adventure Fest 2024"
                    value={formData.activityName}
                    onChange={(e) => updateFormData('activityName', e.target.value)}
                    className="mt-2 h-12"
                  />
                </div>

                <div>
                  <Label htmlFor="activityType" className="text-base font-semibold">Activity Type *</Label>
                  <Select
                    value={formData.activityType}
                    onValueChange={(value) => updateFormData('activityType', value)}
                    disabled={loadingActivityTypes}
                  >
                    <SelectTrigger className="mt-2 !h-12 data-[size=default]:!h-12" id="activityType">
                      <SelectValue placeholder={loadingActivityTypes ? "Loading activity types..." : "Select activity type"} />
                    </SelectTrigger>
                    <SelectContent className="max-h-80">
                      {activityTypes.length > 0 ? (
                        activityTypes.map((type) => (
                          <SelectItem key={type.activityTypeId} value={type.title} className="focus:bg-blue-600 focus:text-white group">
                            <div className="flex flex-col py-0.5">
                              <span className="font-medium text-[13px] leading-[1.1] text-gray-900 group-focus:text-white">
                                {type.title}
                              </span>
                              <div className="flex items-center gap-1 text-[9px] text-gray-500 group-focus:text-blue-100 uppercase font-bold tracking-wider leading-none mt-0.5">
                                {type.creditPostingOn && <span>{type.creditPostingOn}</span>}
                                {type.creditPostingOn && type.taxationType && <span className="opacity-40 select-none">•</span>}
                                {type.taxationType && <span>{type.taxationType}</span>}
                              </div>
                            </div>
                          </SelectItem>
                        ))
                      ) : (
                        <div className="px-2 py-1.5 text-sm text-gray-500 text-center">
                          No activity types available
                        </div>
                      )}
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {/* Dealer Selection */}
              <div>
                <Label className="text-base font-semibold">Dealer Code / Dealer Name *</Label>
                <div className="mt-2">
                  <div className="relative">
                    <Input
                      placeholder="Type dealer code, name, or email to search..."
                      value={formData.dealerCode ? `${formData.dealerName} (${formData.dealerCode})` : dealerSearchInput}
                      onChange={(e) => {
                        if (formData.dealerCode) {
                          // If dealer is already selected, clear selection first
                          updateFormData('dealerCode', '');
                          updateFormData('dealerName', '');
                          updateFormData('dealerEmail', '');
                          updateFormData('dealerPhone', '');
                          updateFormData('dealerAddress', '');
                          setDealerSearchInput(e.target.value);
                        } else {
                          handleDealerSearchInputChange(e.target.value);
                        }
                      }}
                      onFocus={() => {
                        // When input is focused, show search results if input has value
                        if (dealerSearchInput && dealerSearchInput.length >= 2) {
                          handleDealerSearchInputChange(dealerSearchInput);
                        }
                      }}
                      className="h-12 border-2 border-gray-300 focus:border-blue-500"
                      disabled={verifyingDealer}
                    />
                    {formData.dealerCode && (
                      <div className="absolute right-3 top-1/2 -translate-y-1/2">
                        <Badge variant="outline" className="text-xs bg-green-50 text-green-700 border-green-300">
                          <CheckCircle className="w-3 h-3 mr-1" />
                          Verified
                        </Badge>
                      </div>
                    )}
                    {/* Search suggestions dropdown */}
                    {(dealerSearchLoading || dealerSearchResults.length > 0) && !formData.dealerCode && (
                      <div className="absolute left-0 right-0 top-full mt-1 z-50 border rounded-md bg-white shadow-lg">
                        {dealerSearchLoading ? (
                          <div className="p-2 text-xs text-gray-500">Searching...</div>
                        ) : (
                          <ul className="max-h-56 overflow-auto divide-y">
                            {dealerSearchResults.map((dealer) => (
                              <li
                                key={dealer.dealerId}
                                className="p-2 text-sm cursor-pointer hover:bg-gray-50"
                                onClick={() => handleDealerSelect(dealer)}
                              >
                                <div className="flex items-center justify-between">
                                  <div className="flex-1">
                                    <div className="font-medium text-gray-900">
                                      {dealer.dealerName || dealer.displayName}
                                    </div>
                                    <div className="text-[10px] text-gray-600 mt-0.5 font-medium flex items-center gap-1.5">
                                      <span className="font-mono">{dealer.dealerCode}</span>
                                      {dealer.email && (
                                        <>
                                          <span className="opacity-40">•</span>
                                          <span>{dealer.email}</span>
                                        </>
                                      )}
                                    </div>
                                    <div className="text-[10px] text-gray-500 mt-0.5">
                                      {dealer.city}, {dealer.state}
                                    </div>
                                    {dealer.itemGroup && (
                                      <div className="text-[9px] text-blue-600 font-bold uppercase tracking-wider mt-0.5">
                                        {dealer.itemGroup}
                                      </div>
                                    )}
                                  </div>
                                  <div className="ml-2 flex-shrink-0">
                                    {dealer.isLoggedIn ? (
                                      <CheckCircle className="w-4 h-4 text-green-600" />
                                    ) : (
                                      <XCircle className="w-4 h-4 text-red-500" />
                                    )}
                                  </div>
                                </div>
                              </li>
                            ))}
                          </ul>
                        )}
                      </div>
                    )}
                  </div>
                </div>
                {formData.dealerCode && (
                  <div className="mt-2 space-y-1">
                    <p className="text-sm text-gray-600">
                      Selected: <span className="font-semibold">{formData.dealerName}</span> ({formData.dealerCode})
                    </p>
                    {formData.dealerEmail && (
                      <p className="text-xs text-gray-500">Email: {formData.dealerEmail}</p>
                    )}
                  </div>
                )}
              </div>

              {/* Date and Location */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <Label className="text-base font-semibold">Date *</Label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className="w-full justify-start text-left mt-2 h-12 pl-3"
                      >
                        <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                        <span className="flex-1 text-left">{formData.activityDate ? format(formData.activityDate, 'd MMM yyyy') : 'Select date'}</span>
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        mode="single"
                        selected={formData.activityDate}
                        onSelect={(date) => updateFormData('activityDate', date)}
                        initialFocus
                      />
                    </PopoverContent>
                  </Popover>
                </div>

                <div>
                  <Label htmlFor="location" className="text-base font-semibold">Location *</Label>
                  <Input
                    id="location"
                    placeholder="e.g., Mumbai, Maharashtra"
                    value={formData.location}
                    onChange={(e) => updateFormData('location', e.target.value)}
                    className="mt-2 h-12"
                  />
                </div>
              </div>

              {/* Request Detail */}
              <div>
                <Label htmlFor="requestDescription" className="text-base font-semibold">Request in Detail - Brief Requirement *</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.
                  <span className="block mt-1 text-xs text-blue-600">
                    💡 Tip: You can paste formatted content (lists, tables) and the formatting will be preserved.
                  </span>
                </p>
                <RichTextEditor
                  value={formData.requestDescription || ''}
                  onChange={(html) => updateFormData('requestDescription', html)}
                  placeholder="Provide comprehensive details about your claim requirement 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-within:border-blue-500 bg-white shadow-sm"
                  minHeight="120px"
                />
              </div>

              {/* Period (Optional) */}
              <div>
                <div className="flex items-center gap-2 mb-3">
                  <Label className="text-base font-semibold">Period (If Any)</Label>
                  <Badge variant="secondary" className="text-xs">Optional</Badge>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <Label className="text-sm text-gray-600">Start Date</Label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          className="w-full justify-start text-left mt-2 h-12 pl-3"
                        >
                          <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                          <span className="flex-1 text-left">{formData.periodStartDate ? format(formData.periodStartDate, 'd MMM yyyy') : 'Start date'}</span>
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <Calendar
                          mode="single"
                          selected={formData.periodStartDate}
                          onSelect={(date) => updateFormData('periodStartDate', date)}
                          initialFocus
                          // Maximum date is the end date (if selected)
                          toDate={formData.periodEndDate || undefined}
                        />
                      </PopoverContent>
                    </Popover>
                  </div>

                  <div>
                    <Label className="text-sm text-gray-600">End Date</Label>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          className="w-full justify-start text-left mt-2 h-12 pl-3"
                          disabled={!formData.periodStartDate}
                        >
                          <CalendarIcon className="mr-2 h-4 w-4 flex-shrink-0" />
                          <span className="flex-1 text-left">{formData.periodEndDate ? format(formData.periodEndDate, 'd MMM yyyy') : 'End date'}</span>
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <Calendar
                          mode="single"
                          selected={formData.periodEndDate}
                          onSelect={(date) => updateFormData('periodEndDate', date)}
                          initialFocus
                          // Minimum date is the start date (if selected)
                          fromDate={formData.periodStartDate || undefined}
                        />
                      </PopoverContent>
                    </Popover>
                    {!formData.periodStartDate && (
                      <p className="text-xs text-gray-500 mt-1">Please select start date first</p>
                    )}
                  </div>
                </div>
                {(formData.periodStartDate || formData.periodEndDate) && (
                  <div className="mt-2">
                    {formData.periodStartDate && formData.periodEndDate ? (
                      <p className="text-xs text-gray-600">
                        Period: {format(formData.periodStartDate, 'd MMM yyyy')} - {format(formData.periodEndDate, 'd MMM yyyy')}
                      </p>
                    ) : (
                      <p className="text-xs text-gray-500">
                        {formData.periodStartDate
                          ? 'Please select end date for the period'
                          : 'Please select start date first'}
                      </p>
                    )}
                  </div>
                )}
              </div>
            </div>
          </motion.div>
        );

      case 2:
        return (
          <ClaimApproverSelectionStep
            formData={formData}
            updateFormData={updateFormData}
            currentUserEmail={(user as any)?.email || ''}
            currentUserId={(user as any)?.userId || ''}
            currentUserName={
              (user as any)?.displayName ||
              (user as any)?.name ||
              ((user as any)?.firstName && (user as any)?.lastName
                ? `${(user as any).firstName} ${(user as any).lastName}`.trim()
                : (user as any)?.email || 'User')
            }
            maxApprovalLevels={systemPolicy.maxApprovalLevels}
            onPolicyViolation={(violations) => setPolicyViolationModal({ open: true, violations })}
          />
        );

      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-green-500 to-emerald-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">
                Review your claim details before submission
              </p>
            </div>

            <div className="max-w-3xl mx-auto space-y-6">
              {/* Activity Information */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-blue-50 to-indigo-50">
                  <CardTitle className="flex items-center gap-2">
                    <Receipt className="w-5 h-5 text-blue-600" />
                    Activity Information
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Name</Label>
                      <p className="font-semibold text-gray-900 mt-1">{formData.activityName}</p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Activity Type</Label>
                      <Badge variant="secondary" className="mt-1">{formData.activityType}</Badge>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Dealer Information */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-green-50 to-emerald-50">
                  <CardTitle className="flex items-center gap-2">
                    <Building className="w-5 h-5 text-green-600" />
                    Dealer Information
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Code</Label>
                      <p className="font-semibold text-gray-900 mt-1 font-mono">{formData.dealerCode}</p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Dealer Name</Label>
                      <p className="font-semibold text-gray-900 mt-1">{formData.dealerName}</p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Email</Label>
                      <p className="text-gray-900 mt-1">{formData.dealerEmail}</p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Phone</Label>
                      <p className="text-gray-900 mt-1">{formData.dealerPhone}</p>
                    </div>
                    {formData.dealerAddress && (
                      <div className="col-span-2">
                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Address</Label>
                        <p className="text-gray-900 mt-1">{formData.dealerAddress}</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Approver Information */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-purple-50 to-indigo-50">
                  <CardTitle className="flex items-center gap-2">
                    <Users className="w-5 h-5 text-purple-600" />
                    Selected Approvers
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div className="space-y-3">
                    {(() => {
                      // Sort approvers by level and filter out system approvers
                      const sortedApprovers = [...(formData.approvers || [])]
                        .filter((a: any) => !a.email?.includes('system@') && !a.email?.includes('finance@'))
                        .sort((a: any, b: any) => a.level - b.level);

                      return sortedApprovers.map((approver: any) => {
                        const tat = Number(approver.tat || 0);
                        const tatType = approver.tatType || 'hours';
                        const hours = tatType === 'days' ? tat * 24 : tat;

                        // Find step name - handle additional approvers and shifted levels
                        let stepName = 'Unknown';
                        let stepLabel = '';

                        if (approver.isAdditional) {
                          // Additional approver - use stepName if available
                          stepName = approver.stepName || 'Additional Approver';
                          const afterStep = CLAIM_STEPS.find(s => s.level === approver.insertAfterLevel);
                          stepLabel = approver.stepName || `Additional Approver (after "${afterStep?.name || 'Unknown'}")`;
                        } else {
                          // Fixed step - find by originalStepLevel first, then fallback to level
                          const step = approver.originalStepLevel
                            ? CLAIM_STEPS.find(s => s.level === approver.originalStepLevel)
                            : CLAIM_STEPS.find(s => s.level === approver.level && !s.isAuto);
                          stepName = step?.name || 'Unknown';
                          stepLabel = stepName;
                        }

                        return (
                          <div key={`${approver.level}-${approver.email}`} className={`p-3 rounded-lg border ${approver.isAdditional ? 'bg-purple-50 border-purple-200' : 'bg-gray-50 border-gray-200'
                            }`}>
                            <div className="flex items-center justify-between">
                              <div className="flex-1">
                                <div className="flex items-center gap-2 mb-1">
                                  <Label className="text-xs text-gray-600 uppercase tracking-wider">
                                    {stepLabel}
                                  </Label>
                                  {approver.isAdditional && (
                                    <Badge variant="outline" className="text-xs bg-purple-100 text-purple-700 border-purple-300">
                                      ADDITIONAL
                                    </Badge>
                                  )}
                                </div>
                                <p className="font-semibold text-gray-900 mt-1">{approver.name || approver.email || 'Not selected'}</p>
                                {approver.email && (
                                  <p className="text-xs text-gray-500 mt-1">{approver.email}</p>
                                )}
                              </div>
                              <div className="text-right ml-4">
                                <p className="text-sm font-semibold text-gray-900">{hours} hours</p>
                                <p className="text-xs text-gray-500">TAT</p>
                              </div>
                            </div>
                          </div>
                        );
                      });
                    })()}
                  </div>
                </CardContent>
              </Card>

              {/* Date & Location */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-purple-50 to-pink-50">
                  <CardTitle className="flex items-center gap-2">
                    <CalendarIcon className="w-5 h-5 text-purple-600" />
                    Date & Location
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Date</Label>
                      <p className="font-semibold text-gray-900 mt-1">
                        {formData.activityDate ? format(formData.activityDate, 'PPP') : 'N/A'}
                      </p>
                    </div>
                    <div>
                      <Label className="text-xs text-gray-600 uppercase tracking-wider">Location</Label>
                      <div className="flex items-center gap-2 mt-1">
                        <MapPin className="w-4 h-4 text-gray-500" />
                        <p className="font-semibold text-gray-900">{formData.location}</p>
                      </div>
                    </div>
                    {formData.estimatedBudget && (
                      <div className="col-span-2">
                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Estimated Budget</Label>
                        <p className="text-xl font-bold text-blue-900 mt-1">{formData.estimatedBudget}</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>

              {/* Request Details */}
              <Card className="border-2">
                <CardHeader className="bg-gradient-to-br from-orange-50 to-amber-50">
                  <CardTitle className="flex items-center gap-2">
                    <FileText className="w-5 h-5 text-orange-600" />
                    Request Details
                  </CardTitle>
                </CardHeader>
                <CardContent className="pt-6 space-y-4">
                  <div>
                    <Label className="text-xs text-gray-600 uppercase tracking-wider">Brief Requirement</Label>
                    <div className="mt-2 p-4 bg-gray-50 rounded-lg border">
                      <FormattedDescription
                        content={formData.requestDescription || ''}
                        className="text-sm"
                      />
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Period (if provided) */}
              {(formData.periodStartDate || formData.periodEndDate) && (
                <Card className="border-2">
                  <CardHeader className="bg-gradient-to-br from-cyan-50 to-blue-50">
                    <CardTitle className="flex items-center gap-2">
                      <Clock className="w-5 h-5 text-cyan-600" />
                      Period
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="pt-6 space-y-4">
                    <div className="grid grid-cols-2 gap-6">
                      <div>
                        <Label className="text-xs text-gray-600 uppercase tracking-wider">Start Date</Label>
                        <p className="font-semibold text-gray-900 mt-1">
                          {formData.periodStartDate ? format(formData.periodStartDate, 'PPP') : 'Not specified'}
                        </p>
                      </div>
                      <div>
                        <Label className="text-xs text-gray-600 uppercase tracking-wider">End Date</Label>
                        <p className="font-semibold text-gray-900 mt-1">
                          {formData.periodEndDate ? format(formData.periodEndDate, 'PPP') : 'Not specified'}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* Confirmation Message */}
              <div className="bg-blue-50 border-2 border-blue-200 rounded-lg p-6">
                <div className="flex items-start gap-3">
                  <Info className="w-6 h-6 text-blue-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="font-semibold text-blue-900 mb-1">Ready to Submit</p>
                    <p className="text-sm text-blue-800">
                      Please review all the information above. Once submitted, your claim request will enter the approval workflow.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        );

      default:
        return null;
    }
  };

  return (
    <div className="w-full bg-gradient-to-br from-gray-50 to-gray-100 py-4 sm:py-6 lg:py-8 px-3 sm:px-4 lg:px-6 overflow-y-auto">
      <div className="max-w-6xl mx-auto pb-8">
        {/* Header */}
        <div className="mb-6 sm:mb-8">
          <Button
            variant="ghost"
            onClick={onBack}
            className="mb-3 sm:mb-4 gap-2 text-sm sm:text-base"
          >
            <ArrowLeft className="w-3 h-3 sm:w-4 sm:h-4" />
            <span className="hidden sm:inline">Back to Templates</span>
            <span className="sm:hidden">Back</span>
          </Button>

          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-0">
            <div>
              <Badge variant="secondary" className="mb-2 text-xs">Claim Management Template</Badge>
              <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">New Claim Request</h1>
              <p className="text-sm sm:text-base text-gray-600 mt-1">
                Step {currentStep} of {totalSteps}: <span className="hidden sm:inline">{STEP_NAMES[currentStep - 1]}</span>
              </p>
            </div>
          </div>

          {/* Progress Bar */}
          <div className="mt-4 sm:mt-6">
            <Progress value={(currentStep / totalSteps) * 100} className="h-2" />
            <div className="flex justify-between mt-2 px-1">
              {STEP_NAMES.map((_name, index) => (
                <span
                  key={index}
                  className={`text-xs sm:text-sm ${index + 1 <= currentStep ? 'text-blue-600 font-medium' : 'text-gray-400'
                    }`}
                >
                  {index + 1}
                </span>
              ))}
            </div>
          </div>
        </div>

        {/* Step Content */}
        <Card className="mb-6 sm:mb-8">
          <CardContent className="p-4 sm:p-6 lg:p-8">
            <AnimatePresence mode="wait">
              {renderStepContent()}
            </AnimatePresence>
          </CardContent>
        </Card>

        {/* Navigation */}
        <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-0 pb-4 sm:pb-0">
          <Button
            variant="outline"
            onClick={prevStep}
            disabled={currentStep === 1}
            className="gap-2 w-full sm:w-auto order-2 sm:order-1"
          >
            <ArrowLeft className="w-4 h-4" />
            Previous
          </Button>

          {currentStep < totalSteps ? (
            <Button
              onClick={nextStep}
              className={`gap-2 w-full sm:w-auto order-1 sm:order-2 ${!isStepValid()
                ? 'opacity-50 cursor-pointer hover:opacity-60'
                : ''
                }`}
            >
              Next
              <ArrowRight className="w-4 h-4" />
            </Button>
          ) : (
            <Button
              onClick={handleSubmit}
              disabled={!isStepValid() || isSubmitting}
              className="gap-2 bg-green-600 hover:bg-green-700 w-full sm:w-auto order-1 sm:order-2"
            >
              {isSubmitting ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Submitting...
                </>
              ) : (
                <>
                  <Check className="w-4 h-4" />
                  Submit Claim Request
                </>
              )}
            </Button>
          )}
        </div>
      </div>

      {/* Policy Violation Modal */}
      <PolicyViolationModal
        open={policyViolationModal.open}
        onClose={() => setPolicyViolationModal({ open: false, violations: [] })}
        violations={policyViolationModal.violations}
        policyDetails={{
          maxApprovalLevels: systemPolicy.maxApprovalLevels,
          maxParticipants: systemPolicy.maxParticipants,
          allowSpectators: systemPolicy.allowSpectators,
          maxSpectators: systemPolicy.maxSpectators,
        }}
      />
    </div>
  );
}
