import { useState, useEffect, useCallback, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { 
  MessageSquare, 
  Upload, 
  RefreshCw, 
  AlertCircle, 
  List, 
  Users,
  FileText,
  Play,
  UploadCloud,
  Loader2,
  Search,
  Filter,
  Folder,
  FolderPlus,
  MoreHorizontal,
  Plus,
  Check,
  X,
  Download
} from 'lucide-react';
import { toast } from 'sonner';
import { personasApi, focusGroupsApi } from '@/lib/api';
import GenerationProgressBar from '@/components/ui/GenerationProgressBar';
import DiscussionGuideViewer from './focus-group-session/DiscussionGuideViewer';

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  DropdownMenu, 
  DropdownMenuContent, 
  DropdownMenuItem, 
  DropdownMenuTrigger 
} from '@/components/ui/dropdown-menu';
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import UserCard from "@/components/UserCard";
import PersonaDetailsModal from "@/components/PersonaDetailsModal";
import { Persona } from "@/types/persona";

// Define folder interface
interface Folder {
  id: string;
  name: string;
  personaIds: string[];
}

// Default folder ID for "All Personas"
const DEFAULT_FOLDER_ID = 'all';

// Define filter state interface
interface FilterState {
  age: string[];
  gender: string[];
  occupation: string[];
  location: string[];
  techSavviness: string[];
  ethnicity: string[];
}

const formSchema = z.object({
  researchBrief: z.string().min(10, {
    message: "Research brief must be at least 10 characters.",
  }),
  focusGroupName: z.string().min(3, {
    message: "Focus group name must be at least 3 characters.",
  }),
  discussionTopics: z.string().min(10, {
    message: "Discussion topics are required.",
  }),
  creativeAssets: z.instanceof(FileList).optional(),
  duration: z.string().min(1, {
    message: "Duration is required.",
  }),
  llm_model: z.string().optional(),
});

// Sample discussion guide sections - We'll keep this but fetch real personas from the database

// Sample discussion guide sections
const sampleGuide = {
  introduction: "Welcome to our focus group discussion. Today we'll be exploring your experiences and opinions on [product/service]. There are no right or wrong answers, we're just interested in your honest thoughts.",
  warmup: "Let's start by introducing ourselves and sharing a bit about your background and daily routines relevant to this topic.",
  exploration: "Now, let's dive deeper into your experiences with similar products. What features do you find most valuable? What frustrations have you encountered?",
  creative: "We'll now show you some concepts and get your feedback. Please be honest and specific in your reactions.",
  conclusion: "To wrap up, I'd like to hear your final thoughts on what we've discussed today and any additional insights you'd like to share."
};

interface FocusGroupModeratorProps {
  draftToEdit?: any | null;
  onDraftSaved?: () => void;
}

