import React, { useState, useEffect } from "react";
import { base44 } from "@/api/base44Client";
import { useMutation, useQuery } from "@tanstack/react-query";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import {
  Building2, FileText, MapPin, DollarSign, Sparkles, Upload,
  CheckCircle2, Loader2, AlertCircle, ArrowRight, ArrowLeft,
  Shield, TrendingUp, Users, Briefcase, Mail, Phone, Hash,
  Search, Calendar, Plus, Trash2, Check, Target 
} from "lucide-react";
import { useToast } from "@/components/ui/use-toast";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import DragDropFileUpload from "@/components/common/DragDropFileUpload";
import DocumentViewer from "@/components/vendor/DocumentViewer";

// Google Places Autocomplete Component
const GoogleAddressInput = ({ value, onChange, placeholder, label, required }) => {
  const [inputValue, setInputValue] = useState(value || "");
  const [suggestions, setSuggestions] = useState([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const inputRef = React.useRef(null);

  useEffect(() => {
    setInputValue(value || "");
  }, [value]);

  const handleAddressSearch = async (searchText) => {
    setInputValue(searchText);

    if (searchText.length < 3) {
      setSuggestions([]);
      return;
    }

    try {
      // Use Google Places API via integration
      const response = await base44.integrations.Core.InvokeLLM({
        prompt: `Extract and return ONLY a valid JSON array of 5 US address suggestions for: "${searchText}". Format each as: {"address": "full formatted address", "city": "city", "state": "state", "zip": "zip"}. Return ONLY the JSON array, no other text.`,
        response_json_schema: {
          type: "object",
          properties: {
            suggestions: {
              type: "array",
              items: {
                type: "object",
                properties: {
                  address: { type: "string" },
                  city: { type: "string" },
                  state: { type: "string" },
                  zip: { type: "string" }
                }
              }
            }
          }
        }
      });

      if (response?.suggestions) {
        setSuggestions(response.suggestions);
        setShowSuggestions(true);
      }
    } catch (error) {
      console.error("Address search error:", error);
    }
  };

  const handleSelectAddress = (suggestion) => {
    const fullAddress = `${suggestion.address}, ${suggestion.city}, ${suggestion.state} ${suggestion.zip}`;
    setInputValue(fullAddress);
    onChange(fullAddress);
    setSuggestions([]);
    setShowSuggestions(false);
  };

  return (
    <div className="relative">
      <Label htmlFor={label}>
        {label} {required && <span className="text-red-500">*</span>}
      </Label>
      <div className="relative mt-2">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400" />
        <Input
          ref={inputRef}
          value={inputValue}
          onChange={(e) => {
            handleAddressSearch(e.target.value);
          }}
          onBlur={() => {
            // Delay to allow click on suggestion
            setTimeout(() => setShowSuggestions(false), 200);
          }}
          onFocus={() => {
            if (suggestions.length > 0) setShowSuggestions(true);
          }}
          placeholder={placeholder}
          className="pl-10"
        />
      </div>

      {showSuggestions && suggestions.length > 0 && (
        <div className="absolute z-50 w-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg max-h-60 overflow-y-auto">
          {suggestions.map((suggestion, idx) => (
            <button
              key={idx}
              type="button"
              onClick={() => handleSelectAddress(suggestion)}
              className="w-full text-left px-4 py-3 hover:bg-slate-50 border-b border-slate-100 last:border-0 transition-colors"
            >
              <div className="flex items-start gap-2">
                <MapPin className="w-4 h-4 text-slate-400 mt-0.5 flex-shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-slate-900 truncate">{suggestion.address}</p>
                  <p className="text-xs text-slate-500">{suggestion.city}, {suggestion.state} {suggestion.zip}</p>
                </div>
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

export default function SmartVendorOnboarding() {
  const { toast } = useToast();
  const navigate = useNavigate();

  const [currentStep, setCurrentStep] = useState(0); // Changed from 1 to 0 for welcome screen
  const [generatingRates, setGeneratingRates] = useState(false);

  // Function to detect minimum wage based on business address
  const getMinimumWageFromAddress = (address) => {
    if (!address) return 18; // Default fallback

    const addr = address.toLowerCase();

    // State-specific minimum wages (as of 2024)
    if (addr.includes('california') || addr.includes(' ca ') || addr.includes('ca,')) return 16.00;
    if (addr.includes('washington') || addr.includes(' wa ')) return 16.28;
    if (addr.includes('massachusetts') || addr.includes(' ma ')) return 15.00;
    if (addr.includes('new york') || addr.includes(' ny ')) return 15.00;
    if (addr.includes('connecticut') || addr.includes(' ct ')) return 15.00;
    if (addr.includes('arizona') || addr.includes(' az ')) return 14.35;
    if (addr.includes('colorado') || addr.includes(' co ')) return 14.42;
    if (addr.includes('maine') || addr.includes(' me ')) return 14.15;
    if (addr.includes('oregon') || addr.includes(' or ')) return 14.20;
    if (addr.includes('vermont') || addr.includes(' vt ')) return 13.67;
    if (addr.includes('illinois') || addr.includes(' il ')) return 14.00;
    if (addr.includes('rhode island') || addr.includes(' ri ')) return 14.00;
    if (addr.includes('new jersey') || addr.includes(' nj ')) return 15.13;
    if (addr.includes('florida') || addr.includes(' fl ')) return 12.00;
    if (addr.includes('nevada') || addr.includes(' nv ')) return 12.00;
    if (addr.includes('hawaii') || addr.includes(' hi ')) return 14.00;
    if (addr.includes('texas') || addr.includes(' tx ')) return 7.25;
    if (addr.includes('georgia') || addr.includes(' ga ')) return 7.25;
    if (addr.includes('pennsylvania') || addr.includes(' pa ')) return 7.25;
    if (addr.includes('ohio') || addr.includes(' oh ')) return 10.45;
    if (addr.includes('michigan') || addr.includes(' mi ')) return 10.33;
    if (addr.includes('virginia') || addr.includes(' va ')) return 12.00;
    if (addr.includes('north carolina') || addr.includes(' nc ')) return 7.25;
    if (addr.includes('tennessee') || addr.includes(' tn ')) return 7.25;

    return 15.00; // Default minimum wage for unspecified states
  };

  const [formData, setFormData] = useState({
    // NEW: NDA Step (Step 1)
    nda_acknowledged: false,
    nda_signed_by: "",
    nda_signature_date: "",
    nda_signature_time: "",
    nda_signature_image: "", // NEW: Store the signature image data

    // Contract Data (now Step 2)
    contract_review_notes: "",
    contract_acknowledged: false,
    contract_va_fee_acknowledged: false,
    contract_review_time: 0,

    // Business Identity (now Step 3)
    legal_name: "",
    dba: "",
    tax_id: "",
    business_type: "",
    primary_contact_name: "",
    primary_contact_email: "",
    primary_contact_phone: "",
    billing_address: "",
    service_address: "",
    same_as_billing: false, // This now means "billing address is same as service address"
    total_employees: "",
    has_software: "",
    software_name: "",
    software_type: "",

    // Documents (now Step 4)
    w9_file: null,
    coi_file: null,
    sos_file: null,
    w9_url: "",
    coi_url: "",
    sos_url: "",
    background_check_attestation: false,
    i9_compliance_attestation: false,
    legal_compliance_attestation: false,

    // Service Coverage (now Step 5)
    coverage_regions: [],
    selected_states: [],
    selected_cities: {},

    // Rate Proposals (now Step 6)
    rate_proposals: [],
    default_location: ""
  });

  const [uploadingDoc, setUploadingDoc] = useState(null);
  const [validatingDoc, setValidatingDoc] = useState(null);
  const [docValidation, setDocValidation] = useState({
    w9: null,
    coi: null,
    sos: null,
    // contract: null, // Removed for contract upload status
  });
  const [showAIInsights, setShowAIInsights] = useState(false);
  const [aiInsights, setAiInsights] = useState(null);

  // Get invite data from URL
  const urlParams = new URLSearchParams(window.location.search);
  const inviteCode = urlParams.get('invite');

  const { data: invite } = useQuery({
    queryKey: ['vendor-invite', inviteCode],
    queryFn: async () => {
      if (!inviteCode) return null;
      const invites = await base44.entities.VendorInvite.filter({ invite_code: inviteCode });
      return invites[0];
    },
    enabled: !!inviteCode
  });

  // Pre-fill data from invite
  useEffect(() => {
    if (invite) {
      setFormData(prev => ({
        ...prev,
        legal_name: invite.company_name || "",
        primary_contact_name: invite.primary_contact_name || "",
        primary_contact_email: invite.primary_contact_email || ""
      }));
    }
  }, [invite]);


  const steps = [
    { number: 0, title: "Welcome", icon: Sparkles, subtitle: "Let's get started" },
    { number: 1, title: "NDA & Trust", icon: Shield, subtitle: "Sign and accept agreement" },
    { number: 2, title: "Foodbuy Contract", icon: FileText, subtitle: "Review & acknowledge terms" },
    { number: 3, title: "Business Identity", icon: Building2, subtitle: "Let's set your stage" },
    { number: 4, title: "Documents & Validation", icon: Shield, subtitle: "Compliance essentials" },
    { number: 5, title: "Service Coverage", icon: MapPin, subtitle: "Where you operate" },
    { number: 6, title: "Rate Proposals", icon: DollarSign, subtitle: "Competitive pricing" },
    { number: 7, title: "AI Intelligence", icon: Sparkles, subtitle: "Market insights" }
  ];

  const progressPercentage = currentStep === 0 ? 0 : ((currentStep - 1) / (steps.length - 2)) * 100;

  // Upload document
  const handleFileUpload = async (file, docType) => {
    if (!file) return;

    setUploadingDoc(docType);
    try {
      // Upload file
      const { file_url } = await base44.integrations.Core.UploadFile({ file });

      setFormData(prev => ({
        ...prev,
        [`${docType}_url`]: file_url,
        [`${docType}_file`]: file
      }));

      // For contract, the logic has been removed as it's handled by DocumentViewer
      // and AI analysis of an uploaded contract is no longer directly here.

      // Validate document with AI
      setValidatingDoc(docType);
      const validation = await validateDocument(file_url, docType);

      setDocValidation(prev => ({
        ...prev,
        [docType]: validation
      }));

      toast({
        title: "Document Uploaded",
        description: validation.isValid ? "✅ Document validated successfully" : "⚠️ Please review validation notes",
      });
    } catch (error) {
      toast({
        title: "Upload Failed",
        description: error.message,
        variant: "destructive"
      });
    } finally {
      setUploadingDoc(null);
      setValidatingDoc(null);
    }
  };

  // Validate document with AI
  const validateDocument = async (fileUrl, docType) => {
    const prompts = {
      w9: "Analyze this W-9 tax form and verify: 1) Business name is filled 2) Tax ID is present 3) Business entity type is checked 4) Signature is present. Return validation results.",
      coi: "Analyze this Certificate of Insurance and verify: 1) General liability coverage is present 2) Coverage amount meets $1M minimum 3) Policy is not expired 4) KROW or client is listed as additional insured. Return validation results.",
      sos: "Analyze this Secretary of State certificate and verify: 1) Business is actively registered 2) Registration is current/not expired 3) Business name matches application 4) State of registration. Return validation results."
    };

    try {
      const analysis = await base44.integrations.Core.InvokeLLM({
        prompt: prompts[docType],
        file_urls: [fileUrl],
        response_json_schema: {
          type: "object",
          properties: {
            isValid: { type: "boolean" },
            businessName: { type: "string" },
            expiryDate: { type: "string" },
            registrationState: { type: "string" },
            issues: { type: "array", items: { type: "string" } },
            notes: { type: "string" }
          }
        }
      });

      return analysis;
    } catch (error) {
      return {
        isValid: false,
        issues: ["Unable to validate document automatically"],
        notes: "Manual review required"
      };
    }
  };

  // Generate AI rate suggestions - This function remains but its direct UI trigger in Step 4 is removed
  const generateAIRates = async () => {
    setGeneratingRates(true);
    try {
      const response = await base44.integrations.Core.InvokeLLM({
        prompt: `
          Generate competitive rate proposals for ${formData.legal_name}.
          Business Type: ${formData.business_type}
          Service Regions: ${Object.values(formData.selected_cities).flat().map(city => city).join(", ")}
          Total Employees: ${formData.total_employees}
          Software Type: ${formData.software_type}

          Provide 10-15 common staffing roles with competitive rates for the hospitality/event industry.
          Consider regional market rates and vendor's operational efficiency.

          For each role, provide:
          - Role name
          - Category (Kitchen and Culinary, Concessions, Facilities, Bartending, Security, Event Staff, Management)
          - Employee wage (competitive market rate)
          - Suggested markup percentage (18-25% based on role complexity)
          - Calculated client rate
        `,
        add_context_from_internet: true,
        response_json_schema: {
          type: "object",
          properties: {
            roles: {
              type: "array",
              items: {
                type: "object",
                properties: {
                  role_name: { type: "string" },
                  category: { type: "string" },
                  employee_wage: { type: "number" },
                  markup_percentage: { type: "number" },
                  client_rate: { type: "number" },
                  market_comparison: { type: "string" }
                }
              }
            }
          }
        }
      });

      if (response?.roles) {
        setFormData(prev => ({
          ...prev,
          rate_proposals: response.roles
        }));

        toast({
          title: "Rates Generated",
          description: `${response.roles.length} competitive rates suggested`,
        });
      }
    } catch (error) {
      toast({
        title: "Generation Failed",
        description: error.message,
        variant: "destructive"
      });
    } finally {
      setGeneratingRates(null);
    }
  };

  // Generate AI insights
  const generateAIInsights = async () => {
    try {
      const insights = await base44.integrations.Core.InvokeLLM({
        prompt: `
          Analyze this vendor application and provide strategic insights:

          Vendor: ${formData.legal_name}
          Business Type: ${formData.business_type}
          Total Employees: ${formData.total_employees}
          Software: ${formData.software_name || formData.software_type}
          Service Areas: ${Object.values(formData.selected_cities).flat().map(city => city).join(", ")}
          Rate Proposals: ${formData.rate_proposals.length} roles

          Provide:
          1. Competitive positioning (1-5 stars)
          2. Market alignment assessment
          3. Pricing competitiveness
          4. Operational readiness score
          5. Recommended focus areas
          6. Potential challenges
        `,
        add_context_from_internet: true,
        response_json_schema: {
          type: "object",
          properties: {
            overall_score: { type: "number" },
            competitive_position: { type: "string" },
            market_alignment: { type: "string" },
            pricing_analysis: { type: "string" },
            operational_readiness: { type: "string" },
            strengths: { type: "array", items: { type: "string" } },
            recommendations: { type: "array", items: { type: "string" } },
            potential_challenges: { type: "array", items: { type: "string" } }
          }
        }
      });

      setAiInsights(insights);
      setShowAIInsights(true);
    } catch (error) {
      toast({
        title: "Analysis Failed",
        description: error.message,
        variant: "destructive"
      });
    }
  };

  // US States and Major Cities Data
  const usLocationData = {
    "Alabama": ["Birmingham", "Montgomery", "Mobile", "Huntsville"],
    "Alaska": ["Anchorage", "Fairbanks", "Juneau"],
    "Arizona": ["Phoenix", "Tucson", "Mesa", "Scottsdale", "Chandler"],
    "Arkansas": ["Little Rock", "Fort Smith", "Fayetteville"],
    "California": ["Los Angeles", "San Francisco", "San Diego", "San Jose", "Sacramento", "Oakland", "Fresno", "Long Beach", "Anaheim", "Bakersfield"],
    "Colorado": ["Denver", "Colorado Springs", "Aurora", "Boulder", "Fort Collins"],
    "Connecticut": ["Hartford", "New Haven", "Stamford", "Bridgeport"],
    "Delaware": ["Wilmington", "Dover", "Newark"],
    "Florida": ["Miami", "Orlando", "Tampa", "Jacksonville", "Fort Lauderdale", "West Palm Beach"],
    "Georgia": ["Atlanta", "Savannah", "Augusta", "Columbus", "Macon"],
    "Hawaii": ["Honolulu", "Hilo", "Kailua"],
    "Idaho": ["Boise", "Meridian", "Nampa"],
    "Illinois": ["Chicago", "Aurora", "Naperville", "Rockford", "Joliet"],
    "Indiana": ["Indianapolis", "Fort Wayne", "Evansville", "South Bend"],
    "Iowa": ["Des Moines", "Cedar Rapids", "Davenport"],
    "Kansas": ["Wichita", "Overland Park", "Kansas City", "Topeka"],
    "Kentucky": ["Louisville", "Lexington", "Bowling Green"],
    "Louisiana": ["New Orleans", "Baton Rouge", "Shreveport", "Lafayette"],
    "Maine": ["Portland", "Lewiston", "Bangor"],
    "Maryland": ["Baltimore", "Columbia", "Germantown", "Silver Spring"],
    "Massachusetts": ["Boston", "Worcester", "Springfield", "Cambridge", "Lowell"],
    "Michigan": ["Detroit", "Grand Rapids", "Warren", "Sterling Heights", "Ann Arbor"],
    "Minnesota": ["Minneapolis", "St. Paul", "Rochester", "Duluth"],
    "Mississippi": ["Jackson", "Gulfport", "Southaven"],
    "Missouri": ["Kansas City", "St. Louis", "Springfield", "Columbia"],
    "Montana": ["Billings", "Missoula", "Great Falls"],
    "Nebraska": ["Omaha", "Lincoln", "Bellevue"],
    "Nevada": ["Las Vegas", "Henderson", "Reno", "North Las Vegas"],
    "New Hampshire": ["Manchester", "Nashua", "Concord"],
    "New Jersey": ["Newark", "Jersey City", "Paterson", "Elizabeth", "Edison"],
    "New Mexico": ["Albuquerque", "Las Cruces", "Rio Rancho", "Santa Fe"],
    "New York": ["New York City", "Buffalo", "Rochester", "Yonkers", "Syracuse", "Albany"],
    "North Carolina": ["Charlotte", "Raleigh", "Greensboro", "Durham", "Winston-Salem"],
    "North Dakota": ["Fargo", "Bismarck", "Grand Forks"],
    "Ohio": ["Columbus", "Cleveland", "Cincinnati", "Toledo", "Akron"],
    "Oklahoma": ["Oklahoma City", "Tulsa", "Norman"],
    "Oregon": ["Portland", "Salem", "Eugene", "Gresham"],
    "Pennsylvania": ["Philadelphia", "Pittsburgh", "Allentown", "Erie", "Reading"],
    "Rhode Island": ["Providence", "Warwick", "Cranston"],
    "South Carolina": ["Charleston", "Columbia", "North Charleston", "Mount Pleasant"],
    "South Dakota": ["Sioux Falls", "Rapid City", "Aberdeen"],
    "Tennessee": ["Nashville", "Memphis", "Knoxville", "Chattanooga"],
    "Texas": ["Houston", "San Antonio", "Dallas", "Austin", "Fort Worth", "El Paso", "Arlington", "Corpus Christi"],
    "Utah": ["Salt Lake City", "West Valley City", "Provo", "West Jordan"],
    "Vermont": ["Burlington", "South Burlington", "Rutland"],
    "Virginia": ["Virginia Beach", "Norfolk", "Chesapeake", "Richmond", "Newport News"],
    "Washington": ["Seattle", "Spokane", "Tacoma", "Vancouver", "Bellevue"],
    "West Virginia": ["Charleston", "Huntington", "Morgantown"],
    "Wisconsin": ["Milwaukee", "Madison", "Green Bay", "Kenosha"],
    "Wyoming": ["Cheyenne", "Casper", "Laramie"]
  };

  // Submit vendor application - UPDATED
  const submitApplicationMutation = useMutation({
    mutationFn: async () => {
      // Generate vendor number
      const vendorNumber = `VN-${Math.floor(1000 + Math.random() * 9000)}`;

      // Build coverage regions from selected cities
      const coverageRegionsList = [];
      Object.keys(formData.selected_cities).forEach(state => {
        formData.selected_cities[state].forEach(city => {
          coverageRegionsList.push(`${city}, ${state}`);
        });
      });

      // Create vendor record
      const vendor = await base44.entities.Vendor.create({
        vendor_number: vendorNumber,
        legal_name: formData.legal_name,
        doing_business_as: formData.dba,
        tax_id: formData.tax_id,
        business_type: formData.business_type,
        primary_contact_name: formData.primary_contact_name,
        primary_contact_email: formData.primary_contact_email,
        primary_contact_phone: formData.primary_contact_phone,
        // Updated logic for billing_address and service_address based on new flow
        service_address: formData.service_address,
        billing_address: formData.same_as_billing ? formData.service_address : formData.billing_address,
        coverage_regions: coverageRegionsList,
        w9_document: formData.w9_url,
        coi_document: formData.coi_url,
        insurance_certificate: formData.coi_url,
        approval_status: "pending",
        is_active: false,
        // Updated contract note to reflect review not upload
        notes: `Total Employees: ${formData.total_employees}, Software: ${formData.software_name || formData.software_type}, SOS: ${formData.sos_url ? 'Verified' : 'Pending'}, Contract: ${formData.contract_acknowledged ? 'Acknowledged' : 'Not Acknowledged'}. Contract Review Notes: ${formData.contract_review_notes}. NDA Signed: ${formData.nda_acknowledged ? 'Yes' : 'No'}`
      });

      // Create rate proposals with location-specific rates
      const vendorFee = invite?.vendor_admin_fee || 12;

      await Promise.all(
        formData.rate_proposals
          .filter(rate => rate.is_active)
          .map(rate =>
            base44.entities.VendorRate.create({
              vendor_id: vendor.id,
              vendor_name: formData.legal_name,
              category: rate.category,
              role_name: rate.role_name,
              employee_wage: rate.employee_wage,
              markup_percentage: rate.markup_percentage,
              vendor_fee_percentage: vendorFee,
              client_rate: rate.client_rate,
              is_active: true,
              ai_analysis: rate.ai_analysis,
              is_custom: rate.is_custom,
              notes: rate.location_rates ? JSON.stringify(rate.location_rates) : null
            })
          )
      );

      // Update invite status if exists
      if (invite) {
        await base44.entities.VendorInvite.update(invite.id, {
          invite_status: "completed",
          vendor_id: vendor.id,
          invite_accepted_date: new Date().toISOString()
        });
      }

      // Send confirmation email
      await base44.integrations.Core.SendEmail({
        from_name: "KROW Platform",
        to: formData.primary_contact_email,
        subject: "Vendor Application Received - Under Review",
        body: `
          <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
            <h2>Application Received Successfully!</h2>
            <p>Dear ${formData.primary_contact_name},</p>
            <p>Thank you for completing your vendor application with KROW.</p>
            <div style="background: #f0f9ff; padding: 20px; border-radius: 8px; margin: 20px 0;">
              <p style="margin: 0;"><strong>Application Summary:</strong></p>
              <p style="margin: 8px 0;">Vendor Number: <strong>${vendorNumber}</strong></p>
              <p style="margin: 8px 0;">Company: <strong>${formData.legal_name}</strong></p>
              <p style="margin: 8px 0;">Status: <strong>Under Review</strong></p>
            </div>
            <p>Our procurement team will review your application and get back to you within 2-3 business days.</p>
            <p>Best regards,<br>KROW Team</p>
          </div>
        `
      });

      return vendor;
    },
    onSuccess: (vendor) => {
      toast({
        title: "Application Submitted!",
        description: "You'll hear from us within 2-3 business days",
      });
      navigate(createPageUrl("VendorManagement"));
    },
    onError: (error) => {
      toast({
        title: "Submission Failed",
        description: error.message,
        variant: "destructive"
      });
    }
  });

  const handleNext = () => {
    // Step 0: Welcome (no validation, just go to next step)
    if (currentStep === 0) {
      setCurrentStep(1);
      return;
    }

    // Step 1: NDA
    if (currentStep === 1) {
      if (!formData.nda_acknowledged) {
        toast({
          title: "NDA Required",
          description: "You must sign and accept the NDA before proceeding",
          variant: "destructive"
        });
        return;
      }
    }

    // Step 2: Foodbuy Contract
    if (currentStep === 2) {
      if (!formData.contract_acknowledged || !formData.contract_va_fee_acknowledged) {
        toast({
          title: "Contract Review Required",
          description: "Please acknowledge all terms to proceed",
          variant: "destructive"
        });
        return;
      }
    }

    // Step 3: Business Identity
    if (currentStep === 3) {
      if (!formData.legal_name || !formData.tax_id || !formData.business_type ||
        !formData.primary_contact_name || !formData.primary_contact_email ||
        !formData.service_address || !formData.total_employees ||
        (formData.has_software === "yes" && (!formData.software_type || !formData.software_name))) {
        toast({
          title: "Missing Information",
          description: "Please fill in all required fields",
          variant: "destructive"
        });
        return;
      }
    }

    // Step 4: Documents
    if (currentStep === 4) {
      const isSosValidated = (docValidation.sos?.autoVerified && docValidation.sos.isRegistered && (docValidation.sos.registrationStatus === 'Active' || docValidation.sos.registrationStatus === 'Good Standing')) || (docValidation.sos && docValidation.sos.isValid);

      if (!formData.w9_url || !formData.coi_url || !isSosValidated) {
        toast({
          title: "Missing Documents",
          description: "Please upload W-9, COI, and verify/upload Secretary of State certificate",
          variant: "destructive"
        });
        return;
      }

      // NEW: Validate compliance attestations
      if (!formData.background_check_attestation || !formData.i9_compliance_attestation || !formData.legal_compliance_attestation) {
        toast({
          title: "Compliance Attestation Required",
          description: "Please confirm all compliance attestations to proceed",
          variant: "destructive"
        });
        return;
      }
    }

    // Step 5: Service Coverage
    if (currentStep === 5) {
      const totalCities = Object.values(formData.selected_cities).reduce((sum, cities) => sum + cities.length, 0);
      if (totalCities === 0) {
        toast({
          title: "No Coverage Selected",
          description: "Please select at least one city/location you can service",
          variant: "destructive"
        });
        return;
      }
    }

    // Step 6: Rate Proposals
    if (currentStep === 6) {
      const activeRates = formData.rate_proposals.filter(rate => rate.is_active);
      if (activeRates.length === 0) {
        toast({
          title: "No Active Rate Proposals",
          description: "Please activate at least one rate proposal.",
          variant: "destructive"
        });
        return;
      }

      const hasInvalidRates = activeRates.some(rate =>
        !rate.role_name || !rate.category || rate.employee_wage <= 0 || rate.markup_percentage <= 0 || rate.client_rate <= 0
      );
      if (hasInvalidRates) {
        toast({
          title: "Incomplete Rate Proposals",
          description: "Please ensure all active rate proposals have valid employee wages and markups.",
          variant: "destructive"
        });
        return;
      }
    }


    if (currentStep < steps.length - 1) {
      setCurrentStep(prev => prev + 1);
    }
  };

  const handleBack = () => {
    if (currentStep > 0) {
      setCurrentStep(prev => prev - 1);
    }
  };

  const handleSubmit = () => {
    submitApplicationMutation.mutate();
  };

  // Update handleSignNDA to handle signature data from DocumentViewer
  const handleSignNDA = (acknowledgmentData) => {
    const now = new Date();
    setFormData(prev => ({
      ...prev,
      nda_acknowledged: true,
      nda_signed_by: acknowledgmentData.signerName || invite?.primary_contact_name || prev.primary_contact_name || "Vendor",
      nda_signature_date: now.toLocaleDateString(),
      nda_signature_time: now.toLocaleTimeString(),
      nda_signature_image: acknowledgmentData.signature || "" // Store the signature image
    }));
    toast({
      title: "✅ NDA Signed",
      description: `Signed on ${now.toLocaleString()}`,
    });
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 py-8 px-4">
      <div className="max-w-5xl mx-auto">
        {/* STEP 0: Welcome Screen */}
        {currentStep === 0 && (
          <Card className="border-2 border-[#0A39DF]/20 shadow-2xl">
            <CardContent className="p-12">
              <div className="text-center space-y-6">
                {/* Logo - KROW LOGO */}
                <div className="flex justify-center mb-6">
                  <div className="w-32 h-32 bg-gradient-to-r from-[#0A39DF] to-[#1C323E] rounded-full flex items-center justify-center shadow-xl p-6">
                    <img
                      src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68fc6cf01386035c266e7a5d/3ba390829_KROWlogo.png"
                      alt="KROW Logo"
                      className="w-full h-full object-contain"
                    />
                  </div>
                </div>

                {/* Welcome Message */}
                <div>
                  <h1 className="text-4xl font-bold bg-gradient-to-r from-[#0A39DF] to-[#1C323E] bg-clip-text text-transparent mb-4">
                    Welcome to KROW
                  </h1>
                  <p className="text-xl text-slate-600 leading-relaxed max-w-2xl mx-auto">
                    The Workforce Control Tower that connects you to the most trusted procurement and operator network.
                  </p>
                  <p className="text-lg text-slate-500 mt-4">
                    Let's begin your onboarding journey, it'll take just a few minutes to get your company fully connected.
                  </p>
                </div>

                {/* Progress indicator */}
                <div className="pt-8">
                  <div className="flex items-center justify-center gap-2 mb-4">
                    <div className="w-full max-w-md bg-slate-200 h-3 rounded-full overflow-hidden">
                      <div
                        className="h-full bg-gradient-to-r from-[#0A39DF] to-[#1C323E] transition-all duration-500"
                        style={{ width: '0%' }}
                      />
                    </div>
                    <span className="text-sm font-semibold text-slate-600 whitespace-nowrap">0% Complete</span>
                  </div>
                  <p className="text-sm text-slate-500">Step 1 of 8: NDA & Trust Agreement</p>
                </div>

                {/* Start Button */}
                <Button
                  onClick={handleNext}
                  className="mt-8 bg-gradient-to-r from-[#0A39DF] to-[#1C323E] hover:from-[#0A39DF]/90 hover:to-[#1C323E]/90 text-white px-12 py-6 text-lg font-bold shadow-xl"
                >
                  Start Onboarding
                  <ArrowRight className="w-5 h-5 ml-2" />
                </Button>

                {invite && (
                  <Badge className="mt-6 bg-green-100 text-green-700 px-4 py-2">
                    ✅ Invited by {invite.invited_by}
                  </Badge>
                )}
              </div>
            </CardContent>
          </Card>
        )}

        {/* Steps 1-7: Show header and progress only if not on welcome screen */}
        {currentStep > 0 && (
          <>
            {/* Header */}
            <div className="text-center mb-8">
              <div className="flex items-center justify-center gap-2 mb-4">
                <img
                  src="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68fc6cf01386035c266e7a5d/3ba390829_KROWlogo.png"
                  alt="KROW Logo"
                  className="w-8 h-8"
                />
                <h1 className="text-4xl font-bold bg-gradient-to-r from-[#0A39DF] to-[#1C323E] bg-clip-text text-transparent">
                  Smart Vendor Onboarding
                </h1>
              </div>
              <p className="text-slate-600">Real-time market analysis • Predictive scoring • Instant validation</p>
              {invite && (
                <Badge className="mt-2 bg-green-100 text-green-700">
                  ✅ Invited by {invite.invited_by}
                </Badge>
              )}
            </div>

            {/* Progress Bar */}
            <Card className="mb-6 border-2 border-[#0A39DF]/20">
              <CardContent className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <p className="text-sm font-semibold text-slate-700">Step {currentStep} of {steps.length - 1}</p>
                  <p className="text-sm font-semibold text-[#0A39DF]">{Math.round(progressPercentage)}% Complete</p>
                </div>
                <Progress value={progressPercentage} className="h-3 mb-6" />

                {/* Step indicators */}
                <div className="grid grid-cols-7 gap-2">
                  {steps.slice(1).map((step) => {
                    const Icon = step.icon;
                    const isActive = currentStep === step.number;
                    const isComplete = currentStep > step.number;

                    return (
                      <button
                        key={step.number}
                        onClick={() => setCurrentStep(step.number)}
                        className={`p-3 rounded-lg text-center transition-all ${
                          isActive
                            ? 'bg-[#0A39DF] text-white shadow-lg scale-105'
                            : isComplete
                              ? 'bg-green-100 text-green-700'
                              : 'bg-slate-100 text-slate-400'
                          }`}
                      >
                        <Icon className="w-5 h-5 mx-auto mb-1" />
                        <p className="text-xs font-medium truncate">{step.title}</p>
                      </button>
                    );
                  })}
                </div>
              </CardContent>
            </Card>
          </>
        )}

        {/* STEP 1: NDA & Trust Agreement */}
        {currentStep === 1 && (
          <Card className="border-2 border-slate-200">
            <CardHeader className="bg-gradient-to-r from-purple-50 to-indigo-50 border-b">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-xl flex items-center justify-center">
                  <Shield className="w-6 h-6 text-white" />
                </div>
                <div>
                  <CardTitle className="text-2xl">NDA & Trust Agreement</CardTitle>
                  <p className="text-sm text-slate-600 mt-1">Sign and accept - Date and time will be recorded</p>
                </div>
              </div>
            </CardHeader>
            <CardContent className="p-6 space-y-6">
              {/* NDA Document Viewer */}
              <DocumentViewer
                documentUrl="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68fc6cf01386035c266e7a5d/187424574_LegendaryEventStaffingFOODBUYVendorNDA.pdf"
                documentName="Confidentiality & Non-Disclosure Agreement"
                documentType="NDA"
                onAcknowledge={handleSignNDA}
                initialNotes=""
                isAcknowledged={formData.nda_acknowledged}
                timeSpent={0}
              />

              {/* Warning if not signed */}
              {!formData.nda_acknowledged && (
                <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg flex items-start gap-2">
                  <AlertCircle className="w-5 h-5 text-purple-600 mt-0.5 flex-shrink-0" />
                  <p className="text-sm text-purple-800">
                    You must review and sign the NDA to proceed with onboarding
                  </p>
                </div>
              )}

              {/* Success message if signed - NOW WITH SIGNATURE IMAGE */}
              {formData.nda_acknowledged && (
                <div className="p-6 bg-green-50 border-2 border-green-300 rounded-xl">
                  <div className="text-center">
                    <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Check className="w-10 h-10 text-white" />
                    </div>
                    <h4 className="text-xl font-bold text-green-900 mb-3">✅ NDA Signed Successfully</h4>

                    {/* Signature and Details Card */}
                    <div className="bg-white p-6 rounded-lg border-2 border-green-300 max-w-md mx-auto">
                      {/* Signer Name */}
                      <div className="mb-4">
                        <p className="text-xs text-slate-500 uppercase tracking-wide mb-1">Signed by:</p>
                        <p className="text-lg font-bold text-slate-900">{formData.nda_signed_by}</p>
                      </div>

                      {/* Signature Image */}
                      {formData.nda_signature_image && (
                        <div className="mb-4 p-4 bg-slate-50 rounded-lg border-2 border-slate-300">
                          <p className="text-xs text-slate-500 uppercase tracking-wide mb-2">Digital Signature:</p>
                          <img
                            src={formData.nda_signature_image}
                            alt="Signature"
                            className="w-full h-24 object-contain bg-white rounded border border-slate-300"
                          />
                        </div>
                      )}

                      {/* Date and Time */}
                      <div className="space-y-2 text-left text-sm border-t border-slate-200 pt-4">
                        <div className="flex justify-between">
                          <span className="font-semibold text-slate-700">Date:</span>
                          <span className="text-slate-900">{formData.nda_signature_date}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-semibold text-slate-700">Time:</span>
                          <span className="text-slate-900">{formData.nda_signature_time}</span>
                        </div>
                      </div>
                    </div>

                    <p className="text-green-700 mt-4 font-semibold">
                      ✓ You may now proceed to the next step
                    </p>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* STEP 2: Foodbuy Contract Review (was Step 1) */}
        {currentStep === 2 && (
          <Card className="border-2 border-slate-200">
            <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl flex items-center justify-center">
                  <FileText className="w-6 h-6 text-white" />
                </div>
                <div>
                  <CardTitle className="text-2xl">Foodbuy Contract Review</CardTitle>
                  <p className="text-sm text-slate-600 mt-1">Please review the terms before proceeding</p>
                </div>
              </div>
            </CardHeader>
            <CardContent className="p-6 space-y-6">
              {/* Contract Document Viewer */}
              <DocumentViewer
                documentUrl="https://qtrypzzcjebvfcihiynt.supabase.co/storage/v1/object/public/base44-prod/public/68fc6cf01386035c266e7a5d/2c22905a2_FoodbuyDraftContract.pdf"
                documentName="Foodbuy Temporary Staffing Agreement"
                documentType="Contract"
                onAcknowledge={(acknowledgmentData) => {
                  setFormData(prev => ({
                    ...prev,
                    contract_review_notes: acknowledgmentData.notes || prev.contract_review_notes,
                    contract_review_time: acknowledgmentData.reviewTime || prev.contract_review_time,
                    contract_acknowledged: true
                  }));
                }}
                initialNotes={formData.contract_review_notes}
                isAcknowledged={formData.contract_acknowledged}
                timeSpent={formData.contract_review_time}
              />

              {/* Performance Requirements & VA Fee Structure Breakdown */}
              <div className="mt-6 space-y-4">
                <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl border-2 border-blue-200">
                  <h3 className="text-lg font-bold text-[#1C323E] mb-4 flex items-center gap-2">
                    <Target className="w-6 h-6 text-blue-600" />
                    Performance Requirements & Service Standards
                  </h3>

                  {/* Fill Rate & KPIs */}
                  <div className="bg-white rounded-lg p-5 mb-4 shadow-sm border border-blue-100">
                    <h4 className="font-semibold text-[#1C323E] mb-3 flex items-center gap-2">
                      <TrendingUp className="w-5 h-5 text-green-600" />
                      Key Performance Indicators (KPIs)
                    </h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="text-sm font-medium text-slate-700">Fill Rate Target</span>
                        <Badge className="bg-green-100 text-green-700 font-bold">≥ 95%</Badge>
                      </div>
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="text-sm font-medium text-slate-700">On-Time Arrival</span>
                        <Badge className="bg-green-100 text-green-700 font-bold">≥ 98%</Badge>
                      </div>
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="text-sm font-medium text-slate-700">Client Satisfaction (CSAT)</span>
                        <Badge className="bg-green-100 text-green-700 font-bold">≥ 4.5/5.0</Badge>
                      </div>
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="text-sm font-medium text-slate-700">Cancellation Rate</span>
                        <Badge className="bg-amber-100 text-amber-700 font-bold">≤ 3%</Badge>
                      </div>
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="text-sm font-medium text-slate-700">No-Show Rate</span>
                        <Badge className="bg-amber-100 text-amber-700 font-bold">≤ 1%</Badge>
                      </div>
                      <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                        <span className="text-sm font-medium text-slate-700">Response Time</span>
                        <Badge className="bg-blue-100 text-blue-700 font-bold">≤ 2 hours</Badge>
                      </div>
                    </div>
                  </div>

                  {/* Compliance & Attestations */}
                  <div className="bg-white rounded-lg p-5 mb-4 shadow-sm border border-blue-100">
                    <h4 className="font-semibold text-[#1C323E] mb-3 flex items-center gap-2">
                      <Shield className="w-5 h-5 text-purple-600" />
                      Compliance & Attestation Requirements
                    </h4>
                    <div className="space-y-3">
                      <div className="flex items-start gap-3 p-3 bg-green-50 rounded-lg border border-green-200">
                        <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="text-sm font-semibold text-green-900">Background Check Compliance</p>
                          <p className="text-xs text-green-700 mt-1">All employees must have valid background checks per federal and state requirements</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3 p-3 bg-green-50 rounded-lg border border-green-200">
                        <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="text-sm font-semibold text-green-900">I-9 Employment Eligibility</p>
                          <p className="text-xs text-green-700 mt-1">Maintain complete and valid I-9 forms for all employees with proper documentation</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3 p-3 bg-green-50 rounded-lg border border-green-200">
                        <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="text-sm font-semibold text-green-900">Insurance & Liability Coverage</p>
                          <p className="text-xs text-green-700 mt-1">General liability insurance minimum $1M, Workers' Compensation as required by law</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3 p-3 bg-green-50 rounded-lg border border-green-200">
                        <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="text-sm font-semibold text-green-900">Legal & Regulatory Compliance</p>
                          <p className="text-xs text-green-700 mt-1">Comply with all federal, state, and local employment laws including wage & hour, safety, and anti-discrimination</p>
                        </div>
                      </div>
                      <div className="flex items-start gap-3 p-3 bg-green-50 rounded-lg border border-green-200">
                        <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                        <div>
                          <p className="text-sm font-semibold text-green-900">Tax & Payroll Compliance</p>
                          <p className="text-xs text-green-700 mt-1">Proper W-9 on file, accurate tax withholding, and timely payment of all employment taxes</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* VA Fee Structure */}
                  <div className="bg-white rounded-lg p-5 shadow-sm border border-blue-100">
                    <h4 className="font-semibold text-[#1C323E] mb-3 flex items-center gap-2">
                      <DollarSign className="w-5 h-5 text-purple-600" />
                      Vendor Fee Structure
                    </h4>
                    <div className="space-y-3">
                      <div className="p-4 bg-purple-50 rounded-lg border-2 border-purple-200">
                        <div className="flex items-center justify-between mb-2">
                          <span className="text-sm font-medium text-purple-900">Vendor Fee</span>
                          <Badge className="bg-purple-600 text-white text-lg font-bold px-4 py-1">
                            {invite?.vendor_admin_fee || 12}%
                          </Badge>
                        </div>
                        <p className="text-xs text-purple-700">
                          Cost of doing business with Foodbuy as your partner
                        </p>
                      </div>

                      <div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
                        <h5 className="text-sm font-semibold text-[#1C323E] mb-3">Fee Calculation Example</h5>
                        <div className="space-y-2 text-sm">
                          <div className="flex justify-between">
                            <span className="text-slate-600">Employee Wage</span>
                            <span className="font-semibold">$18.50/hr</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-slate-600">Your Markup (20%)</span>
                            <span className="font-semibold text-blue-600">+$3.70/hr</span>
                          </div>
                          <div className="flex justify-between pt-2 border-t border-slate-300">
                            <span className="text-slate-700 font-medium">Bill Rate (to client)</span>
                            <span className="font-semibold">$22.20/hr</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-slate-600">Vendor Fee ({invite?.vendor_admin_fee || 12}%)</span>
                            <span className="font-semibold text-red-600">-${((22.20 * (invite?.vendor_admin_fee || 12)) / 100).toFixed(2)}/hr</span>
                          </div>
                          <div className="flex justify-between pt-2 border-t-2 border-slate-400">
                            <span className="text-[#1C323E] font-bold">You Receive</span>
                            <span className="font-bold text-green-600 text-lg">${(22.20 - (22.20 * (invite?.vendor_admin_fee || 12) / 100)).toFixed(2)}/hr</span>
                          </div>
                        </div>
                      </div>
                      <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
                        <p className="text-xs text-blue-900">
                          <strong>💡 What the Vendor Fee Covers:</strong> Platform access, procurement management, client relationships, compliance oversight, payment processing, insurance coordination, and KROW system support.
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Acknowledgment Checkbox */}
                <div className="bg-slate-50 p-6 rounded-lg border-2 border-slate-200">
                  <div className="flex items-start gap-3">
                    <Checkbox
                      id="contract_va_fee_acknowledged"
                      checked={formData.contract_va_fee_acknowledged}
                      onCheckedChange={(checked) => setFormData(prev => ({ ...prev, contract_va_fee_acknowledged: checked }))}
                      className="mt-1 data-[state=checked]:bg-[#0A39DF] data-[state=checked]:border-[#0A39DF]"
                    />
                    <div className="flex-1">
                      <Label htmlFor="contract_va_fee_acknowledged" className="font-semibold cursor-pointer text-base">
                        I understand the performance requirements and vendor fee structure <span className="text-red-500">*</span>
                      </Label>
                      <p className="text-sm text-slate-600 mt-1">
                        Including the {invite?.vendor_admin_fee || 12}% vendor fee and service standards outlined above
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {(!formData.contract_acknowledged || !formData.contract_va_fee_acknowledged) && (
                <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg flex items-start gap-2">
                  <AlertCircle className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <p className="text-sm text-blue-800">
                    You must review and acknowledge the contract terms to proceed with onboarding
                  </p>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* STEP 3: Business Identity (was Step 2) */}
        {currentStep === 3 && (
          <Card className="border-2 border-slate-200">
            <CardHeader className="bg-gradient-to-r from-slate-50 to-blue-50 border-b">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-[#0A39DF] rounded-xl flex items-center justify-center">
                  <Building2 className="w-6 h-6 text-white" />
                </div>
                <div>
                  <CardTitle className="text-2xl">Business Identity</CardTitle>
                  <p className="text-sm text-slate-600 mt-1">Let's set your stage</p>
                </div>
              </div>
            </CardHeader>
            <CardContent className="p-6 space-y-6">
              {/* Legal Business Name */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="legal_name">
                    Legal Business Name <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="legal_name"
                    value={formData.legal_name}
                    onChange={(e) => setFormData(prev => ({ ...prev, legal_name: e.target.value }))}
                    placeholder="ABC Staffing Solutions LLC"
                    className="mt-2"
                  />
                </div>

                <div>
                  <Label htmlFor="dba">Doing Business As (DBA)</Label>
                  <Input
                    id="dba"
                    value={formData.dba}
                    onChange={(e) => setFormData(prev => ({ ...prev, dba: e.target.value }))}
                    placeholder="ABC Staffing"
                    className="mt-2"
                  />
                </div>
              </div>

              {/* Tax ID & Business Type */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="tax_id">
                    Federal Tax ID / EIN <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="tax_id"
                    value={formData.tax_id}
                    onChange={(e) => setFormData(prev => ({ ...prev, tax_id: e.target.value }))}
                    placeholder="XX-XXXXXXX"
                    className="mt-2"
                  />
                </div>

                <div>
                  <Label htmlFor="business_type">
                    Business Entity <span className="text-red-500">*</span>
                  </Label>
                  <Select value={formData.business_type} onValueChange={(value) => setFormData(prev => ({ ...prev, business_type: value }))}>
                    <SelectTrigger className="mt-2">
                      <SelectValue placeholder="Select entity type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="LLC">LLC</SelectItem>
                      <SelectItem value="Corporation">Corporation</SelectItem>
                      <SelectItem value="Partnership">Partnership</SelectItem>
                      <SelectItem value="Sole Proprietorship">Sole Proprietorship</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              {/* Contact Information */}
              <div className="grid grid-cols-3 gap-4">
                <div>
                  <Label htmlFor="contact_name">
                    Primary Contact Name <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="contact_name"
                    value={formData.primary_contact_name}
                    onChange={(e) => setFormData(prev => ({ ...prev, primary_contact_name: e.target.value }))}
                    placeholder="John Smith"
                    className="mt-2"
                  />
                </div>

                <div>
                  <Label htmlFor="contact_email">
                    Contact Email <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="contact_email"
                    type="email"
                    value={formData.primary_contact_email}
                    onChange={(e) => setFormData(prev => ({ ...prev, primary_contact_email: e.target.value }))}
                    placeholder="john@abcstaffing.com"
                    className="mt-2"
                  />
                </div>

                <div>
                  <Label htmlFor="contact_phone">Contact Phone <span className="text-red-500">*</span></Label>
                  <Input
                    id="contact_phone"
                    value={formData.primary_contact_phone}
                    onChange={(e) => setFormData(prev => ({ ...prev, primary_contact_phone: e.target.value }))}
                    placeholder="(555) 123-4567"
                    className="mt-2"
                  />
                </div>
              </div>

              {/* Google Address Autocomplete - SERVICE ADDRESS FIRST */}
              <div>
                <GoogleAddressInput
                  value={formData.service_address}
                  onChange={(value) => setFormData(prev => ({ ...prev, service_address: value }))}
                  placeholder="123 Main Street, Suite 100, San Francisco, CA 94105"
                  label="Service Address"
                  required
                />
              </div>

              {/* Same as service checkbox */}
              <div className="flex items-center gap-2">
                <Checkbox
                  id="same_as_service"
                  checked={formData.same_as_billing}
                  onCheckedChange={(checked) => setFormData(prev => ({ ...prev, same_as_billing: checked }))}
                  className="data-[state=checked]:bg-[#0A39DF] data-[state=checked]:border-[#0A39DF]"
                />
                <Label htmlFor="same_as_service" className="text-sm cursor-pointer">
                  Billing address is same as service address
                </Label>
              </div>

              {/* Billing Address - only show if checkbox is unchecked */}
              {!formData.same_as_billing && (
                <div>
                  <GoogleAddressInput
                    value={formData.billing_address}
                    onChange={(value) => setFormData(prev => ({ ...prev, billing_address: value }))}
                    placeholder="456 Office Blvd, Oakland, CA 94612"
                    label="Billing Address"
                  />
                </div>
              )}

              {/* NEW FIELDS: Staff Count & Software */}
              <div className="border-t border-slate-200 pt-6 mt-6">
                <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
                  <Users className="w-5 h-5 text-[#0A39DF]" />
                  Operations Information
                </h3>

                <div className="grid grid-cols-2 gap-4">
                  {/* Total Employees */}
                  <div>
                    <Label htmlFor="total_employees">
                      How many staff members do you have? <span className="text-red-500">*</span>
                    </Label>
                    <Input
                      id="total_employees"
                      type="number"
                      value={formData.total_employees}
                      onChange={(e) => setFormData(prev => ({ ...prev, total_employees: e.target.value }))}
                      placeholder="e.g., 250"
                      className="mt-2"
                    />
                    <p className="text-xs text-slate-500 mt-1">Total active workforce members</p>
                  </div>

                  {/* Has Software */}
                  <div>
                    <Label htmlFor="has_software">
                      Do you use operational software? <span className="text-red-500">*</span>
                    </Label>
                    <Select value={formData.has_software} onValueChange={(value) => {
                      setFormData(prev => ({
                        ...prev,
                        has_software: value,
                        software_name: value === "no" ? "traditional" : ""
                      }));
                    }}>
                      <SelectTrigger className="mt-2">
                        <SelectValue placeholder="Select an option" />
                      </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="yes">Yes, we have software</SelectItem>
                        <SelectItem value="no">No, traditional operations</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                {/* Software Details */}
                {formData.has_software === "yes" && (
                  <div className="grid grid-cols-2 gap-4 mt-4">
                    <div>
                      <Label htmlFor="software_type">
                        Software Type <span className="text-red-500">*</span>
                      </Label>
                      <Select value={formData.software_type} onValueChange={(value) => setFormData(prev => ({ ...prev, software_type: value }))}>
                        <SelectTrigger className="mt-2">
                          <SelectValue placeholder="Select type" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="platform">Third-party Platform</SelectItem>
                          <SelectItem value="internal">Internal/Custom System</SelectItem>
                          <SelectItem value="building">Building on KROW</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>

                    <div>
                      <Label htmlFor="software_name">
                        Software/Platform Name <span className="text-red-500">*</span>
                      </Label>
                      <Input
                        id="software_name"
                        value={formData.software_name}
                        onChange={(e) => setFormData(prev => ({ ...prev, software_name: e.target.value }))}
                        placeholder={formData.software_type === "internal" ? "Internal System" : "e.g., Instawork, Qwick"}
                        className="mt-2"
                      />
                    </div>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        )}

        {/* STEP 4: Documents & Validation (was Step 3) */}
        {currentStep === 4 && (
          <Card className="border-2 border-slate-200">
            <CardHeader className="bg-gradient-to-r from-slate-50 to-blue-50 border-b">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-[#0A39DF] rounded-xl flex items-center justify-center">
                  <Shield className="w-6 h-6 text-white" />
                </div>
                <div>
                  <CardTitle className="text-2xl">Documents & Validation</CardTitle>
                  <p className="text-sm text-slate-600 mt-1">Compliance essentials - AI powered verification</p>
                </div>
              </div>
            </CardHeader>
            <CardContent className="p-6 space-y-6">
              {/* W-9 Upload */}
              <div>
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h3 className="font-semibold flex items-center gap-2">
                      <FileText className="w-5 h-5 text-[#0A39DF]" />
                      W-9 Tax Form <span className="text-red-500">*</span>
                    </h3>
                    <p className="text-sm text-slate-600 mt-1">Federal tax classification document</p>
                  </div>
                  {docValidation.w9 && (
                    <Badge className={docValidation.w9.isValid ? "bg-green-100 text-green-700" : "bg-blue-100 text-blue-700"}>
                      {docValidation.w9.isValid ? "✅ Validated" : "ℹ Review"}
                    </Badge>
                  )}
                </div>

                <DragDropFileUpload
                  onFileSelect={(file) => handleFileUpload(file, 'w9')}
                  accept=".pdf,.jpg,.jpeg,.png"
                  uploading={uploadingDoc === 'w9' || validatingDoc === 'w9'}
                  uploaded={!!formData.w9_url}
                  uploadedFileName={formData.w9_file?.name}
                  disabled={uploadingDoc === 'w9' || validatingDoc === 'w9'}
                />

                {docValidation.w9 && (
                  <div className="mt-3 p-3 bg-slate-50 rounded-lg">
                    <p className="text-sm font-medium text-slate-700 mb-1">Validation Results:</p>
                    {docValidation.w9.businessName && (
                      <p className="text-xs text-slate-600">• Business: {docValidation.w9.businessName}</p>
                    )}
                    {docValidation.w9.issues && docValidation.w9.issues.length > 0 && (
                      <div className="mt-2">
                        {docValidation.w9.issues.map((issue, idx) => (
                          <p key={idx} className="text-xs text-blue-600">ℹ {issue}</p>
                        ))}
                      </div>
                    )}
                    {docValidation.w9.notes && (
                      <p className="text-xs text-slate-500 mt-2 italic">{docValidation.w9.notes}</p>
                    )}
                  </div>
                )}
              </div>

              {/* COI Upload */}
              <div>
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h3 className="font-semibold flex items-center gap-2">
                      <Shield className="w-5 h-5 text-[#0A39DF]" />
                      Certificate of Insurance (COI) <span className="text-red-500">*</span>
                    </h3>
                    <p className="text-sm text-slate-600 mt-1">General liability insurance certificate</p>
                  </div>
                  {docValidation.coi && (
                    <Badge className={docValidation.coi.isValid ? "bg-green-100 text-green-700" : "bg-blue-100 text-blue-700"}>
                      {docValidation.coi.isValid ? "✅ Validated" : "ℹ Review"}
                    </Badge>
                  )}
                </div>

                <DragDropFileUpload
                  onFileSelect={(file) => handleFileUpload(file, 'coi')}
                  accept=".pdf,.jpg,.jpeg,.png"
                  uploading={uploadingDoc === 'coi' || validatingDoc === 'coi'}
                  uploaded={!!formData.coi_url}
                  uploadedFileName={formData.coi_file?.name}
                  disabled={uploadingDoc === 'coi' || validatingDoc === 'coi'}
                />

                {docValidation.coi && (
                  <div className="mt-3 p-3 bg-slate-50 rounded-lg">
                    <p className="text-sm font-medium text-slate-700 mb-1">Validation Results:</p>
                    {docValidation.coi.expiryDate && (
                      <p className="text-xs text-slate-600">• Expires: {docValidation.coi.expiryDate}</p>
                    )}
                    {docValidation.coi.issues && docValidation.coi.issues.length > 0 && (
                      <div className="mt-2">
                        {docValidation.coi.issues.map((issue, idx) => (
                          <p key={idx} className="text-xs text-blue-600">ℹ {issue}</p>
                        ))}
                      </div>
                    )}
                    {docValidation.coi.notes && (
                      <p className="text-xs text-slate-500 mt-2 italic">{docValidation.coi.notes}</p>
                    )}
                  </div>
                )}
              </div>

              {/* Secretary of State Certificate */}
              <div className="border-2 border-red-300 rounded-lg p-6 bg-red-50/30">
                <div className="flex items-start justify-between mb-4">
                  <div>
                    <h3 className="font-semibold flex items-center gap-2">
                      <CheckCircle2 className="w-5 h-5 text-[#0A39DF]" />
                      Secretary of State Certificate <span className="text-red-500">*</span>
                    </h3>
                    <p className="text-sm text-slate-600 mt-1">Business registration verification - <strong className="text-red-600">Required</strong></p>
                  </div>
                  {docValidation.sos && (
                    <Badge className={docValidation.sos.isValid || (docValidation.sos.isRegistered && docValidation.sos.autoVerified) ? "bg-green-100 text-green-700" : "bg-blue-100 text-blue-700"}>
                      {(docValidation.sos.isValid || (docValidation.sos.isRegistered && docValidation.sos.autoVerified)) ? "✅ Validated" : "ℹ Review"}
                    </Badge>
                  )}
                </div>

                {/* Auto-Check Button - NOW REQUIRED */}
                <div className="mb-4 p-4 bg-blue-50 border-2 border-blue-300 rounded-lg">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1">
                      <p className="text-sm font-semibold text-blue-900 mb-1">🔍 Automatic Verification - <span className="text-red-600">Required</span></p>
                      <p className="text-xs text-blue-700">
                        Click "Auto-Check" to verify your business registration with the Secretary of State. This is mandatory for approval.
                      </p>
                    </div>
                    <Button
                      type="button"
                      onClick={async () => {
                        if (!formData.legal_name || !formData.service_address) { // Changed to service_address
                          toast({
                            title: "Missing Information",
                            description: "Please fill in business name and service address first",
                            variant: "destructive"
                          });
                          return;
                        }

                        setValidatingDoc('sos');
                        try {
                          // Extract state from service address (using service_address now)
                          const addressParts = formData.service_address.split(',');
                          const stateZip = addressParts[addressParts.length - 1]?.trim() || '';
                          const state = stateZip.split(' ')[0];

                          const validation = await base44.integrations.Core.InvokeLLM({
                            prompt: `
                              Search public Secretary of State records for this business:
                              Business Name: ${formData.legal_name}
                              State: ${state}
                              Tax ID: ${formData.tax_id || 'Not provided'}

                              Verify:
                              1. Is this business actively registered with the Secretary of State?
                              2. What is the registration status (Active, Inactive, Suspended)?
                              3. What is the business entity type on file?
                              4. When was it registered?
                              5. Is the registration current and in good standing?

                              Use public Secretary of State databases and business registries.
                              Return accurate verification results.
                            `,
                            add_context_from_internet: true,
                            response_json_schema: {
                              type: "object",
                              properties: {
                                isValid: { type: "boolean" },
                                isRegistered: { type: "boolean" },
                                businessName: { type: "string" },
                                registrationState: { type: "string" },
                                registrationStatus: { type: "string" },
                                entityType: { type: "string" },
                                registrationDate: { type: "string" },
                                issues: { type: "array", items: { type: "string" } },
                                notes: { type: "string" }
                              }
                            }
                          });

                          setDocValidation(prev => ({
                            ...prev,
                            sos: {
                              ...validation,
                              autoVerified: true,
                              isValid: validation.isRegistered && (validation.registrationStatus === 'Active' || validation.registrationStatus === 'Good Standing')
                            }
                          }));

                          toast({
                            title: validation.isRegistered ? "✅ Registration Verified" : "⚠️ Verification Results",
                            description: validation.notes || "Check results below",
                          });
                        } catch (error) {
                          toast({
                            title: "Verification Failed",
                            description: "Unable to auto-verify. Please upload certificate manually.",
                            variant: "destructive"
                          });
                        } finally {
                          setValidatingDoc(null);
                        }
                      }}
                      disabled={validatingDoc === 'sos'}
                      className="bg-blue-600 hover:bg-blue-700 text-white whitespace-nowrap"
                    >
                      {validatingDoc === 'sos' ? (
                        <>
                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                          Checking...
                        </>
                      ) : (
                        <>
                          <Search className="w-4 h-4 mr-2" />
                          Auto-Check
                        </>
                      )}
                    </Button>
                  </div>
                </div>

                {/* Show auto-verification results */}
                {docValidation.sos?.autoVerified && (
                  <div className="mb-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
                    <div className="flex items-center gap-2 mb-3">
                      {docValidation.sos.isRegistered ? (
                        <CheckCircle2 className="w-5 h-5 text-green-600" />
                      ) : (
                        <AlertCircle className="w-5 h-5 text-blue-600" />
                      )}
                      <p className="font-semibold text-sm">
                        {docValidation.sos.isRegistered ? "✅ Automatically Verified" : "ℹ Verification Results"}
                      </p>
                    </div>

                    <div className="space-y-2 text-sm">
                      {docValidation.sos.businessName && (
                        <div className="flex justify-between">
                          <span className="text-slate-600">Business Name:</span>
                          <span className="font-medium">{docValidation.sos.businessName}</span>
                        </div>
                      )}
                      {docValidation.sos.registrationState && (
                        <div className="flex justify-between">
                          <span className="text-slate-600">State:</span>
                          <span className="font-medium">{docValidation.sos.registrationState}</span>
                        </div>
                      )}
                      {docValidation.sos.registrationStatus && (
                        <div className="flex justify-between">
                          <span className="text-slate-600">Status:</span>
                          <Badge className={docValidation.sos.registrationStatus === 'Active' || docValidation.sos.registrationStatus === 'Good Standing' ? 'bg-green-100 text-green-700' : 'bg-blue-100 text-blue-700'}>
                            {docValidation.sos.registrationStatus}
                          </Badge>
                        </div>
                      )}
                      {docValidation.sos.entityType && (
                        <div className="flex justify-between">
                          <span className="text-slate-600">EntityType:</span>
                          <span className="font-medium">{docValidation.sos.entityType}</span>
                        </div>
                      )}
                      {docValidation.sos.registrationDate && (
                        <div className="flex justify-between">
                          <span className="text-slate-600">Registered:</span>
                          <span className="font-medium">{docValidation.sos.registrationDate}</span>
                        </div>
                      )}
                    </div>

                    {docValidation.sos.issues && docValidation.sos.issues.length > 0 && (
                      <div className="mt-3 pt-3 border-t border-slate-200">
                        <p className="text-xs font-semibold text-blue-700 mb-2">Issues Found:</p>
                        {docValidation.sos.issues.map((issue, idx) => (
                          <p key={idx} className="text-xs text-blue-600">ℹ {issue}</p>
                        ))}
                      </div>
                    )}

                    {docValidation.sos.notes && (
                      <p className="text-xs text-slate-500 mt-3 italic">{docValidation.sos.notes}</p>
                    )}
                  </div>
                )}

                {/* Manual Upload Option with Drag & Drop */}
                <div className="border-t border-slate-200 pt-4 mt-4">
                  <p className="text-sm font-medium text-slate-700 mb-4">Or upload certificate manually for verification:</p>

                  <DragDropFileUpload
                    onFileSelect={(file) => handleFileUpload(file, 'sos')}
                    accept=".pdf,.jpg,.jpeg,.png"
                    uploading={uploadingDoc === 'sos' && !docValidation.sos?.autoVerified}
                    uploaded={!!formData.sos_url && !docValidation.sos?.autoVerified}
                    uploadedFileName={formData.sos_file?.name}
                    disabled={uploadingDoc === 'sos' || validatingDoc === 'sos'}
                  />

                  {/* Display manual validation results if not auto-verified, or if auto-verified failed/was skipped and manual was used */}
                  {docValidation.sos && !docValidation.sos.autoVerified && (
                    <div className="mt-3 p-3 bg-slate-50 rounded-lg">
                      <p className="text-sm font-medium text-slate-700 mb-1">Document Validation Results:</p>
                      {docValidation.sos.businessName && (
                        <p className="text-xs text-slate-600">• Business: {docValidation.sos.businessName}</p>
                      )}
                      {docValidation.sos.registrationState && (
                        <p className="text-xs text-slate-600">• State: {docValidation.sos.registrationState}</p>
                      )}
                      {docValidation.sos.expiryDate && (
                        <p className="text-xs text-slate-600">• Current through: {docValidation.sos.expiryDate}</p>
                      )}
                      {docValidation.sos.issues && docValidation.sos.issues.length > 0 && (
                        <div className="mt-2">
                          {docValidation.sos.issues.map((issue, idx) => (
                            <p key={idx} className="text-xs text-blue-600">ℹ {issue}</p>
                          ))}
                        </div>
                      )}
                      {docValidation.sos.notes && (
                        <p className="text-xs text-slate-500 mt-2 italic">{docValidation.sos.notes}</p>
                      )}
                    </div>
                  )}
                </div>

                <div className="mt-4 p-3 bg-red-50 rounded-lg border border-red-200">
                  <p className="text-xs text-red-900 flex items-start gap-2 font-semibold">
                    <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                    <span>
                      <strong>REQUIRED:</strong> This certificate verifies your business is actively registered with your state.
                      You must either use Auto-Check or upload a valid certificate to proceed.
                    </span>
                  </p>
                </div>
              </div>

              {/* NEW: Compliance Attestations Section */}
              <div className="border-2 border-blue-300 rounded-lg p-6 bg-blue-50/30 mt-6">
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                    <Shield className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-lg text-blue-900">Compliance Attestations</h3>
                    <p className="text-sm text-blue-700">Verify your compliance with employment and safety regulations</p>
                  </div>
                </div>

                <div className="space-y-4 bg-white p-6 rounded-lg border-2 border-blue-200">
                  {/* Background Check Attestation */}
                  <div className="flex items-start gap-3 p-4 bg-slate-50 rounded-lg border border-slate-200">
                    <Checkbox
                      id="background_check"
                      checked={formData.background_check_attestation}
                      onCheckedChange={(checked) => setFormData(prev => ({ ...prev, background_check_attestation: checked }))}
                      className="mt-1 data-[state=checked]:bg-[#0A39DF] data-[state=checked]:border-[#0A39DF]"
                    />
                    <div className="flex-1">
                      <Label htmlFor="background_check" className="font-semibold cursor-pointer text-slate-900">
                        Background Check Compliance <span className="text-red-500">*</span>
                      </Label>
                      <p className="text-sm text-slate-600 mt-1">
                        I attest that my company conducts background checks on all employees in accordance with federal, state, and local laws.
                        We maintain proper documentation and follow all FCRA (Fair Credit Reporting Act) requirements.
                      </p>
                    </div>
                  </div>

                  {/* I-9 Compliance Attestation */}
                  <div className="flex items-start gap-3 p-4 bg-slate-50 rounded-lg border border-slate-200">
                    <Checkbox
                      id="i9_compliance"
                      checked={formData.i9_compliance_attestation}
                      onCheckedChange={(checked) => setFormData(prev => ({ ...prev, i9_compliance_attestation: checked }))}
                      className="mt-1 data-[state=checked]:bg-[#0A39DF] data-[state=checked]:border-[#0A39DF]"
                    />
                    <div className="flex-1">
                      <Label htmlFor="i9_compliance" className="font-semibold cursor-pointer text-slate-900">
                        I-9 Employment Eligibility Verification <span className="text-red-500">*</span>
                      </Label>
                      <p className="text-sm text-slate-600 mt-1">
                        I attest that my company maintains complete and valid I-9 forms for all employees as required by U.S. immigration law.
                        All employees are verified for employment eligibility and documentation is kept on file for the required retention period.
                      </p>
                    </div>
                  </div>

                  {/* Legal Compliance Attestation */}
                  <div className="flex items-start gap-3 p-4 bg-slate-50 rounded-lg border border-slate-200">
                    <Checkbox
                      id="legal_compliance"
                      checked={formData.legal_compliance_attestation}
                      onCheckedChange={(checked) => setFormData(prev => ({ ...prev, legal_compliance_attestation: checked }))}
                      className="mt-1 data-[state=checked]:bg-[#0A39DF] data-[state=checked]:border-[#0A39DF]"
                    />
                    <div className="flex-1">
                      <Label htmlFor="legal_compliance" className="font-semibold cursor-pointer text-slate-900">
                        General Legal and Regulatory Compliance <span className="text-red-500">*</span>
                      </Label>
                      <p className="text-sm text-slate-600 mt-1">
                        I attest that my company complies with all applicable federal, state, and local employment laws including but not limited to:
                        wage and hour laws, workers' compensation, unemployment insurance, anti-discrimination laws, OSHA safety standards,
                        and all licensing requirements for our industry and geographic locations.
                      </p>
                    </div>
                  </div>
                </div>

                {/* Warning Message */}
                {(!formData.background_check_attestation || !formData.i9_compliance_attestation || !formData.legal_compliance_attestation) && (
                  <div className="mt-4 p-4 bg-red-50 border-2 border-red-200 rounded-lg flex items-start gap-2">
                    <AlertCircle className="w-5 h-5 text-red-600 mt-0.5 flex-shrink-0" />
                    <div>
                      <p className="text-sm text-red-900 font-semibold">Required Attestations</p>
                      <p className="text-sm text-red-800 mt-1">
                        All compliance attestations are mandatory. By checking these boxes, you affirm that your company meets all legal requirements
                        and understands that providing false information may result in immediate termination of vendor partnership and potential legal action.
                      </p>
                    </div>
                  </div>
                )}

                {/* Success Message */}
                {formData.background_check_attestation && formData.i9_compliance_attestation && formData.legal_compliance_attestation && (
                  <div className="mt-4 p-4 bg-green-50 border-2 border-green-200 rounded-lg flex items-center gap-2">
                    <CheckCircle2 className="w-5 h-5 text-green-600" />
                    <p className="text-sm text-green-900 font-medium">
                      ✓ All compliance attestations completed. Your commitment to legal compliance is appreciated.
                    </p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>
        )}

        {/* STEP 5: Service Coverage (was Step 4) */}
        {currentStep === 5 && (
          <Card className="border-2 border-slate-200">
            <CardHeader className="bg-gradient-to-r from-slate-50 to-blue-50 border-b">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-[#0A39DF] rounded-xl flex items-center justify-center">
                    <MapPin className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <CardTitle className="text-2xl">Service Coverage</CardTitle>
                    <p className="text-sm text-slate-600 mt-1">Select all cities and regions where you can provide services</p>
                  </div>
                </div>
                <Badge className="bg-blue-100 text-blue-700 text-sm px-3 py-1">
                  {Object.values(formData.selected_cities).reduce((sum, cities) => sum + cities.length, 0)} Cities Selected
                </Badge>
              </div>
            </CardHeader>
            <CardContent className="p-6 space-y-6">
              {/* Search and Quick Actions */}
              <div className="flex gap-3">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                  <Input
                    placeholder="Search states or cities..."
                    className="pl-10"
                    onChange={(e) => {
                      // Filtering logic would be implemented here, e.g., storing search term in state
                      // and then filtering `Object.entries(usLocationData)` below.
                      // For now, it's a visual placeholder as per original outline intent.
                    }}
                  />
                </div>
                <Button
                  variant="outline"
                  onClick={() => {
                    // Select all major metro areas
                    const majorMetros = {
                      "California": ["Los Angeles", "San Francisco", "San Diego", "San Jose"],
                      "New York": ["New York City"],
                      "Texas": ["Houston", "Dallas", "Austin", "San Antonio"],
                      "Illinois": ["Chicago"],
                      "Florida": ["Miami", "Orlando", "Tampa"]
                    };
                    setFormData(prev => ({ ...prev, selected_cities: majorMetros }));
                  }}
                >
                  Select Major Metros
                </Button>
              </div>

              {/* Selected Regions Summary */}
              {Object.values(formData.selected_cities).reduce((sum, cities) => sum + cities.length, 0) > 0 && (
                <div className="p-4 bg-green-50 border-2 border-green-200 rounded-lg">
                  <div className="flex items-center justify-between mb-3">
                    <h4 className="font-semibold text-green-900">Selected Service Areas</h4>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setFormData(prev => ({ ...prev, selected_cities: {} }))}
                      className="text-red-600 hover:text-red-700 hover:bg-red-50"
                    >
                      Clear All
                    </Button>
                  </div>
                  <div className="space-y-2">
                    {Object.entries(formData.selected_cities).map(([state, cities]) => {
                      if (cities.length === 0) return null; // Don't show states with no selected cities
                      return (
                        <div key={state} className="flex flex-wrap gap-2 items-center">
                          <Badge className="bg-green-600 text-white font-semibold">
                            {state}
                          </Badge>
                          {cities.map(city => (
                            <button
                              key={city}
                              type="button"
                              onClick={() => {
                                setFormData(prev => {
                                  const updatedStateCities = prev.selected_cities[state].filter(c => c !== city);
                                  if (updatedStateCities.length === 0) {
                                    const newStateCities = { ...prev.selected_cities };
                                    delete newStateCities[state];
                                    return { ...prev, selected_cities: newStateCities };
                                  }
                                  return {
                                    ...prev,
                                    selected_cities: {
                                      ...prev.selected_cities,
                                      [state]: updatedStateCities
                                    }
                                  };
                                });
                              }}
                              className="px-2 py-1 rounded-full text-xs font-medium bg-white border border-slate-300 text-slate-700 flex items-center gap-1 hover:bg-slate-50 transition-colors"
                            >
                              {city}
                              <Trash2 className="w-3 h-3 text-red-500" />
                            </button>
                          ))}
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* State and City Selection */}
              <div className="border-2 border-slate-200 rounded-lg p-6 max-h-[500px] overflow-y-auto">
                <div className="space-y-6">
                  {Object.entries(usLocationData).map(([state, cities]) => (
                    <div key={state} className="border-b border-slate-200 pb-4 last:border-0">
                      <div className="flex items-center justify-between mb-3">
                        <h4 className="font-bold text-lg text-slate-900">{state}</h4>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => {
                            const isAllSelected = formData.selected_cities[state]?.length === cities.length;
                            setFormData(prev => {
                              const newStateCities = { ...prev.selected_cities };
                              if (isAllSelected) {
                                delete newStateCities[state]; // If all are selected, deselect all and remove state entry
                              } else {
                                newStateCities[state] = cities; // Select all cities for this state
                              }
                              return { ...prev, selected_cities: newStateCities };
                            });
                          }}
                          className="text-xs"
                        >
                          {formData.selected_cities[state]?.length === cities.length ? "Deselect All" : "Select All"}
                        </Button>
                      </div>
                      <div className="flex flex-wrap gap-2">
                        {cities.map(city => {
                          const isSelected = formData.selected_cities[state]?.includes(city);
                          return (
                            <button
                              key={city}
                              type="button"
                              onClick={() => {
                                setFormData(prev => {
                                  const stateCities = prev.selected_cities[state] || [];
                                  const newCities = isSelected
                                    ? stateCities.filter(c => c !== city)
                                    : [...stateCities, city];

                                  const newStateCities = { ...prev.selected_cities };
                                  if (newCities.length === 0) {
                                    delete newStateCities[state];
                                  } else {
                                    newStateCities[state] = newCities;
                                  }

                                  return {
                                    ...prev,
                                    selected_cities: newStateCities
                                  };
                                });
                              }}
                              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
                                isSelected
                                  ? 'bg-[#0A39DF] text-white shadow-md'
                                  : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
                              }`}
                            >
                              {isSelected && <CheckCircle2 className="w-3 h-3 inline mr-1" />}
                              {city}
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {Object.values(formData.selected_cities).reduce((sum, cities) => sum + cities.length, 0) === 0 && (
                <div className="text-center py-8 text-slate-500">
                  <MapPin className="w-12 h-12 mx-auto mb-3 text-slate-300" />
                  <p className="font-medium">No cities selected yet</p>
                  <p className="text-sm">Select the cities where you can provide staffing services</p>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* STEP 6: Rate Proposals (was Step 5) */}
        {currentStep === 6 && (
          <Card className="border-2 border-slate-200">
            <CardHeader className="bg-gradient-to-r from-slate-50 to-blue-50 border-b">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-[#0A39DF] rounded-xl flex items-center justify-center">
                    <DollarSign className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <CardTitle className="text-2xl">Service Matrix Builder</CardTitle>
                    <p className="text-sm text-slate-600 mt-1">Tell us where you shine - AI-powered rate analysis</p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="text-right">
                    <p className="text-xs text-slate-500">Vendor Admin Fee (VA)</p>
                    <p className="text-xl font-bold text-purple-600">{invite?.vendor_admin_fee || 12}%</p>
                    <p className="text-[10px] text-slate-400">Set by Procurement</p>
                  </div>
                  <Button
                    type="button"
                    onClick={() => {
                      // Use service_address for minimum wage calculation
                      const localMinWage = getMinimumWageFromAddress(formData.service_address);
                      const newRole = {
                        role_name: "Custom Role",
                        category: "Event Staff",
                        employee_wage: localMinWage || 18,
                        markup_percentage: 20,
                        vendor_fee_percentage: invite?.vendor_admin_fee || 12,
                        client_rate: 0,
                        is_active: true,
                        ai_analysis: null,
                        is_custom: true,
                        location_rates: {}
                      };
                      const vendorFee = invite?.vendor_admin_fee || 12;
                      newRole.client_rate = parseFloat((newRole.employee_wage * (1 + newRole.markup_percentage / 100) * (1 + vendorFee / 100)).toFixed(2));

                      setFormData(prev => ({
                        ...prev,
                        rate_proposals: [...prev.rate_proposals, newRole]
                      }));

                      toast({
                        title: "Custom Role Added",
                        description: "New custom role added to rate proposals"
                      });
                    }}
                    className="bg-[#0A39DF] hover:bg-[#0A39DF]/90"
                  >
                    <Plus className="w-4 h-4 mr-2" />
                    Add Custom Role
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent className="p-6">
              <div className="mb-6 p-4 bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg">
                <div className="flex items-start gap-3">
                  <Sparkles className="w-5 h-5 text-purple-600 mt-0.5" />
                  <div className="flex-1">
                    <p className="text-sm font-semibold text-slate-900 mb-1">🧠 AI runs in background:</p>
                    <p className="text-xs text-slate-700">
                      Benchmarks each entry against KROW's dynamic rate matrix, historic client spend,
                      and market average for your region and role.
                    </p>
                  </div>
                </div>
              </div>

              {/* Minimum Wage Detected */}
              {formData.service_address && ( // Changed to service_address
                <div className="mb-6 p-4 bg-green-50 border-2 border-green-200 rounded-lg">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <MapPin className="w-5 h-5 text-green-600" />
                      <div>
                        <p className="text-sm font-semibold text-green-900">
                          Local Minimum Wage Detected: ${getMinimumWageFromAddress(formData.service_address)}/hr
                        </p>
                        <p className="text-xs text-green-700 mt-1">
                          Based on your business location. All payrates are pre-populated at or above this minimum. You can adjust them as needed.
                        </p>
                      </div>
                    </div>
                    <Badge className="bg-green-600 text-white text-sm px-3 py-1">
                      Auto-Detected
                    </Badge>
                  </div>
                </div>
              )}

              {/* Global Controls */}
              <div className="mb-6 p-4 bg-slate-50 border-2 border-slate-300 rounded-lg">
                <div className="flex items-center justify-between gap-6">
                  <div className="flex items-center gap-4 flex-1">
                    <h4 className="font-semibold text-slate-900">Quick Actions:</h4>

                    {/* Select All / Deselect All */}
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={() => {
                        const allActive = formData.rate_proposals.every(r => r.is_active);
                        const newRates = formData.rate_proposals.map(r => ({
                          ...r,
                          is_active: !allActive
                        }));
                        setFormData(prev => ({ ...prev, rate_proposals: newRates }));
                      }}
                      className="border-[#0A39DF] text-[#0A39DF] hover:bg-blue-50"
                    >
                      {formData.rate_proposals.every(r => r.is_active) ? (
                        <>
                          <CheckCircle2 className="w-4 h-4 mr-2" />
                          Deselect All
                        </>
                      ) : (
                        <>
                          <CheckCircle2 className="w-4 h-4 mr-2" />
                          Select All
                        </>
                      )}
                    </Button>
                  </div>

                  {/* Apply Markup to All */}
                  <div className="flex items-center gap-3">
                    <Label htmlFor="global_markup" className="text-sm font-semibold whitespace-nowrap">
                      Markup:
                    </Label>
                    <div className="flex items-center gap-2">
                      <Input
                        id="global_markup"
                        type="number"
                        step="0.1"
                        placeholder="e.g., 20"
                        className="w-24 text-center font-semibold"
                      />
                      <span className="text-sm text-slate-500">%</span>
                      <Button
                        type="button"
                        size="sm"
                        onClick={() => {
                          const globalMarkupInput = document.getElementById('global_markup');
                          const globalMarkup = parseFloat(globalMarkupInput.value);

                          if (isNaN(globalMarkup) || globalMarkup <= 0) {
                            toast({
                              title: "Invalid Markup",
                              description: "Please enter a valid markup percentage",
                              variant: "destructive"
                            });
                            return;
                          }

                          const vendorFee = invite?.vendor_admin_fee || 12;
                          const newRates = formData.rate_proposals.map(rate => ({
                            ...rate,
                            markup_percentage: globalMarkup,
                            client_rate: parseFloat((rate.employee_wage * (1 + globalMarkup / 100) * (1 + vendorFee / 100)).toFixed(2)),
                            location_rates: Object.fromEntries(
                              Object.entries(rate.location_rates || {}).map(([loc, lr]) => [
                                loc,
                                {
                                  ...lr,
                                  markup_percentage: globalMarkup,
                                  client_rate: parseFloat((lr.employee_wage * (1 + globalMarkup / 100) * (1 + vendorFee / 100)).toFixed(2))
                                }
                              ])
                            )
                          }));

                          setFormData(prev => ({ ...prev, rate_proposals: newRates }));

                          toast({
                            title: "Markup Applied",
                            description: `${newRates.length} roles updated with ${globalMarkup}% markup`,
                          });
                        }}
                        className="bg-green-600 hover:bg-green-700 text-white"
                      >
                        Apply
                      </Button>
                    </div>
                  </div>
                </div>
              </div>

              {/* Enhanced Rate Cards with Location Support */}
              <div className="space-y-3">
                {(() => {
                  // Get minimum wage based on business location (service_address)
                  const localMinWage = getMinimumWageFromAddress(formData.service_address);

                  // Pre-defined roles with wages based on local minimum wage
                  const defaultRoles = [
                    { category: "Bartending", role: "Bartender", wageMultiplier: 1.2 },
                    { category: "Kitchen and Culinary", role: "Cook", wageMultiplier: 1.2 },
                    { category: "Kitchen and Culinary", role: "Line Cook", wageMultiplier: 1.2 },
                    { category: "Kitchen and Culinary", role: "Sous Chef", wageMultiplier: 1.6 },
                    { category: "Kitchen and Culinary", role: "Executive Chef", wageMultiplier: 2.3 },
                    { category: "Kitchen and Culinary", role: "Prep Cook", wageMultiplier: 1.0 },
                    { category: "Concessions", role: "Concessions Attendant", wageMultiplier: 1.0 },
                    { category: "Concessions", role: "Cashier", wageMultiplier: 1.0 },
                    { category: "Facilities", role: "Janitor", wageMultiplier: 1.05 },
                    { category: "Facilities", role: "Maintenance Technician", wageMultiplier: 1.4 },
                    { category: "Bartending", role: "Bar Back", wageMultiplier: 1.0 },
                    { category: "Security", role: "Security Guard", wageMultiplier: 1.3 },
                    { category: "Event Staff", role: "Event Server", wageMultiplier: 1.05 },
                    { category: "Event Staff", role: "Event Coordinator", wageMultiplier: 1.6 },
                    { category: "Management", role: "General Manager", wageMultiplier: 2.6 },
                    { category: "Management", role: "Assistant Manager", wageMultiplier: 1.8 },
                  ];

                  // Initialize rate proposals if empty
                  if (formData.rate_proposals.length === 0) {
                    const initialRates = defaultRoles.map(r => {
                      const calculatedWage = parseFloat((localMinWage * r.wageMultiplier).toFixed(2));
                      const vendorFee = invite?.vendor_admin_fee || 12;
                      return {
                        category: r.category,
                        role_name: r.role,
                        employee_wage: calculatedWage,
                        markup_percentage: 20,
                        vendor_fee_percentage: vendorFee,
                        client_rate: parseFloat((calculatedWage * 1.2 * (1 + (vendorFee / 100))).toFixed(2)),
                        is_active: true,
                        ai_analysis: null,
                        is_custom: false,
                        location_rates: {} // Initialize empty object for location-specific rates
                      };
                    });
                    // Using a functional update to ensure we get the latest state
                    setFormData(prev => ({ ...prev, rate_proposals: initialRates }));
                  }
                  return null; // This IIFE does not render anything directly
                })()}

                {formData.rate_proposals.map((rate, idx) => {
                  const vendorFee = invite?.vendor_admin_fee || 12;
                  const selectedLocations = Object.entries(formData.selected_cities).flatMap(([state, cities]) =>
                    cities.map(city => `${city}, ${state}`)
                  );

                  // Determine status based on client rate vs market average (simulated)
                  const marketAverage = rate.employee_wage * 1.35;
                  let status = "competitive";
                  let statusIcon = "✓";
                  let statusText = "Good Deal";
                  let statusClass = "bg-green-100 text-green-700";

                  if (rate.client_rate > marketAverage * 1.15) {
                    status = "risk";
                    statusIcon = "!";
                    statusText = "Risk Zone";
                    statusClass = "bg-red-100 text-red-700";
                  } else if (rate.client_rate > marketAverage * 1.05) {
                    status = "market";
                    statusIcon = "~";
                    statusText = "At Market";
                    statusClass = "bg-blue-100 text-blue-700";
                  }

                  return (
                    <Card key={idx} className={`border-2 transition-all ${rate.is_active ? 'border-slate-200 hover:border-[#0A39DF]' : 'border-slate-100 bg-slate-50 opacity-60'}`}>
                      <CardContent className="p-4">
                        <div className="flex items-start gap-4">
                          {/* Toggle */}
                          <div className="flex items-center pt-2">
                            <button
                              type="button"
                              onClick={() => {
                                const newRates = [...formData.rate_proposals];
                                newRates[idx].is_active = !newRates[idx].is_active;
                                setFormData(prev => ({ ...prev, rate_proposals: newRates }));
                              }}
                              className={`w-12 h-6 rounded-full transition-colors relative ${rate.is_active ? 'bg-green-500' : 'bg-slate-300'}`}
                            >
                              <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-transform ${rate.is_active ? 'translate-x-7' : 'translate-x-1'}`}></div>
                            </button>
                          </div>

                          {/* Role Info */}
                          <div className="flex-1 grid grid-cols-6 gap-3 items-center">
                            {/* Position */}
                            <div>
                              <p className="text-xs text-slate-500 mb-1">Position</p>
                              {rate.is_custom ? (
                                <Input
                                  value={rate.role_name}
                                  onChange={(e) => {
                                    const newRates = [...formData.rate_proposals];
                                    newRates[idx].role_name = e.target.value;
                                    setFormData(prev => ({ ...prev, rate_proposals: newRates }));
                                  }}
                                  className="h-8 text-sm"
                                  disabled={!rate.is_active}
                                />
                              ) : (
                                <p className="font-semibold text-slate-900 text-sm">{rate.role_name}</p>
                              )}
                              <p className="text-[10px] text-slate-400">{rate.category}</p>
                            </div>

                            {/* Payrate */}
                            <div>
                              <p className="text-xs text-slate-500 mb-1">Payrate</p>
                              <div className="relative">
                                <span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-slate-400">$</span>
                                <Input
                                  type="number"
                                  step="0.01"
                                  value={rate.employee_wage}
                                  onChange={(e) => {
                                    const newRates = [...formData.rate_proposals];
                                    const wage = parseFloat(e.target.value) || 0;
                                    newRates[idx].employee_wage = wage;
                                    newRates[idx].client_rate = parseFloat((wage * (1 + newRates[idx].markup_percentage / 100) * (1 + vendorFee / 100)).toFixed(2));
                                    // Also update client rates in location_rates
                                    if (newRates[idx].location_rates) {
                                      newRates[idx].location_rates = Object.fromEntries(
                                        Object.entries(newRates[idx].location_rates).map(([loc, lr]) => [
                                          loc,
                                          {
                                            ...lr,
                                            employee_wage: wage, // Update wage for location-specific rate
                                            client_rate: parseFloat((wage * (1 + lr.markup_percentage / 100) * (1 + vendorFee / 100)).toFixed(2))
                                          }
                                        ])
                                      );
                                    }
                                    setFormData(prev => ({ ...prev, rate_proposals: newRates }));
                                  }}
                                  className="h-8 text-sm pl-5 font-semibold"
                                  disabled={!rate.is_active}
                                />
                              </div>
                            </div>

                            {/* Markup */}
                            <div>
                              <p className="text-xs text-slate-500 mb-1">Mark up</p>
                              <div className="relative">
                                <Input
                                  type="number"
                                  step="0.1"
                                  value={rate.markup_percentage}
                                  onChange={(e) => {
                                    const newRates = [...formData.rate_proposals];
                                    const markup = parseFloat(e.target.value) || 0;
                                    newRates[idx].markup_percentage = markup;
                                    newRates[idx].client_rate = parseFloat((newRates[idx].employee_wage * (1 + markup / 100) * (1 + vendorFee / 100)).toFixed(2));
                                    // Also update client rates in location_rates
                                    if (newRates[idx].location_rates) {
                                      newRates[idx].location_rates = Object.fromEntries(
                                        Object.entries(newRates[idx].location_rates).map(([loc, lr]) => [
                                          loc,
                                          {
                                            ...lr,
                                            markup_percentage: markup, // Update markup for location-specific rate
                                            client_rate: parseFloat((lr.employee_wage * (1 + markup / 100) * (1 + vendorFee / 100)).toFixed(2))
                                          }
                                        ])
                                      );
                                    }
                                    setFormData(prev => ({ ...prev, rate_proposals: newRates }));
                                  }}
                                  className="h-8 text-sm font-semibold text-blue-600"
                                  disabled={!rate.is_active}
                                />
                                <span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-slate-400">%</span>
                              </div>
                            </div>

                            {/* Vendor Fee % (Read-only) */}
                            <div>
                              <p className="text-xs text-slate-500 mb-1">Vendor Fee %</p>
                              <div className="h-8 flex items-center justify-center bg-purple-50 border border-purple-200 rounded text-sm font-bold text-purple-600">
                                {vendorFee}%
                              </div>
                            </div>

                            {/* Proposed Bill Rate */}
                            <div>
                              <p className="text-xs text-slate-500 mb-1">Proposed Bill Rate</p>
                              <div className="h-8 flex items-center justify-center bg-green-50 border border-green-200 rounded">
                                <span className="text-sm font-bold text-green-700">${rate.client_rate}</span>
                              </div>
                            </div>

                            {/* Status */}
                            <div>
                              <p className="text-xs text-slate-500 mb-1">Status</p>
                              <Badge className={`${statusClass} text-xs font-semibold`}>
                                {statusIcon} {statusText}
                              </Badge>
                            </div>
                          </div>

                          {/* Actions */}
                          {rate.is_custom && (
                            <Button
                              type="button"
                              variant="ghost"
                              size="icon"
                              onClick={() => {
                                setFormData(prev => ({
                                  ...prev,
                                  rate_proposals: prev.rate_proposals.filter((_, i) => i !== idx)
                                }));
                              }}
                              className="text-red-600 hover:text-red-700 hover:bg-red-50"
                            >
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          )}
                        </div>

                        {/* NEW: Location-Specific Rates Section */}
                        {rate.is_active && selectedLocations.length > 0 && ( // Show if active and at least one location is selected
                          <div className="mt-4 pt-4 border-t border-slate-200">
                            <div className="flex items-center justify-between mb-3">
                              <h5 className="font-semibold text-sm">Location-Specific Rates</h5>
                              <Badge variant="outline" className="text-xs">
                                {selectedLocations.length} Locations Available
                              </Badge>
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                              {selectedLocations.map(location => {
                                // Default to the base rate if no specific location rate is set
                                const locationRate = rate.location_rates?.[location] || {
                                  employee_wage: rate.employee_wage,
                                  markup_percentage: rate.markup_percentage,
                                  client_rate: rate.client_rate
                                };

                                return (
                                  <div key={location} className="p-3 bg-slate-50 rounded-lg border border-slate-200">
                                    <p className="text-xs font-semibold text-slate-700 mb-2 truncate">{location}</p>
                                    <div className="grid grid-cols-3 gap-2">
                                      <div>
                                        <Label className="text-[10px]">Payrate</Label>
                                        <div className="relative">
                                          <span className="absolute left-1.5 top-1/2 -translate-y-1/2 text-[10px]">$</span>
                                          <Input
                                            type="number"
                                            step="0.01"
                                            value={locationRate.employee_wage}
                                            onChange={(e) => {
                                              const newWage = parseFloat(e.target.value) || 0;
                                              const newClientRate = parseFloat((newWage * (1 + locationRate.markup_percentage / 100) * (1 + vendorFee / 100)).toFixed(2));

                                              setFormData(prev => {
                                                const newRates = [...prev.rate_proposals];
                                                if (!newRates[idx].location_rates) newRates[idx].location_rates = {};
                                                newRates[idx].location_rates[location] = {
                                                  ...locationRate,
                                                  employee_wage: newWage,
                                                  client_rate: newClientRate
                                                };
                                                return { ...prev, rate_proposals: newRates };
                                              });
                                            }}
                                            className="h-7 text-xs pl-4"
                                          />
                                        </div>
                                      </div>
                                      <div>
                                        <Label className="text-[10px]">Markup</Label>
                                        <Input
                                          type="number"
                                          step="0.1"
                                          value={locationRate.markup_percentage}
                                          onChange={(e) => {
                                            const newMarkup = parseFloat(e.target.value) || 0;
                                            const newClientRate = parseFloat((locationRate.employee_wage * (1 + newMarkup / 100) * (1 + vendorFee / 100)).toFixed(2));

                                            setFormData(prev => {
                                              const newRates = [...prev.rate_proposals];
                                              if (!newRates[idx].location_rates) newRates[idx].location_rates = {};
                                              newRates[idx].location_rates[location] = {
                                                ...locationRate,
                                                markup_percentage: newMarkup,
                                                client_rate: newClientRate
                                              };
                                              return { ...prev, rate_proposals: newRates };
                                            });
                                          }}
                                          className="h-7 text-xs"
                                        />
                                      </div>
                                      <div>
                                        <Label className="text-[10px]">Bill Rate</Label>
                                        <div className="h-7 flex items-center justify-center bg-green-50 border border-green-200 rounded text-xs font-bold text-green-700">
                                          ${locationRate.client_rate}
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                );
                              })}
                            </div>

                            <Button
                              type="button"
                              variant="outline"
                              size="sm"
                              className="mt-3 w-full text-xs border-slate-300 hover:bg-slate-50"
                              onClick={() => {
                                // Copy base rate to all locations
                                setFormData(prev => {
                                  const newRates = [...prev.rate_proposals];
                                  newRates[idx].location_rates = {};
                                  selectedLocations.forEach(location => {
                                    newRates[idx].location_rates[location] = {
                                      employee_wage: rate.employee_wage,
                                      markup_percentage: rate.markup_percentage,
                                      client_rate: rate.client_rate
                                    };
                                  });
                                  return { ...prev, rate_proposals: newRates };
                                });
                                toast({
                                  title: "Rates Copied",
                                  description: "Base rate applied to all locations"
                                });
                              }}
                            >
                              Apply Base Rate to All Locations
                            </Button>
                          </div>
                        )}

                        {/* Expanded Details - Visual Breakdown */}
                        {rate.is_active && (
                          <div className="mt-4 pt-4 border-t border-slate-200">
                            <div className="grid grid-cols-3 gap-4">
                              {/* Cost Breakdown Bar */}
                              <div className="col-span-2">
                                <p className="text-xs font-semibold text-slate-700 mb-2">Cost Breakdown</p>
                                <div className="flex items-center gap-2 mb-2">
                                  <div className="flex-1 bg-slate-200 rounded-full h-8 overflow-hidden flex text-xs font-semibold">
                                    <div
                                      className="bg-green-500 flex items-center justify-center text-white"
                                      style={{ width: `${(rate.employee_wage / rate.client_rate) * 100}%` }}
                                      title={`Payrate: $${rate.employee_wage}`}
                                    >
                                      ${rate.employee_wage}
                                    </div>
                                    <div
                                      className="bg-blue-500 flex items-center justify-center text-white"
                                      style={{ width: `${((rate.employee_wage * rate.markup_percentage / 100) / rate.client_rate) * 100}%` }}
                                      title={`Markup: ${rate.markup_percentage}%`}
                                    >
                                      {rate.markup_percentage}%
                                    </div>
                                    <div
                                      className="bg-purple-500 flex items-center justify-center text-white"
                                      style={{ width: `${((rate.employee_wage * (1 + rate.markup_percentage / 100) * vendorFee / 100) / rate.client_rate) * 100}%` }}
                                      title={`VA Fee: ${vendorFee}%`}
                                    >
                                      {vendorFee}%
                                    </div>
                                  </div>
                                </div>
                                <div className="flex justify-between text-[10px] text-slate-600">
                                  <span>Payrate: ${rate.employee_wage}/hr</span>
                                  <span>Markup: {rate.markup_percentage}% (+${(rate.employee_wage * rate.markup_percentage / 100).toFixed(2)})</span>
                                  <span>VA: {vendorFee}% (+${(rate.employee_wage * (1 + rate.markup_percentage / 100) * vendorFee / 100).toFixed(2)})</span>
                                </div>
                              </div>

                              {/* AI Insights */}
                              <div className="bg-slate-50 rounded-lg p-3">
                                <p className="text-xs font-semibold text-slate-700 mb-2">💡 AI Insights</p>
                                <div className="space-y-1 text-[10px]">
                                  <div className="flex justify-between">
                                    <span className="text-slate-600">Market Avg:</span>
                                    <span className="font-semibold">${marketAverage.toFixed(2)}/hr</span>
                                  </div>
                                  <div className="flex justify-between">
                                    <span className="text-slate-600">Your Rate:</span>
                                    <span className="font-semibold text-[#0A39DF]">${rate.client_rate}/hr</span>
                                  </div>
                                  <div className="flex justify-between">
                                    <span className="text-slate-600">Difference:</span>
                                    <span className={`font-semibold ${rate.client_rate < marketAverage ? 'text-green-600' : 'text-red-600'}`}>
                                      {rate.client_rate < marketAverage ? '-' : '+'}${Math.abs(rate.client_rate - marketAverage).toFixed(2)}
                                    </span>
                                  </div>
                                  <div className="pt-2 mt-2 border-t border-slate-200">
                                    <span className="text-slate-600">Fill Rate:</span>
                                    <span className={`ml-1 font-bold ${status === 'competitive' ? 'text-green-600' : status === 'market' ? 'text-yellow-600' : 'text-red-600'}`}>
                                      {status === 'competitive' ? '95%' : status === 'market' ? '75%' : '45%'}/yr
                                    </span>
                                  </div>
                                </div>
                              </div>
                            </div>

                            {/* Status Message */}
                            {status === 'competitive' && (
                              <div className="mt-3 p-2 bg-green-50 border border-green-200 rounded text-xs text-green-900">
                                ✓ <strong>Good Deal:</strong> Your rate is {((1 - rate.client_rate / marketAverage) * 100).toFixed(0)}% below market average.
                                Highly competitive with predicted 95% fill rate.
                              </div>
                            )}
                            {status === 'market' && (
                              <div className="mt-3 p-2 bg-blue-50 border border-blue-200 rounded text-xs text-blue-900">
                                ~ <strong>At Market:</strong> Your rate aligns with market average.
                                Competitive with predicted 75% fill rate.
                              </div>
                            )}
                            {status === 'risk' && (
                              <div className="mt-3 p-2 bg-red-50 border border-red-200 rounded text-xs text-red-900 flex items-start gap-2">
                                <AlertCircle className="w-4 h-4 mt-0.5 flex-shrink-0" />
                                <div>
                                  <strong>! Risk Zone:</strong> Your rate is {(((rate.client_rate / marketAverage) - 1) * 100).toFixed(0)}% above market average.
                                  This may reduce competitiveness with predicted 45% fill rate. Consider lowering markup.
                                </div>
                              </div>
                            )}
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  );
                })}
              </div>

              {/* Summary Stats */}
              <div className="mt-6 grid grid-cols-4 gap-4">
                <Card className="border-green-200 bg-green-50">
                  <CardContent className="p-4 text-center">
                    <p className="text-2xl font-bold text-green-700">
                      {formData.rate_proposals.filter(r => r.is_active && r.client_rate < (r.employee_wage * 1.35 * 1.05)).length}
                    </p>
                    <p className="text-xs text-green-600 font-medium mt-1">✓ Good Deals</p>
                  </CardContent>
                </Card>
                <Card className="border-blue-200 bg-blue-50">
                  <CardContent className="p-4 text-center">
                    <p className="text-2xl font-bold text-blue-700">
                      {formData.rate_proposals.filter(r => r.is_active && r.client_rate >= (r.employee_wage * 1.35 * 1.05) && r.client_rate <= (r.employee_wage * 1.35 * 1.15)).length}
                    </p>
                    <p className="text-xs text-blue-600 font-medium mt-1">~ At Market</p>
                  </CardContent>
                </Card>
                <Card className="border-red-200 bg-red-50">
                  <CardContent className="p-4 text-center">
                    <p className="text-2xl font-bold text-red-700">
                      {formData.rate_proposals.filter(r => r.is_active && r.client_rate > (r.employee_wage * 1.35 * 1.15)).length}
                    </p>
                    <p className="text-xs text-red-600 font-medium mt-1">! Risk Zone</p>
                  </CardContent>
                </Card>
                <Card className="border-slate-200 bg-slate-50">
                  <CardContent className="p-4 text-center">
                    <p className="text-2xl font-bold text-slate-700">
                      {formData.rate_proposals.filter(r => r.is_active).length}
                    </p>
                    <p className="text-xs text-slate-600 font-medium mt-1">Active Roles</p>
                  </CardContent>
                </Card>
              </div>
            </CardContent>
          </Card>
        )}

        {/* STEP 7: AI Intelligence (was Step 6) */}
        {currentStep === 7 && (
          <Card className="border-2 border-slate-200">
            <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl flex items-center justify-center">
                    <Sparkles className="w-6 h-6 text-white" />
                  </div>
                  <div>
                    <CardTitle className="text-2xl">AI Intelligence</CardTitle>
                    <p className="text-sm text-slate-600 mt-1">Market insights & recommendations</p>
                  </div>
                </div>
                {!aiInsights && (
                  <Button
                    onClick={generateAIInsights}
                    className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                  >
                    <Sparkles className="w-4 h-4 mr-2" />
                    Generate Insights
                  </Button>
                )}
              </div>
            </CardHeader>
            <CardContent className="p-6">
              {!aiInsights ? (
                <div className="text-center py-12">
                  <Sparkles className="w-16 h-16 mx-auto mb-3 text-purple-300" />
                  <p className="text-slate-600 mb-2">Ready to analyze your application</p>
                  <p className="text-sm text-slate-500">Get AI-powered insights on your competitive positioning</p>
                </div>
              ) : (
                <div className="space-y-6">
                  {/* Overall Score */}
                  <div className="p-6 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border border-purple-200">
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="font-semibold text-lg">Overall Assessment</h3>
                      <div className="text-4xl font-bold text-purple-600">
                        {aiInsights.overall_score}/100
                      </div>
                    </div>
                    <p className="text-sm text-slate-700">{aiInsights.competitive_position}</p>
                  </div>

                  {/* Strengths */}
                  {aiInsights.strengths && aiInsights.strengths.length > 0 && (
                    <div>
                      <h4 className="font-semibold mb-3 flex items-center gap-2">
                        <CheckCircle2 className="w-5 h-5 text-green-600" />
                        Strengths
                      </h4>
                      <div className="space-y-2">
                        {aiInsights.strengths.map((strength, idx) => (
                          <div key={idx} className="p-3 bg-green-50 border border-green-200 rounded-lg">
                            <p className="text-sm text-green-900">✓ {strength}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Recommendations */}
                  {aiInsights.recommendations && aiInsights.recommendations.length > 0 && (
                    <div>
                      <h4 className="font-semibold mb-3 flex items-center gap-2">
                        <TrendingUp className="w-5 h-5 text-blue-600" />
                        Recommendations
                      </h4>
                      <div className="space-y-2">
                        {aiInsights.recommendations.map((rec, idx) => (
                          <div key={idx} className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
                            <p className="text-sm text-blue-900">💡 {rec}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Analysis Details */}
                  <div className="grid grid-cols-2 gap-4">
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <h5 className="font-semibold text-sm mb-2">Market Alignment</h5>
                      <p className="text-xs text-slate-600">{aiInsights.market_alignment}</p>
                    </div>
                    <div className="p-4 bg-slate-50 rounded-lg">
                      <h5 className="font-semibold text-sm mb-2">Pricing Analysis</h5>
                      <p className="text-xs text-slate-600">{aiInsights.pricing_analysis}</p>
                    </div>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* Navigation Buttons */}
        {currentStep > 0 && (
          <div className="flex items-center justify-between mt-6">
            <Button
              variant="outline"
              onClick={handleBack}
              disabled={currentStep === 1}
              className="border-slate-300 hover:bg-slate-50"
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back
            </Button>

            {currentStep < steps.length - 1 ? (
              <Button
                onClick={handleNext}
                className="bg-[#0A39DF] hover:bg-[#0A39DF]/90 text-white"
              >
                Next Step
                <ArrowRight className="w-4 h-4 mr-2" />
              </Button>
            ) : (
              <Button
                onClick={handleSubmit}
                disabled={submitApplicationMutation.isPending}
                className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700"
              >
                {submitApplicationMutation.isPending ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Submitting...
                  </>
                ) : (
                  <>
                    <CheckCircle2 className="w-4 h-4 mr-2" />
                    Submit Application
                  </>
                )}
              </Button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}