export default function FocusGroupModerator({ draftToEdit, onDraftSaved }: FocusGroupModeratorProps = {}) {
  console.log('FocusGroupModerator component rendering, draftToEdit:', draftToEdit);
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = useState('setup');
  const [isGenerating, setIsGenerating] = useState(false);
  const [guideGenerationComplete, setGuideGenerationComplete] = useState(false);
  const [guideGenerationError, setGuideGenerationError] = useState(false);
  const [discussionGuide, setDiscussionGuide] = useState<string | any | null>(null);
  const [draftFocusGroupId, setDraftFocusGroupId] = useState<string | null>(null);
  
  // Ref to access current discussionGuide in callbacks without adding it as dependency
  const discussionGuideRef = useRef(discussionGuide);
  discussionGuideRef.current = discussionGuide;
  
  // Track if we've already loaded the draft to prevent re-loading
  const draftLoadedRef = useRef(false);
  
  // Helper function to determine if discussion guide is JSON format
  const isJsonFormat = (guide: any): boolean => {
    return guide && typeof guide === 'object' && guide.title && guide.sections;
  };
  const [selectedParticipants, setSelectedParticipants] = useState<string[]>([]);
  const [uploadedAssets, setUploadedAssets] = useState<File[]>([]);
  const [personas, setPersonas] = useState<any[]>([]);
  const [isLoadingPersonas, setIsLoadingPersonas] = useState(false);
  
  // Download state
  const [isDownloadingGuide, setIsDownloadingGuide] = useState(false);
  
  // Folder state
  const [folders, setFolders] = useState<Folder[]>([]);
  const [selectedFolder, setSelectedFolder] = useState<string>(DEFAULT_FOLDER_ID);
  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
  const [newFolderName, setNewFolderName] = useState('');
  const [folderToRename, setFolderToRename] = useState<Folder | null>(null);
  const [renameFolderName, setRenameFolderName] = useState('');
  
  // Filter state
  const [searchTerm, setSearchTerm] = useState('');
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [activeFilters, setActiveFilters] = useState<FilterState>({
    age: [],
    gender: [],
    occupation: [],
    location: [],
    techSavviness: [],
    ethnicity: [],
  });
  const [workingFilters, setWorkingFilters] = useState<FilterState>({
    age: [],
    gender: [],
    occupation: [],
    location: [],
    techSavviness: [],
    ethnicity: [],
  });
  
  // Persona details modal state
  const [isPersonaModalOpen, setIsPersonaModalOpen] = useState(false);
  const [selectedPersonaForModal, setSelectedPersonaForModal] = useState<Persona | null>(null);
  
  // Handler for opening persona details modal
  const handleOpenPersonaModal = (persona: Persona) => {
    setSelectedPersonaForModal(persona);
    setIsPersonaModalOpen(true);
  };
  
  // Handler for closing persona details modal
  const handleClosePersonaModal = () => {
    setIsPersonaModalOpen(false);
    setSelectedPersonaForModal(null);
  };
  
  // Function to collect unique filter options from personas
  const getFilterOptions = (personas: any[]) => {
    const options = {
      age: new Set<string>(),
      gender: new Set<string>(),
      occupation: new Set<string>(),
      location: new Set<string>(),
      techSavviness: new Set<string>(),
      ethnicity: new Set<string>(),
    };

    personas.forEach(persona => {
      // Add each attribute to the corresponding set
      if (persona.age) options.age.add(persona.age);
      if (persona.gender) options.gender.add(persona.gender);
      if (persona.occupation) options.occupation.add(persona.occupation);
      if (persona.location) options.location.add(persona.location);
      
      // Map numeric ranges to descriptive labels
      if (persona.techSavviness !== undefined) {
        const techLevel = 
          persona.techSavviness < 30 ? 'Low (0-30)' :
          persona.techSavviness < 70 ? 'Medium (31-70)' :
          'High (71-100)';
        options.techSavviness.add(techLevel);
      }
      
      // Convert boolean values to string labels
      
      if (persona.ethnicity) options.ethnicity.add(persona.ethnicity);
    });

    // Convert sets to sorted arrays
    return {
      age: Array.from(options.age).sort(),
      gender: Array.from(options.gender).sort(),
      occupation: Array.from(options.occupation).sort(),
      location: Array.from(options.location).sort(),
      techSavviness: Array.from(options.techSavviness).sort((a, b) => {
        const order = ['Low (0-30)', 'Medium (31-70)', 'High (71-100)'];
        return order.indexOf(a) - order.indexOf(b);
      }),
      ethnicity: Array.from(options.ethnicity).sort(),
    };
  };
  
  // Get filtered filter options based on current selections
  const getFilteredOptions = (currentCategory: keyof FilterState) => {
    // Create a temporary filter state without the current category
    const tempFilters = {...workingFilters};
    tempFilters[currentCategory] = []; // Clear the current category
    
    // Filter the personas using the temporary filters
    const eligiblePersonas = personas.filter(persona => {
      // For folder filtering
      let matchesFolder = true;
      if (selectedFolder !== DEFAULT_FOLDER_ID) {
        matchesFolder = false;
        if (persona.folderId === selectedFolder) {
          matchesFolder = true;
        } else {
          const folder = folders.find(f => f.id === selectedFolder);
          if (folder && folder.personaIds.includes(persona.id)) {
            matchesFolder = true;
          }
        }
      }
      
      if (!matchesFolder) return false;
      
      // Apply all filters except the one for the current category
      return Object.entries(tempFilters).every(([category, values]) => {
        if (values.length === 0) return true; // Skip empty filter arrays
        
        const cat = category as keyof FilterState;
        
        if (cat === 'techSavviness' && persona.techSavviness !== undefined) {
          const techLevel = 
            persona.techSavviness < 30 ? 'Low (0-30)' :
            persona.techSavviness < 70 ? 'Medium (31-70)' :
            'High (71-100)';
          return values.includes(techLevel);
        }
        else if (cat === 'age' && persona.age) {
          return values.includes(persona.age);
        }
        else if (cat === 'gender' && persona.gender) {
          return values.includes(persona.gender);
        }
        else if (cat === 'occupation' && persona.occupation) {
          return values.includes(persona.occupation);
        }
        else if (cat === 'location' && persona.location) {
          return values.includes(persona.location);
        }
        else if (cat === 'ethnicity' && persona.ethnicity) {
          return values.includes(persona.ethnicity);
        }
        
        return true; // No matching filter for this category
      });
    });
    
    // Now get the filter options from the filtered personas
    return getFilterOptions(eligiblePersonas);
  };

  // Apply filters function
  const applyFilters = () => {
    setIsFilterOpen(false);
    setTimeout(() => {
      setActiveFilters({...workingFilters});
    }, 0);
  };
  
  // Reset working filters
  const handleResetFilters = () => {
    setWorkingFilters({
      age: [],
      gender: [],
      occupation: [],
      location: [],
      techSavviness: [],
      ethnicity: [],
    });
  };
  
  // Toggle a filter value
  const toggleFilter = (category: keyof FilterState, value: string) => {
    setWorkingFilters(prev => {
      const newFilters = {...prev};
      // If value is already selected, remove it
      if (newFilters[category].includes(value)) {
        newFilters[category] = newFilters[category].filter(v => v !== value);
      } else {
        // Otherwise add it
        newFilters[category] = [...newFilters[category], value];
      }
      return newFilters;
    });
  };
  
  // Folder management functions
  const createNewFolder = () => {
    if (!newFolderName.trim()) {
      toast.error("Please enter a folder name");
      return;
    }
    
    const newFolder: Folder = {
      id: `folder-${Date.now()}`,
      name: newFolderName.trim(),
      personaIds: []
    };
    
    setFolders([...folders, newFolder]);
    setNewFolderName('');
    setIsCreatingFolder(false);
    
    toast.success(`Folder "${newFolderName}" created`);
  };
  
  const cancelFolderCreation = () => {
    setNewFolderName('');
    setIsCreatingFolder(false);
  };
  
  const startRenameFolder = (folder: Folder) => {
    setFolderToRename(folder);
    setRenameFolderName(folder.name);
  };
  
  const completeRenameFolder = () => {
    if (!folderToRename || !renameFolderName.trim()) {
      setFolderToRename(null);
      return;
    }
    
    const updatedFolders = folders.map(folder => 
      folder.id === folderToRename.id 
        ? { ...folder, name: renameFolderName.trim() } 
        : folder
    );
    
    setFolders(updatedFolders);
    setFolderToRename(null);
    toast.success(`Folder renamed to "${renameFolderName}"`);
  };
  
  const cancelRenameFolder = () => {
    setFolderToRename(null);
    setRenameFolderName('');
  };
  
  // Function to synchronize personas with folders (ensures folder data is consistent)
  const syncPersonasWithFolders = (personas: any[], currentFolders: Folder[]) => {
    // For each persona that has a folderId, make sure it's in the corresponding folder's personaIds
    personas.forEach(persona => {
      if (persona.folderId) {
        const folder = currentFolders.find(f => f.id === persona.folderId);
        if (folder && !folder.personaIds.includes(persona.id)) {
          // Add this persona to the folder's personaIds
          folder.personaIds.push(persona.id);
        }
      }
    });
    
    // Remove any persona IDs that don't correspond to actual personas
    currentFolders.forEach(folder => {
      // Clean up the personaIds array to remove undefined, null, and empty values
      folder.personaIds = folder.personaIds.filter(id => {
        // First filter out undefined/null values
        if (!id) {
          console.log(`Removing invalid personaId (${id}) from folder ${folder.name}`);
          return false;
        }
        
        // Then check if the ID matches an actual persona
        const persona = personas.find(p => {
          // Check if either id or _id property matches
          return p.id === id || p._id === id;
        });
        
        if (!persona) {
          console.log(`Removing non-existent personaId ${id} from folder ${folder.name}`);
        }
        
        return !!persona; // Only keep IDs that match an existing persona
      });
    });
    
    // This function no longer removes personas from folders if they have a different folderId
    // This allows personas to appear in multiple folders
    
    return currentFolders;
  };

  // Fetch personas from the database when component mounts
  useEffect(() => {
    const fetchPersonas = async () => {
      setIsLoadingPersonas(true);
      try {
        const response = await personasApi.getAll();
        console.log("Fetched personas for FocusGroupModerator:", response.data);
        
        if (Array.isArray(response.data) && response.data.length > 0) {
          setPersonas(response.data);
        } else {
          console.warn("No personas returned from API or invalid format", response.data);
          toast.warning("No participants available");
        }
      } catch (error) {
        console.error("Error fetching personas:", error);
        toast.error("Failed to load participants");
      } finally {
        setIsLoadingPersonas(false);
      }
    };
    
    // Load folders from localStorage first
    const storedFolders = localStorage.getItem('persona-folders');
    let loadedFolders: Folder[] = [];
    
    if (storedFolders) {
      try {
        loadedFolders = JSON.parse(storedFolders);
        setFolders(loadedFolders);
      } catch (error) {
        console.error("Failed to parse stored folders:", error);
      }
    }
    
    fetchPersonas();
  }, []);
  
  // Effect to save folders to localStorage when they change
  useEffect(() => {
    if (folders.length > 0) {
      console.log("Saving folders to localStorage:", folders);
      localStorage.setItem('persona-folders', JSON.stringify(folders));
    }
  }, [folders]);
  
  // Effect to sync persona-folder relationships when either changes
  useEffect(() => {
    if (personas.length > 0 && folders.length > 0) {
      console.log("Running folder sync with personas:", personas.length, "and folders:", folders.length);
      const updatedFolders = syncPersonasWithFolders(personas, [...folders]);
      // Only update if there are actual changes to avoid infinite loop
      if (JSON.stringify(updatedFolders) !== JSON.stringify(folders)) {
        console.log("Updating folders after sync");
        setFolders(updatedFolders);
      } else {
        console.log("No folder changes after sync");
      }
    }
  }, [personas, folders.length]);
  
  console.log('About to initialize form with useForm hook');
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      researchBrief: "",
      focusGroupName: "",
      discussionTopics: "",
      duration: "60",
      llm_model: "gemini-2.5-pro",
    },
  });
  console.log('Form initialized successfully');
  
  // Effect to load draft data when editing an existing draft
  useEffect(() => {
    if (draftToEdit && !draftLoadedRef.current) {
      console.log("Loading draft focus group:", draftToEdit);
      draftLoadedRef.current = true; // Mark as loaded to prevent re-loading
      
      // Set the draft ID
      setDraftFocusGroupId(draftToEdit.id || draftToEdit._id);
      
      // Load form data if available
      if (draftToEdit.name) {
        form.setValue('focusGroupName', draftToEdit.name);
      }
      if (draftToEdit.description || draftToEdit.objective) {
        form.setValue('researchBrief', draftToEdit.description || draftToEdit.objective || '');
      }
      if (draftToEdit.topic) {
        form.setValue('discussionTopics', draftToEdit.topic);
      }
      if (draftToEdit.duration) {
        form.setValue('duration', draftToEdit.duration.toString());
      }
      
      // Load discussion guide if available
      if (draftToEdit.discussionGuide) {
        setDiscussionGuide(draftToEdit.discussionGuide);
        // If we have a discussion guide, start on the review tab
        setActiveTab('review');
      }
      
      // Load selected participants if available
      if (draftToEdit.participants && Array.isArray(draftToEdit.participants)) {
        setSelectedParticipants(draftToEdit.participants);
      }
      
      toast.success("Draft focus group loaded", {
        description: "Continue editing your focus group setup"
      });
    }
  }, [draftToEdit, form]);

  // Function to generate a discussion guide via the API
  const generateDiscussionGuide = async (values: z.infer<typeof formSchema>, focusGroupId?: string): Promise<string> => {
    // Reset states
    setIsGenerating(true);
    setGuideGenerationComplete(false);
    setGuideGenerationError(false);
    
    try {
      // Prepare data for API request
      const requestData = {
        name: values.focusGroupName,
        description: values.researchBrief,
        objective: values.researchBrief,
        topic: values.discussionTopics,
        duration: parseInt(values.duration),
        llm_model: values.llm_model
      };
      
      // Call API to generate discussion guide, with focus group ID if available
      const response = focusGroupId 
        ? await focusGroupsApi.generateDiscussionGuideForGroup(focusGroupId, requestData)
        : await focusGroupsApi.generateDiscussionGuide(requestData);
      
      // Check if we got a successful response with a discussion guide
      if (response.data && response.data.discussionGuide) {
        setGuideGenerationComplete(true);
        return response.data.discussionGuide;
      } else {
        throw new Error("Failed to generate discussion guide");
      }
    } catch (error) {
      console.error("Error generating discussion guide:", error);
      setGuideGenerationError(true);
      
      // Extract error message from axios error response
      let errorMessage = 'Unknown error occurred';
      if (error?.response?.data?.error) {
        errorMessage = error.response.data.error;
      } else if (error?.message) {
        errorMessage = error.message;
      }
      
      if (errorMessage.includes('500') || errorMessage.includes('internal error') || errorMessage.includes('Internal Server Error')) {
        toast.error("AI service temporarily unavailable", {
          description: "The discussion guide generator is experiencing issues. Please try again in a few minutes.",
          action: {
            label: "Retry",
            onClick: () => generateDiscussionGuide(values)
          }
        });
      } else {
        toast.error("Failed to generate discussion guide", {
          description: errorMessage,
          action: {
            label: "Retry",
            onClick: () => generateDiscussionGuide(values)
          }
        });
      }
      
      // Fallback to template if API fails
      const guide = `
# Discussion Guide: ${values.focusGroupName}

## Introduction (5 minutes)
${sampleGuide.introduction}

## Warm-up Questions (10 minutes)
${sampleGuide.warmup}

## ${values.discussionTopics.split(',')[0]} Exploration (15 minutes)
${sampleGuide.exploration}

## Creative Testing (20 minutes)
${sampleGuide.creative}
${values.creativeAssets && values.creativeAssets.length > 0 ? `We'll be reviewing ${values.creativeAssets.length} creative assets.` : ''}

## Conclusion (10 minutes)
${sampleGuide.conclusion}

## Research Brief Context
${values.researchBrief}
      `;
      return guide;
    }
    // Note: Don't set isGenerating to false here - let the progress bar handle it
  };

  const handleGuideProgressComplete = () => {
    setIsGenerating(false);
    setGuideGenerationComplete(false);
    setGuideGenerationError(false);
  };

  async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      // First, save focus group to database to get an ID for asset uploads
      let focusGroupId = draftFocusGroupId;
      
      if (!focusGroupId) {
        const draftData = {
          name: values.focusGroupName,
          status: 'draft',
          participants: selectedParticipants,
          participants_count: selectedParticipants.length,
          date: new Date().toISOString(),
          duration: parseInt(values.duration),
          topic: values.discussionTopics.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-'),
          description: values.researchBrief,
          objective: values.researchBrief,
          llm_model: values.llm_model,
        };
        
        const savedDraft = await focusGroupsApi.create(draftData);
        focusGroupId = savedDraft.data.focus_group_id || savedDraft.data.id || savedDraft.data._id;
        setDraftFocusGroupId(focusGroupId);
        console.log("Draft focus group created for asset upload:", savedDraft, "with ID:", focusGroupId);
      }
      
      // Handle creative assets upload if any
      if (values.creativeAssets && values.creativeAssets.length > 0 && focusGroupId) {
        try {
          const formData = new FormData();
          Array.from(values.creativeAssets).forEach(file => {
            formData.append('assets', file);
          });
          
          const uploadResponse = await focusGroupsApi.uploadAssets(focusGroupId, formData);
          const uploadResult = uploadResponse.data;
          console.log("Assets uploaded successfully:", uploadResult);
          
          toast.success(`${uploadResult.uploaded_assets} asset(s) uploaded successfully`, {
            description: "Assets will be included in the discussion guide",
          });
          
          // Store uploaded asset info for display
          const assets = Array.from(values.creativeAssets);
          setUploadedAssets(assets);
          
        } catch (uploadError: any) {
          console.error("Asset upload failed:", uploadError);
          
          // Handle specific error codes from backend
          const errorData = uploadError.response?.data;
          let errorTitle = "Asset upload failed";
          let errorDescription = "Some assets could not be uploaded";
          
          if (errorData?.code === 'TEMP_DIR_ERROR') {
            errorTitle = "Upload temporarily unavailable";
            errorDescription = "Server storage issue. Please try again in a moment.";
          } else if (errorData?.code === 'UPLOAD_SYSTEM_FAILURE') {
            errorTitle = "Upload system unavailable";
            errorDescription = "Critical server issue. Please contact support.";
          } else if (errorData?.can_retry) {
            errorTitle = "Upload failed - can retry";
            errorDescription = errorData?.details || "Please try uploading again.";
          }
          
          toast.error(errorTitle, {
            description: errorDescription,
          });
          
          // Continue with discussion guide generation even if upload fails
          console.log("Continuing without assets due to upload failure");
        }
      }
      
      // Update focus group with current form values before generating guide
      // This ensures the backend uses the latest model selection
      if (focusGroupId) {
        try {
          const preUpdateData = {
            name: values.focusGroupName,
            participants: selectedParticipants,
            participants_count: selectedParticipants.length,
            duration: parseInt(values.duration),
            topic: values.discussionTopics.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-'),
            description: values.researchBrief,
            objective: values.researchBrief,
            llm_model: values.llm_model
          };
          
          await focusGroupsApi.update(focusGroupId, preUpdateData);
          console.log("Focus group updated with latest form values before guide generation");
          console.log(`🔄 Updated focus group ${focusGroupId} with model: ${values.llm_model}`);
        } catch (error) {
          console.error("Failed to update focus group before guide generation:", error);
          // Continue anyway, as the generateDiscussionGuide will use form values as fallback
        }
      }
      
      // Generate discussion guide based on form input (after database is updated)
      const guide = await generateDiscussionGuide(values, focusGroupId);
      setDiscussionGuide(guide);
      
      // Update the focus group with the discussion guide
      try {
        const updateData = {
          name: values.focusGroupName,
          status: 'draft',
          participants: selectedParticipants,
          participants_count: selectedParticipants.length,
          date: new Date().toISOString(),
          duration: parseInt(values.duration),
          topic: values.discussionTopics.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-'),
          description: values.researchBrief,
          objective: values.researchBrief,
          llm_model: values.llm_model,
          discussionGuide: guide
        };
        
        await focusGroupsApi.update(focusGroupId, updateData);
        console.log("Focus group updated with discussion guide");
        
        toast.success("Progress saved as draft", {
          description: "Your focus group setup has been automatically saved",
        });
      } catch (error) {
        console.error("Failed to update focus group with discussion guide:", error);
        toast.error("Failed to save draft", {
          description: "Discussion guide generated, but draft save failed",
        });
      }
      
      // Move to review tab after successful generation
      setActiveTab('review');
      
      toast.success("Discussion guide generated", {
        description: "Review and edit before proceeding",
      });
      
    } catch (error) {
      console.error("Error in focus group creation flow:", error);
      toast.error("Focus group creation failed", {
        description: error.message || "An unexpected error occurred",
      });
    }
  }

  // Filtered personas based on search term, folder selection, and active filters
  const filteredPersonas = (() => {
    const filtered = personas.filter(persona => {
      // Text search matching
      const matchesSearch = (
        persona.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        (persona.occupation && persona.occupation.toLowerCase().includes(searchTerm.toLowerCase())) ||
        (persona.location && persona.location.toLowerCase().includes(searchTerm.toLowerCase()))
      );
      
      // Apply additional filter criteria
      const matchesFilters = 
        // Match age filter
        (activeFilters.age.length === 0 || activeFilters.age.includes(persona.age)) &&
        // Match gender filter
        (activeFilters.gender.length === 0 || activeFilters.gender.includes(persona.gender)) &&
        // Match occupation filter
        (activeFilters.occupation.length === 0 || activeFilters.occupation.includes(persona.occupation)) &&
        // Match location filter
        (activeFilters.location.length === 0 || activeFilters.location.includes(persona.location)) &&
        // Match ethnicity filter
        (activeFilters.ethnicity.length === 0 || 
          (persona.ethnicity && activeFilters.ethnicity.includes(persona.ethnicity))) &&
        // Match tech savviness filter (convert numeric value to text bucket)
        (activeFilters.techSavviness.length === 0 || 
          (persona.techSavviness !== undefined && activeFilters.techSavviness.includes(
            persona.techSavviness < 30 ? 'Low (0-30)' :
            persona.techSavviness < 70 ? 'Medium (31-70)' :
            'High (71-100)'
          ))) &&
true;
      
      // Folder filtering
      let matchesFolder = true;
      
      // Only filter by folder if not the default "All Personas" folder
      if (selectedFolder !== DEFAULT_FOLDER_ID) {
        matchesFolder = false; // Start with false and set to true if it matches
        
        // First try using the folderId property
        if (persona.folderId === selectedFolder) {
          matchesFolder = true;
        } else {
          // Fall back to the folder's personaIds array
          const folder = folders.find(f => f.id === selectedFolder);
          if (folder) {
            // Filter out any undefined/null IDs from the personaIds array
            const validFolderIds = folder.personaIds.filter(id => !!id);
            
            // Check both id and _id properties to ensure compatibility with both formats
            const personaId = persona.id || persona._id;
            if (validFolderIds.includes(personaId)) {
              matchesFolder = true;
            }
          }
        }
      }
      
      return matchesSearch && matchesFilters && matchesFolder;
    });
    
    // Debug log filtered results
    console.log(`Filtered personas: ${filtered.length}/${personas.length}`);
    console.log(`Selected folder: ${selectedFolder === DEFAULT_FOLDER_ID ? 'All Personas' : 
      folders.find(f => f.id === selectedFolder)?.name || selectedFolder}`);
    
    if (selectedFolder !== DEFAULT_FOLDER_ID) {
      const folder = folders.find(f => f.id === selectedFolder);
      if (folder) {
        // Filter out undefined/null personaIds
        const validPersonaIds = folder.personaIds.filter(id => !!id);
        console.log(`Folder details: ${folder.name}, ID: ${folder.id}, Contains: ${validPersonaIds.length} valid personas`);
        console.log("Folder personaIds (valid only):", validPersonaIds);
        
        const personasWithFolderId = personas.filter(p => p.folderId === selectedFolder);
        console.log(`Personas with folderId matching this folder: ${personasWithFolderId.length}`);
        
        const personasInFolderArray = personas.filter(p => {
          const personaId = p.id || p._id;
          return folder.personaIds.includes(personaId);
        });
        console.log(`Personas in folder's personaIds array: ${personasInFolderArray.length}`);
      }
    }
    
    return filtered;
  })();

  const handleParticipantSelection = (id: string) => {
    console.log("Toggling selection for participant ID:", id);
    
    setSelectedParticipants(prev => {
      const isSelected = prev.includes(id);
      
      console.log("Current selection:", {
        id,
        isCurrentlySelected: isSelected,
        currentSelections: [...prev]
      });
      
      // Toggle selection
      const newSelection = isSelected
        ? prev.filter(pId => pId !== id)
        : [...prev, id];
      
      console.log("New selection:", newSelection);
      
      // Auto-save participant selection if we have a draft
      if (draftFocusGroupId && discussionGuide) {
        saveDraftParticipants(newSelection);
      }
      
      return newSelection;
    });
  };

  // Function to auto-save participant changes to draft
  const saveDraftParticipants = async (participants: string[]) => {
    if (!draftFocusGroupId) return;
    
    try {
      const values = form.getValues();
      const draftData = {
        name: values.focusGroupName,
        status: 'draft',
        participants: participants,
        participants_count: participants.length,
        date: new Date().toISOString(),
        duration: parseInt(values.duration),
        topic: values.discussionTopics.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-'),
        description: values.researchBrief,
        objective: values.researchBrief,
        discussionGuide: discussionGuide
      };
      
      await focusGroupsApi.update(draftFocusGroupId, draftData);
      console.log("Participant selection auto-saved to draft");
    } catch (error) {
      console.error("Failed to auto-save participant selection:", error);
      // Don't show toast for auto-save failures to avoid spam
    }
  };

  const handleAssetUpload = (files: FileList | null) => {
    if (files && files.length > 0) {
      const newAssets = Array.from(files);
      setUploadedAssets(prev => [...prev, ...newAssets]);
      
      toast.success(`${newAssets.length} asset(s) uploaded`, {
        description: "Assets will be included in the focus group",
      });
    }
  };

  // Function to save the focus group to the database
  const saveFocusGroup = async () => {
    try {
      // Get form values
      const values = form.getValues();
      
      const focusGroupData = {
        name: values.focusGroupName,
        status: 'in-progress',
        participants: selectedParticipants,
        participants_count: selectedParticipants.length,
        date: new Date().toISOString(),
        duration: parseInt(values.duration),
        topic: values.discussionTopics.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-'),
        discussionGuide: discussionGuide
      };
      
      // Use the API from lib/api.ts to save the focus group
      const response = await focusGroupsApi.create(focusGroupData);
      
      const result = response.data;
      console.log("Focus group created successfully:", result);
      return result.focus_group_id;
    } catch (error) {
      console.error('Error saving focus group:', error);
      throw error;
    }
  };

  // Function to download discussion guide as markdown
  const handleDownloadDiscussionGuide = useCallback(async () => {
    if (!discussionGuideRef.current) {
      toast.error("No discussion guide available", {
        description: "Please generate a discussion guide first"
      });
      return;
    }

    setIsDownloadingGuide(true);
    
    try {
      // Use the client-side download utility
      const { downloadDiscussionGuideAsMarkdown } = await import('@/utils/discussionGuideMarkdown');
      const formValues = form.getValues();
      
      downloadDiscussionGuideAsMarkdown(discussionGuideRef.current, formValues.focusGroupName);
      
      toast.success("Discussion guide downloaded", {
        description: "The guide has been saved to your downloads folder"
      });
    } catch (error) {
      console.error('Error downloading discussion guide:', error);
      toast.error("Download failed", {
        description: "Unable to download the discussion guide. Please try again."
      });
    } finally {
      setIsDownloadingGuide(false);
    }
  }, [form]); // Only depend on form, use ref for discussionGuide

  // Stable callback for saving discussion guide changes
  const handleSaveDiscussionGuide = useCallback(async (updatedGuide: any) => {
    console.log('📝 handleSaveDiscussionGuide called with:', updatedGuide);
    setDiscussionGuide(updatedGuide);
    toast.success('Discussion guide updated', {
      description: 'Your changes have been saved.'
    });
  }, []);

  // Stable dummy callbacks for optional props
  const handleSectionSelect = useCallback(() => {}, []);
  const handleSetPosition = useCallback(() => {}, []);

  const handleStartFocusGroup = async () => {
    // Validate form data
    if (!form.getValues().focusGroupName) {
      toast.error("Missing focus group name", {
        description: "Please provide a name for the focus group",
      });
      return;
    }
    
    if (!discussionGuide) {
      toast.error("Missing discussion guide", {
        description: "Please generate a discussion guide first",
      });
      return;
    }
    
    if (selectedParticipants.length < 1) {
      toast.error("Not enough participants", {
        description: "Please select at least one participant for the focus group",
      });
      return;
    }
    
    console.log("Starting focus group with participants:", selectedParticipants);
    
    try {
      // Show loading toast
      toast.loading("Creating focus group...");
      
      // Save the focus group to the database first
      let focusGroupId;
      if (draftFocusGroupId) {
        // Update existing draft to in-progress status
        const values = form.getValues();
        const updatedFocusGroupData = {
          name: values.focusGroupName,
          status: 'in-progress',
          participants: selectedParticipants,
          participants_count: selectedParticipants.length,
          date: new Date().toISOString(),
          duration: parseInt(values.duration),
          topic: values.discussionTopics.split(',')[0].trim().toLowerCase().replace(/\s+/g, '-'),
          description: values.researchBrief,
          objective: values.researchBrief,
          discussionGuide: discussionGuide
        };
        
        const response = await focusGroupsApi.update(draftFocusGroupId, updatedFocusGroupData);
        focusGroupId = draftFocusGroupId;
        console.log("Draft focus group updated to in-progress:", response);
        
        // Notify parent component that draft was saved
        if (onDraftSaved) {
          onDraftSaved();
        }
      } else {
        // Create new focus group
        focusGroupId = await saveFocusGroup();
      }
      
      // Dismiss loading toast and show success
      toast.dismiss();
      toast.success("Focus group created successfully", {
        description: "The AI moderator is now running the session",
      });
      
      // Navigate to the focus group session
      navigate(`/focus-groups/${focusGroupId}`);
    } catch (error: any) {
      // Dismiss loading toast
      toast.dismiss();
      
      // Show specific error message if available
      const errorMessage = error?.message || "Unknown error";
      console.error("Failed to start focus group:", error);
      
      toast.error("Failed to create focus group", {
        description: "Please try again or check your connection",
      });
    }
  };

  return (
    <div className="glass-panel rounded-xl p-6">
      <div className="flex items-center gap-2 mb-6">
        <MessageSquare className="h-5 w-5 text-primary" />
        <h2 className="font-sf text-xl font-semibold">AI Focus Group Moderator</h2>
      </div>
      
      {/* Progress Bar - Consistent top placement for discussion guide generation */}
      {isGenerating && (
        <div className="mb-6">
          <GenerationProgressBar
            isActive={isGenerating}
            isComplete={guideGenerationComplete}
            hasError={guideGenerationError}
            label="Generating discussion guide"
            onComplete={handleGuideProgressComplete}
          />
        </div>
      )}
      
      <Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-3 mb-6">
          <TabsTrigger value="setup">Setup</TabsTrigger>
          <TabsTrigger value="review">Review & Edit</TabsTrigger>
          <TabsTrigger value="participants">Participants</TabsTrigger>
        </TabsList>
        
        <TabsContent value="setup">
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              <FormField
                control={form.control}
                name="focusGroupName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Focus Group Name</FormLabel>
                    <FormControl>
                      <Input placeholder="e.g., Mobile App UX Evaluation" {...field} />
                    </FormControl>
                    <FormDescription>
                      Give your focus group a descriptive name
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <FormField
                  control={form.control}
                  name="researchBrief"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Research Brief</FormLabel>
                      <FormControl>
                        <Textarea 
                          placeholder="Describe your research objectives..." 
                          className="h-36"
                          {...field} 
                        />
                      </FormControl>
                      <FormDescription>
                        Provide context about what you want to learn
                      </FormDescription>
                      <FormMessage />
                    </FormItem>
                  )}
                />
                
                <div className="space-y-6">
                  <FormField
                    control={form.control}
                    name="discussionTopics"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Discussion Topics</FormLabel>
                        <FormControl>
                          <Textarea 
                            placeholder="List main topics to cover, separated by commas" 
                            className="h-24"
                            {...field} 
                          />
                        </FormControl>
                        <FormDescription>
                          E.g., User experience, feature preferences, pain points
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  
                  <FormField
                    control={form.control}
                    name="duration"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Duration (minutes)</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select duration" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="30">30 minutes</SelectItem>
                            <SelectItem value="45">45 minutes</SelectItem>
                            <SelectItem value="60">60 minutes</SelectItem>
                            <SelectItem value="90">90 minutes</SelectItem>
                            <SelectItem value="120">120 minutes</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormDescription>
                          How long should the focus group session last?
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  
                  <FormField
                    control={form.control}
                    name="llm_model"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>AI Model</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select AI model" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="gemini-2.5-pro">Gemini 2.5 Pro</SelectItem>
                            <SelectItem value="gpt-4.1">GPT-4.1</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormDescription>
                          Choose which AI model to use for generating responses and discussion guides
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </div>
              
              <FormField
                control={form.control}
                name="creativeAssets"
                render={({ field: { value, onChange, ...fieldProps } }) => (
                  <FormItem>
                    <FormLabel>Creative Assets (Optional)</FormLabel>
                    <FormControl>
                      <div className="border-2 border-dashed border-slate-200 rounded-lg p-6 flex flex-col items-center justify-center bg-slate-50 hover:bg-slate-100 transition cursor-pointer">
                        <UploadCloud className="h-10 w-10 text-slate-400 mb-2" />
                        <p className="text-sm text-slate-600 mb-1">Upload creative assets for testing</p>
                        <p className="text-xs text-slate-500 mb-3">Images, mockups, or product designs</p>
                        <Input
                          {...fieldProps}
                          type="file"
                          accept="image/*,.pdf"
                          multiple
                          onChange={(e) => {
                            onChange(e.target.files);
                          }}
                          className="hidden"
                          id="assets-file-input"
                        />
                        <Button
                          type="button"
                          variant="outline"
                          size="sm"
                          onClick={() => document.getElementById('assets-file-input')?.click()}
                        >
                          <Upload className="mr-2 h-4 w-4" />
                          Select Files
                        </Button>
                        {value && value.length > 0 && (
                          <p className="text-xs text-primary mt-2">
                            {value.length} file(s) selected
                          </p>
                        )}
                      </div>
                    </FormControl>
                    <FormDescription>
                      Upload visuals that you want feedback on during the session
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              
              <div className="space-y-3">
                <div className="flex justify-end">
                  <Button 
                    type="submit"
                    disabled={isGenerating}
                    className="min-w-32"
                  >
                    <MessageSquare className="mr-2 h-4 w-4" />
                    {isGenerating ? "Generating..." : "Generate Discussion Guide"}
                  </Button>
                </div>
                
              </div>
            </form>
          </Form>
        </TabsContent>
        
        <TabsContent value="review">
          <div className="space-y-6">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-3">
                    <h3 className="font-sf text-lg font-medium">AI-Generated Discussion Guide</h3>
                    {discussionGuide && (
                      <Badge variant="outline" className="text-xs">
                        {isJsonFormat(discussionGuide) ? 'Structured JSON' : 'Legacy Text'}
                      </Badge>
                    )}
                  </div>
                </div>
                
                <div className="prose max-w-none">
                  {discussionGuide ? (
                      <DiscussionGuideViewer 
                        discussionGuide={discussionGuide}
                        showProgress={false}
                        collapsible={true}
                        defaultExpanded={true}
                        className="border-0"
                        onSave={handleSaveDiscussionGuide}
                        onDownload={handleDownloadDiscussionGuide}
                        onSectionSelect={handleSectionSelect}
                        onSetPosition={handleSetPosition}
                        isDownloading={isDownloadingGuide}
                        focusGroupId={draftFocusGroupId}
                      />
                  ) : (
                    <div className="bg-slate-50 p-4 rounded border text-center text-slate-600">
                      No discussion guide generated yet. Complete the setup and click "Generate Discussion Guide" to create one.
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
            
            {uploadedAssets.length > 0 && (
              <Card>
                <CardContent className="p-6">
                  <h3 className="font-sf text-lg font-medium mb-4">Uploaded Creative Assets</h3>
                  
                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                    {uploadedAssets.map((asset, index) => (
                      <div key={index} className="border rounded-md p-2">
                        <div className="aspect-square bg-slate-100 rounded flex items-center justify-center mb-2">
                          {asset.type.startsWith('image/') ? (
                            <img 
                              src={URL.createObjectURL(asset)} 
                              alt={`Asset ${index + 1}`} 
                              className="max-h-full max-w-full object-contain"
                            />
                          ) : (
                            <FileText className="h-10 w-10 text-slate-400" />
                          )}
                        </div>
                        <p className="text-xs truncate">{asset.name}</p>
                      </div>
                    ))}
                  </div>
                  
                </CardContent>
              </Card>
            )}
            
            <div className="flex justify-between">
              <Button 
                variant="outline" 
                onClick={() => setActiveTab('setup')}
              >
                Back to Setup
              </Button>
              
              <Button 
                onClick={() => setActiveTab('participants')}
              >
                Select Participants
                <Users className="ml-2 h-4 w-4" />
              </Button>
            </div>
          </div>
        </TabsContent>
        
        <TabsContent value="participants">
          <div className="flex flex-col md:flex-row gap-6">
            {/* Folder sidebar */}
            <div className="w-full md:w-64 space-y-4">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium">Folders</h3>
                <Button 
                  variant="ghost" 
                  size="sm" 
                  onClick={() => {
                    console.log("Clicked 'Create new folder' button");
                    setIsCreatingFolder(true);
                  }}
                  className="h-7 w-7 p-0"
                >
                  <FolderPlus className="h-4 w-4" />
                </Button>
              </div>
              
              <div className="space-y-1">
                <button
                  onClick={() => {
                    console.log("Clicked 'All Personas' folder");
                    console.log("All personas count:", personas.length);
                    setSelectedFolder(DEFAULT_FOLDER_ID);
                    // Log filtered personas after state update
                    setTimeout(() => {
                      console.log(`Will show all ${personas.length} personas`);
                    }, 0);
                  }}
                  className={`w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-left transition-colors ${
                    selectedFolder === DEFAULT_FOLDER_ID 
                      ? 'bg-primary/10 text-primary font-medium' 
                      : 'hover:bg-slate-100'
                  }`}
                >
                  <Folder className="h-4 w-4" />
                  <span>All Personas</span>
                </button>
                
                {folders.map(folder => (
                  <div 
                    key={folder.id}
                    className="flex items-center justify-between group"
                  >
                    {folderToRename && folderToRename.id === folder.id ? (
                      <div className="flex-1 flex items-center px-3 py-2 space-x-2">
                        <Folder className="h-4 w-4" />
                        <Input
                          value={renameFolderName}
                          onChange={e => setRenameFolderName(e.target.value)}
                          placeholder="Folder name"
                          className="h-7 text-sm"
                          autoFocus
                          onKeyDown={e => {
                            if (e.key === 'Enter') {
                              completeRenameFolder();
                            } else if (e.key === 'Escape') {
                              cancelRenameFolder();
                            }
                          }}
                        />
                        <Button 
                          size="sm" 
                          variant="ghost" 
                          onClick={() => {
                            console.log(`Confirming folder rename: "${folderToRename?.name}" to "${renameFolderName}"`);
                            completeRenameFolder();
                          }}
                          className="h-7 w-7 p-0"
                        >
                          <Check className="h-4 w-4" />
                        </Button>
                        <Button 
                          size="sm" 
                          variant="ghost" 
                          onClick={() => {
                            console.log(`Cancelling rename of folder: "${folderToRename?.name}"`);
                            cancelRenameFolder();
                          }}
                          className="h-7 w-7 p-0"
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </div>
                    ) : (
                      <>
                        <button
                          onClick={() => {
                            console.log(`Clicked folder: ${folder.name} (ID: ${folder.id})`);
                            // Clean up invalid personaIds first
                            const validPersonaIds = folder.personaIds.filter(id => !!id);
                            console.log(`Current persona count in folder: ${validPersonaIds.length}`);
                            console.log("Folder personaIds:", validPersonaIds);
                            console.log("All personas count:", personas.length);
                            setSelectedFolder(folder.id);
                            // Log filtered personas after state update
                            setTimeout(() => {
                              const filtered = personas.filter(p => {
                                // First try using the folderId property
                                if (p.folderId === folder.id) return true;
                                // Fall back to the folder's personaIds array
                                const personaId = p.id || p._id;
                                return validPersonaIds.includes(personaId);
                              });
                              console.log(`Will show ${filtered.length} personas after filtering`);
                              console.log("Filtered personas:", filtered.map(p => p.name));
                            }, 0);
                          }}
                          className={`flex-1 flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-left transition-colors ${
                            selectedFolder === folder.id 
                              ? 'bg-primary/10 text-primary font-medium' 
                              : 'hover:bg-slate-100'
                          }`}
                        >
                          <Folder className="h-4 w-4" />
                          <span>{folder.name}</span>
                          <span className="text-muted-foreground text-xs ml-auto">
                            {folder.personaIds.filter(id => !!id).length}
                          </span>
                        </button>
                        
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button 
                              variant="ghost" 
                              size="sm" 
                              className="h-7 w-7 p-0 opacity-0 group-hover:opacity-100"
                            >
                              <MoreHorizontal className="h-4 w-4" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuItem onClick={() => {
                              console.log(`Initiating rename for folder: ${folder.name} (ID: ${folder.id})`);
                              startRenameFolder(folder);
                            }}>
                              Rename
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </>
                    )}
                  </div>
                ))}
                
                {isCreatingFolder && (
                  <div className="flex items-center px-3 py-2 space-x-2">
                    <div className="flex-1 flex items-center space-x-2">
                      <Folder className="h-4 w-4" />
                      <Input
                        value={newFolderName}
                        onChange={e => setNewFolderName(e.target.value)}
                        placeholder="Folder name"
                        className="h-7 text-sm"
                        autoFocus
                        onKeyDown={e => {
                          if (e.key === 'Enter') {
                            createNewFolder();
                          } else if (e.key === 'Escape') {
                            cancelFolderCreation();
                          }
                        }}
                      />
                    </div>
                    <Button 
                      size="sm" 
                      variant="ghost" 
                      onClick={() => {
                        console.log(`Confirming creation of new folder: "${newFolderName}"`);
                        createNewFolder();
                      }}
                      className="h-7 w-7 p-0"
                    >
                      <Check className="h-4 w-4" />
                    </Button>
                    <Button 
                      size="sm" 
                      variant="ghost" 
                      onClick={() => {
                        console.log("Cancelling folder creation");
                        cancelFolderCreation();
                      }}
                      className="h-7 w-7 p-0"
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                )}
              </div>
            </div>
            
            {/* Main content */}
            <div className="flex-1">
              <Card className="mb-4">
                <CardContent className="p-6">
                  <div className="flex flex-col space-y-6">
                    <div className="flex items-center justify-between">
                      <h3 className="font-sf text-lg font-medium">Select Participants</h3>
                      <div className="flex items-center">
                        <Users className="h-5 w-5 mr-2 text-muted-foreground" />
                        <span className="text-sm font-medium">
                          {selectedParticipants.length} of {filteredPersonas.length} selected
                        </span>
                      </div>
                    </div>
                    
                    {/* Search and filter bar */}
                    <div className="flex flex-col sm:flex-row gap-4">
                      <div className="relative flex-1">
                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
                        <Input
                          placeholder="Search personas by name, occupation, or location..."
                          className="pl-10 bg-white"
                          value={searchTerm}
                          onChange={(e) => setSearchTerm(e.target.value)}
                        />
                      </div>
                      
                      <Button 
                        variant="outline" 
                        className="flex items-center gap-2"
                        onClick={() => setIsFilterOpen(true)}
                      >
                        <Filter className="h-4 w-4" />
                        <span>Filter{Object.values(activeFilters).some(arr => arr.length > 0) ? ` (${Object.values(activeFilters).reduce((count, arr) => count + arr.length, 0)})` : ''}</span>
                      </Button>
                    </div>
                    
                    {isLoadingPersonas ? (
                      <div className="flex justify-center items-center py-12">
                        <Loader2 className="h-8 w-8 animate-spin text-primary" />
                      </div>
                    ) : filteredPersonas.length > 0 ? (
                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                        {filteredPersonas.map((persona) => {
                          // Ensure we have a valid ID (use MongoDB _id if available)
                          const personaId = persona._id || persona.id;
                          
                          return (
                            <UserCard 
                              key={personaId}
                              user={{
                                id: personaId,
                                _id: persona._id,
                                name: persona.name,
                                age: persona.age,
                                gender: persona.gender,
                                occupation: persona.occupation,
                                location: persona.location || 'Unknown',
                                techSavviness: persona.techSavviness || 50,
                                personality: persona.personality || 'No description available',
                                oceanTraits: persona.oceanTraits,
                                qualitativeAttributes: persona.qualitativeAttributes,
                                topPersonalityTraits: persona.topPersonalityTraits,
                                aiSynthesizedBio: persona.aiSynthesizedBio,
                              }}
                              selected={selectedParticipants.includes(personaId)}
                              onSelectionToggle={() => handleParticipantSelection(personaId)}
                              showModalInsteadOfNavigate={true}
                              onOpenPersonaModal={handleOpenPersonaModal}
                            />
                          );
                        })}
                      </div>
                    ) : (
                      <div className="text-center py-12">
                        <p className="text-muted-foreground">No personas available matching your criteria.</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
              
              <div className="flex justify-between">
                <Button 
                  variant="outline" 
                  onClick={() => setActiveTab('review')}
                >
                  Back to Review
                </Button>
                
                <Button 
                  onClick={handleStartFocusGroup}
                  disabled={selectedParticipants.length < 1 || !discussionGuide}
                >
                  <Play className="mr-2 h-4 w-4" />
                  Start Focus Group Session
                </Button>
              </div>
            </div>
          </div>
          
          {/* Filter Dialog */}
          <Dialog 
            open={isFilterOpen} 
            onOpenChange={(open) => {
              if (!open) {
                setIsFilterOpen(false);
              } else {
                setIsFilterOpen(open);
                // When opening, set working filters to active filters
                setWorkingFilters({...activeFilters});
              }
            }}
          >
            <DialogContent 
              className="max-w-4xl max-h-[80vh] overflow-y-auto"
            >
              <DialogHeader>
                <DialogTitle>Filter Personas</DialogTitle>
                <DialogDescription>
                  Select attributes to filter personas by. Multiple selections within a category use OR logic, 
                  different categories use AND logic.
                </DialogDescription>
              </DialogHeader>
              
              <div className="py-4 space-y-6">
                {/* Display number of active filters */}
                {Object.values(workingFilters).some(arr => arr.length > 0) && (
                  <div className="bg-muted/30 p-3 rounded-md">
                    <p className="text-sm text-muted-foreground">
                      {Object.values(workingFilters).reduce((count, arr) => count + arr.length, 0)} active filters
                    </p>
                  </div>
                )}
                
                {(() => {
                  // Get filter options from all personas (for default state)
                  const defaultFilterOptions = getFilterOptions(personas);
                  
                  // Check if any filters are active
                  const noActiveFilters = Object.values(workingFilters).every(values => values.length === 0);
                  
                  // Render filter section
                  const renderFilterSection = (
                    title: string, 
                    category: keyof FilterState,
                    columns: number = 1
                  ) => {
                    // Get options for this category based on other active filters
                    const filteredOptions = noActiveFilters ? 
                      defaultFilterOptions[category] : 
                      getFilteredOptions(category)[category];
                    
                    // Include already selected options that might be filtered out
                    const selectedOptions = workingFilters[category];
                    
                    // Combine filtered options with selected options
                    const combinedOptions = [...new Set([...filteredOptions, ...selectedOptions])].sort();
                    
                    if (combinedOptions.length === 0) return null;
                    
                    return (
                      <div className="mb-6">
                        <h3 className="text-sm font-medium mb-3">{title}</h3>
                        <div className={`grid grid-cols-1 ${columns === 2 ? 'sm:grid-cols-2' : columns === 3 ? 'sm:grid-cols-2 md:grid-cols-3' : ''} gap-2`}>
                          {combinedOptions.map(option => {
                            const isSelected = workingFilters[category].includes(option);
                            const isAvailable = filteredOptions.includes(option);
                            
                            return (
                              <div 
                                key={option} 
                                className={`flex items-center space-x-2 ${!isAvailable && !isSelected ? 'opacity-50' : ''}`}
                              >
                                <Checkbox 
                                  id={`${category}-${option}`}
                                  checked={isSelected}
                                  onCheckedChange={() => toggleFilter(category, option)}
                                  disabled={!isAvailable && !isSelected}
                                />
                                <Label 
                                  htmlFor={`${category}-${option}`}
                                  className="truncate overflow-hidden"
                                >
                                  {option}
                                  {isSelected && !isAvailable && (
                                    <span className="ml-1 text-xs text-muted-foreground">(no matches)</span>
                                  )}
                                </Label>
                              </div>
                            );
                          })}
                        </div>
                      </div>
                    );
                  };
                  
                  return (
                    <>
                      {renderFilterSection('Gender', 'gender', 3)}
                      {renderFilterSection('Age', 'age', 3)}
                      {renderFilterSection('Ethnicity', 'ethnicity', 2)}
                      {renderFilterSection('Location', 'location', 2)}
                      {renderFilterSection('Occupation', 'occupation', 2)}
                      {renderFilterSection('Tech Savviness', 'techSavviness', 3)}
                      
                      {/* Boolean Attributes */}
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                      </div>
                    </>
                  );
                })()}
              </div>
              
              <DialogFooter>
                <Button 
                  variant="outline" 
                  onClick={handleResetFilters}
                >
                  Reset
                </Button>
                <Button onClick={applyFilters}>
                  Apply Filters
                </Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </TabsContent>
      </Tabs>
      
      {/* Persona Details Modal */}
      <PersonaDetailsModal
        persona={selectedPersonaForModal}
        isOpen={isPersonaModalOpen}
        onClose={handleClosePersonaModal}
      />
    </div>
  );
}