import { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { format } from 'date-fns';
import {
  Mail,
  Clock,
  CheckCircle2,
  XCircle,
  Filter,
  Search,
  ChevronDown,
  AlertCircle,
  Send,
  ArrowUpRight,
  ArrowDownLeft,
  Loader2,
  RefreshCw,
  Reply,
  Copy,
  Check,
  User,
  Award,
  TrendingUp,
  Archive,
  ArchiveRestore,
  Trash2,
  AlertTriangle,
  Merge,
} from 'lucide-react';
import { supabase } from '@/integrations/supabase/client';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Checkbox } from '@/components/ui/checkbox';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { DialogFooter } from '@/components/ui/dialog';
import { useTheme } from '@/components/theme/ThemeProvider';
import { useUserRole } from '@/hooks/useUserRole';
import { useDocumentTitle } from '@/hooks/useDocumentTitle';
import { handleError, handleSuccess } from '@/lib/errorHandler';
import { logger } from '@/lib/logger';
import { contactCategories } from '@/lib/contactValidation';
import { invokeWithTracking } from '@/lib/edgeFunctionTracking';
import { AdminLayout } from '@/components/layout/AdminLayout';

interface ContactSubmission {
  id: string;
  created_at: string;
  updated_at: string;
  user_id: string | null;
  submitter_username: string | null;
  submitter_reputation: number | null;
  submitter_profile_data: {
    display_name?: string;
    member_since?: string;
    stats?: {
      rides: number;
      coasters: number;
      parks: number;
      reviews: number;
    };
    reputation?: number;
    avatar_url?: string;
  } | null;
  name: string;
  email: string;
  subject: string;
  message: string;
  category: string;
  status: 'pending' | 'in_progress' | 'resolved' | 'closed';
  assigned_to: string | null;
  admin_notes: string | null;
  resolved_at: string | null;
  resolved_by: string | null;
  thread_id: string;
  last_admin_response_at: string | null;
  response_count: number;
  ticket_number: string;
  archived_at: string | null;
  archived_by: string | null;
  merged_ticket_numbers: string[] | null;
}

interface EmailThread {
  id: string;
  created_at: string;
  message_id: string;
  from_email: string;
  to_email: string;
  subject: string;
  body_text: string;
  direction: 'inbound' | 'outbound';
  sent_by: string | null;
}

export default function AdminContact() {
  useDocumentTitle('Contact Submissions - Admin');
  const queryClient = useQueryClient();
  const { theme } = useTheme();
  const { isAdmin, loading: rolesLoading } = useUserRole();
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [categoryFilter, setCategoryFilter] = useState<string>('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedSubmission, setSelectedSubmission] = useState<ContactSubmission | null>(null);
  const [adminNotes, setAdminNotes] = useState('');
  const [replyBody, setReplyBody] = useState('');
  const [showReplyForm, setShowReplyForm] = useState(false);
  const [emailThreads, setEmailThreads] = useState<EmailThread[]>([]);
  const [loadingThreads, setLoadingThreads] = useState(false);
  const [copiedTicket, setCopiedTicket] = useState<string | null>(null);
  const [activeTab, setActiveTab] = useState<string>('details');
  const [replyStatus, setReplyStatus] = useState<string>('');
  const [showArchived, setShowArchived] = useState(false);
  
  // Merge mode state
  const [selectedForMerge, setSelectedForMerge] = useState<string[]>([]);
  const [mergeMode, setMergeMode] = useState(false);
  const [showMergeDialog, setShowMergeDialog] = useState(false);
  const [primaryTicketId, setPrimaryTicketId] = useState<string | null>(null);
  const [mergeReason, setMergeReason] = useState('');

  // Fetch contact submissions
  const { data: submissions, isLoading } = useQuery({
    queryKey: ['admin-contact-submissions', statusFilter, categoryFilter, searchQuery, showArchived],
    queryFn: async () => {
      let query = supabase
        .from('contact_submissions')
        .select('*')
        .order('created_at', { ascending: false });

      // Filter archived based on toggle
      if (showArchived) {
        query = query.not('archived_at', 'is', null);
      } else {
        query = query.is('archived_at', null);
      }

      if (statusFilter !== 'all') {
        query = query.eq('status', statusFilter);
      }

      if (categoryFilter !== 'all') {
        query = query.eq('category', categoryFilter);
      }

      if (searchQuery) {
        query = query.or(
          `name.ilike.%${searchQuery}%,email.ilike.%${searchQuery}%,subject.ilike.%${searchQuery}%`
        );
      }

      const { data, error } = await query;

      if (error) {
        logger.error('Failed to fetch contact submissions', { error: error.message });
        throw error;
      }

      return data as ContactSubmission[];
    },
  });

  // Fetch email threads when submission selected
  useEffect(() => {
    if (selectedSubmission) {
      setLoadingThreads(true);
      // Force fresh fetch - no caching
      supabase
        .from('contact_email_threads')
        .select('*')
        .eq('submission_id', selectedSubmission.id)
        .order('created_at', { ascending: true })
        .then(({ data, error }) => {
          if (error) {
            logger.error('Failed to fetch email threads', { error });
            setEmailThreads([]);
          } else {
            setEmailThreads((data as EmailThread[]) || []);
          }
          setLoadingThreads(false);
        });
      
      setAdminNotes(selectedSubmission.admin_notes || '');
      setReplyBody('');
      setShowReplyForm(false);
      setReplyStatus(selectedSubmission.status); // Initialize reply status
    } else {
      // Reset tab to details when dialog closes
      setActiveTab('details');
    }
  }, [selectedSubmission]);

  // Send reply mutation
  const sendReplyMutation = useMutation({
    mutationFn: async ({ submissionId, body, newStatus }: { submissionId: string, body: string, newStatus?: string }) => {
      const { data, error } = await invokeWithTracking(
        'send-admin-email-reply',
        { submissionId, replyBody: body },
        undefined
      );
      if (error) throw error;
      
      // Update status if changed
      if (newStatus && selectedSubmission && newStatus !== selectedSubmission.status) {
        const updateData: Record<string, unknown> = { status: newStatus };
        
        if (newStatus === 'resolved' || newStatus === 'closed') {
          const { data: { user } } = await supabase.auth.getUser();
          updateData.resolved_at = new Date().toISOString();
          updateData.resolved_by = user?.id;
        }
        
        const { error: statusError } = await supabase
          .from('contact_submissions')
          .update(updateData)
          .eq('id', submissionId);
          
        if (statusError) {
          logger.error('Failed to update status', { error: statusError });
          throw statusError;
        }
      }
      
      return data;
    },
    onSuccess: (_data, variables) => {
      const submission = submissions?.find(s => s.id === variables.submissionId);
      const ticketNumber = submission?.ticket_number || 'Unknown';
      
      let message = `Your email response has been sent for ticket ${ticketNumber}`;
      if (variables.newStatus && selectedSubmission && variables.newStatus !== selectedSubmission.status) {
        message += ` and status updated to ${variables.newStatus.replace('_', ' ')}`;
      }
      
      handleSuccess('Reply Sent', message);
      setReplyBody('');
      setShowReplyForm(false);
      // Refetch threads
      if (selectedSubmission) {
        supabase
          .from('contact_email_threads')
          .select('*')
          .eq('submission_id', selectedSubmission.id)
          .order('created_at', { ascending: true })
          .then(({ data }) => setEmailThreads((data as EmailThread[]) || []));
      }
      queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
    },
    onError: (error: Error) => {
      handleError(error, { action: 'Send Email Reply' });
    }
  });

  // Update submission status
  const updateStatusMutation = useMutation({
    mutationFn: async ({
      id,
      status,
      notes,
    }: {
      id: string;
      status: string;
      notes?: string;
    }) => {
      const updateData: Record<string, unknown> = { status };
      
      if (notes) {
        updateData.admin_notes = notes;
      }

      if (status === 'resolved' || status === 'closed') {
        const { data: { user } } = await supabase.auth.getUser();
        updateData.resolved_at = new Date().toISOString();
        updateData.resolved_by = user?.id;
      }

      const { error } = await supabase
        .from('contact_submissions')
        .update(updateData)
        .eq('id', id);

      if (error) throw error;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
      handleSuccess('Status Updated', 'Contact submission status has been updated');
      setSelectedSubmission(null);
      setAdminNotes('');
    },
    onError: (error) => {
      handleError(error, { action: 'update_contact_status' });
    },
  });

  // Archive submission mutation
  const archiveSubmissionMutation = useMutation({
    mutationFn: async (id: string) => {
      const { data: { user } } = await supabase.auth.getUser();
      const { error } = await supabase
        .from('contact_submissions')
        .update({
          archived_at: new Date().toISOString(),
          archived_by: user?.id
        })
        .eq('id', id);

      if (error) throw error;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
      handleSuccess('Archived', 'Contact submission has been archived');
      setSelectedSubmission(null);
    },
    onError: (error) => {
      handleError(error, { action: 'archive_contact_submission' });
    }
  });

  // Unarchive submission mutation
  const unarchiveSubmissionMutation = useMutation({
    mutationFn: async (id: string) => {
      const { error } = await supabase
        .from('contact_submissions')
        .update({
          archived_at: null,
          archived_by: null
        })
        .eq('id', id);

      if (error) throw error;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
      handleSuccess('Restored', 'Contact submission has been restored from archive');
      setSelectedSubmission(null);
    },
    onError: (error) => {
      handleError(error, { action: 'unarchive_contact_submission' });
    }
  });

  // Delete submission mutation
  const deleteSubmissionMutation = useMutation({
    mutationFn: async (id: string) => {
      const { error } = await supabase
        .from('contact_submissions')
        .delete()
        .eq('id', id);

      if (error) throw error;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
      handleSuccess('Deleted', 'Contact submission has been permanently deleted');
      setSelectedSubmission(null);
    },
    onError: (error) => {
      handleError(error, { action: 'delete_contact_submission' });
    }
  });

  const handleUpdateStatus = (status: string) => {
    if (!selectedSubmission) return;

    updateStatusMutation.mutate({
      id: selectedSubmission.id,
      status,
      notes: adminNotes || undefined,
    });
  };

  const getStatusBadge = (status: string) => {
    const variants: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
      pending: 'default',
      in_progress: 'secondary',
      resolved: 'outline',
      closed: 'outline',
    };

    return (
      <Badge variant={variants[status] || 'default'}>
        {status.replace('_', ' ').toUpperCase()}
      </Badge>
    );
  };

  const getCategoryLabel = (category: string) => {
    const cat = contactCategories.find((c) => c.value === category);
    return cat?.label || category;
  };

  const handleRefreshSubmissions = () => {
    queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
  };

  const handleCopyTicket = (ticketNumber: string) => {
    navigator.clipboard.writeText(ticketNumber);
    setCopiedTicket(ticketNumber);
    setTimeout(() => setCopiedTicket(null), 2000);
  };

  const handleQuickReply = (e: React.MouseEvent, submission: ContactSubmission) => {
    e.stopPropagation();
    setSelectedSubmission(submission);
    setAdminNotes(submission.admin_notes || '');
    setActiveTab('thread');
    setShowReplyForm(true);
    setReplyStatus(submission.status);
  };
  
  const handleRefreshThreads = () => {
    if (!selectedSubmission) return;
    setLoadingThreads(true);
    supabase
      .from('contact_email_threads')
      .select('*')
      .eq('submission_id', selectedSubmission.id)
      .order('created_at', { ascending: true })
      .then(({ data, error }) => {
        if (error) {
          logger.error('Failed to refresh email threads', { error });
          handleError(error, { action: 'Refresh Email Threads' });
        } else {
          setEmailThreads((data as EmailThread[]) || []);
          handleSuccess('Refreshed', 'Email thread updated');
        }
        setLoadingThreads(false);
      });
  };

  // Merge tickets mutation
  const mergeTicketsMutation = useMutation({
    mutationFn: async ({ primaryId, mergeIds, reason }: {
      primaryId: string;
      mergeIds: string[];
      reason?: string;
    }) => {
      const { data, error } = await invokeWithTracking(
        'merge-contact-tickets',
        { 
          primaryTicketId: primaryId,
          mergeTicketIds: mergeIds,
          mergeReason: reason 
        },
        undefined
      );
      if (error) throw error;
      return data;
    },
    onSuccess: (data: any) => {
      handleSuccess(
        'Tickets Merged Successfully',
        `Merged ${data.mergedCount} tickets into ${data.primaryTicketNumber}. ${data.threadsConsolidated} email threads consolidated.`
      );
      
      // Reset merge mode
      setMergeMode(false);
      setSelectedForMerge([]);
      setShowMergeDialog(false);
      setPrimaryTicketId(null);
      setMergeReason('');
      
      // Refresh data
      queryClient.invalidateQueries({ queryKey: ['admin-contact-submissions'] });
    },
    onError: (error: Error) => {
      handleError(error, { action: 'Merge Tickets' });
    }
  });

  const handleConfirmMerge = () => {
    if (!primaryTicketId || selectedForMerge.length < 2) return;
    
    // Ensure primary is actually in the selected list
    if (!selectedForMerge.includes(primaryTicketId)) {
      handleError(
        new Error('Primary ticket must be one of the selected tickets'), 
        { action: 'Merge Tickets' }
      );
      return;
    }
    
    const mergeIds = selectedForMerge.filter(id => id !== primaryTicketId);
    
    // Additional validation: ensure we have tickets to merge
    if (mergeIds.length === 0) {
      handleError(
        new Error('No tickets to merge. Please select at least 2 tickets.'),
        { action: 'Merge Tickets' }
      );
      return;
    }
    
    mergeTicketsMutation.mutate({
      primaryId: primaryTicketId,
      mergeIds,
      reason: mergeReason || undefined
    });
  };

  // Show loading state while roles are being fetched
  if (rolesLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <p className="text-muted-foreground">Loading...</p>
      </div>
    );
  }

  // Admin-only access check (after loading complete)
  if (!isAdmin()) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Card className="max-w-md">
          <CardContent className="pt-6 text-center">
            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
            <h2 className="text-xl font-semibold mb-2">Access Denied</h2>
            <p className="text-muted-foreground">
              Email response features are only available to administrators.
            </p>
          </CardContent>
        </Card>
      </div>
    );
  }

  // Theme-aware EmailThreadItem component
  function EmailThreadItem({ thread }: { thread: EmailThread }) {
    const isOutbound = thread.direction === 'outbound';
    
    return (
      <div 
        className={`
          p-4 mb-3 rounded-lg border transition-all duration-200
          ${isOutbound 
            ? 'bg-primary/5 border-primary/20 dark:bg-primary/10 dark:border-primary/30' 
            : 'bg-muted/50 border-border dark:bg-muted/30 dark:border-border/50'
          }
        `}
      >
        <div className="flex items-start justify-between mb-2">
          <div className="flex items-center gap-2">
            {isOutbound ? (
              <ArrowUpRight className="h-4 w-4 text-primary" />
            ) : (
              <ArrowDownLeft className="h-4 w-4 text-muted-foreground" />
            )}
            <span className="font-medium text-sm">
              {isOutbound ? 'Admin Reply' : thread.from_email}
            </span>
            {isOutbound && (
              <Badge variant="secondary" className="text-xs">Sent</Badge>
            )}
          </div>
          <span className="text-xs text-muted-foreground">
            {format(new Date(thread.created_at), 'MMM d, yyyy h:mm a')}
          </span>
        </div>
        
        <div className="text-sm leading-relaxed whitespace-pre-wrap break-words">
          {thread.body_text}
        </div>
      </div>
    );
  }

  const stats = {
    pending: submissions?.filter((s) => s.status === 'pending' && !s.archived_at).length || 0,
    inProgress: submissions?.filter((s) => s.status === 'in_progress' && !s.archived_at).length || 0,
    resolved: submissions?.filter((s) => s.status === 'resolved' && !s.archived_at).length || 0,
    archived: submissions?.filter((s) => s.archived_at !== null).length || 0,
    total: submissions?.length || 0,
  };

  return (
    <AdminLayout>
      {/* Header */}
      <div className="mb-8 flex items-start justify-between">
        <div>
          <h1 className="text-4xl font-bold mb-2">Contact Submissions</h1>
          <p className="text-muted-foreground">
            Manage and respond to user contact form submissions
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button
            variant={mergeMode ? "default" : "outline"}
            size="sm"
            onClick={() => {
              setMergeMode(!mergeMode);
              setSelectedForMerge([]);
            }}
          >
            <Merge className="h-4 w-4 mr-2" />
            {mergeMode ? 'Cancel Merge' : 'Merge Tickets'}
          </Button>
          <Button
            variant={showArchived ? "default" : "outline"}
            onClick={() => setShowArchived(!showArchived)}
          >
            {showArchived ? <ArchiveRestore className="h-4 w-4 mr-2" /> : <Archive className="h-4 w-4 mr-2" />}
            {showArchived ? 'View Active' : 'View Archived'}
          </Button>
          <Button
            variant="outline"
            size="icon"
            onClick={handleRefreshSubmissions}
            disabled={isLoading}
            title="Refresh submissions"
          >
            <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
          </Button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-8">
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Pending</CardDescription>
            <CardTitle className="text-3xl">{stats.pending}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>In Progress</CardDescription>
            <CardTitle className="text-3xl">{stats.inProgress}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Resolved</CardDescription>
            <CardTitle className="text-3xl">{stats.resolved}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Archived</CardDescription>
            <CardTitle className="text-3xl">{stats.archived}</CardTitle>
          </CardHeader>
        </Card>
        <Card>
          <CardHeader className="pb-3">
            <CardDescription>Total</CardDescription>
            <CardTitle className="text-3xl">{stats.total}</CardTitle>
          </CardHeader>
        </Card>
      </div>

      {/* Filters */}
      <Card className="mb-6">
        <CardContent className="pt-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {/* Search */}
            <div className="space-y-2">
              <Label>Search</Label>
              <div className="relative">
                <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Name, email, or subject..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
            </div>

            {/* Status Filter */}
            <div className="space-y-2">
              <Label>Status</Label>
              <Select value={statusFilter} onValueChange={setStatusFilter}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Statuses</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="in_progress">In Progress</SelectItem>
                  <SelectItem value="resolved">Resolved</SelectItem>
                  <SelectItem value="closed">Closed</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Category Filter */}
            <div className="space-y-2">
              <Label>Category</Label>
              <Select value={categoryFilter} onValueChange={setCategoryFilter}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Categories</SelectItem>
                  {contactCategories.map((cat) => (
                    <SelectItem key={cat.value} value={cat.value}>
                      {cat.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Submissions List */}
      {isLoading ? (
        <div className="text-center py-12">
          <p className="text-muted-foreground">Loading submissions...</p>
        </div>
      ) : submissions && submissions.length > 0 ? (
        <div className="space-y-4">
          {submissions.map((submission) => (
            <Card
              key={submission.id}
              className="cursor-pointer hover:border-primary transition-colors"
              onClick={() => {
                if (!mergeMode) {
                  setSelectedSubmission(submission);
                  setAdminNotes(submission.admin_notes || '');
                }
              }}
            >
              <CardContent className="p-6">
                <div className="flex items-start justify-between gap-4">
                  {mergeMode && (
                    <div className="pt-1">
                      <Checkbox
                        checked={selectedForMerge.includes(submission.id)}
                        onCheckedChange={(checked) => {
                          setSelectedForMerge(prev => 
                            checked 
                              ? [...prev, submission.id]
                              : prev.filter(id => id !== submission.id)
                          );
                        }}
                        onClick={(e) => e.stopPropagation()}
                      />
                    </div>
                  )}
                  <div className="flex-1 space-y-2">
                    <div className="flex items-center gap-3 flex-wrap">
                      <h3 className="font-semibold text-lg">{submission.subject}</h3>
                      <Badge 
                        variant="outline" 
                        className="font-mono cursor-pointer hover:bg-accent transition-colors"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleCopyTicket(submission.ticket_number);
                        }}
                      >
                        {copiedTicket === submission.ticket_number ? (
                          <><Check className="h-3 w-3 mr-1" /> Copied!</>
                        ) : (
                          <><Copy className="h-3 w-3 mr-1" /> {submission.ticket_number}</>
                        )}
                      </Badge>
                      {getStatusBadge(submission.status)}
                      <Badge variant="outline">{getCategoryLabel(submission.category)}</Badge>
                      {submission.archived_at && (
                        <Badge variant="outline" className="bg-muted">
                          <Archive className="h-3 w-3 mr-1" />
                          Archived
                        </Badge>
                      )}
                      {submission.merged_ticket_numbers && submission.merged_ticket_numbers.length > 0 && (
                        <Badge variant="secondary" className="gap-1">
                          <Merge className="h-3 w-3" />
                          Consolidated ({submission.merged_ticket_numbers.length})
                        </Badge>
                      )}
                      {submission.response_count > 0 && (
                        <Badge variant="secondary" className="text-xs">
                          📧 {submission.response_count} {submission.response_count === 1 ? 'reply' : 'replies'}
                        </Badge>
                      )}
                    </div>
                    <div className="flex items-center gap-4 text-sm text-muted-foreground flex-wrap">
                      <span className="flex items-center gap-1">
                        <Mail className="h-3 w-3" />
                        {submission.name} ({submission.email})
                      </span>
                      <span className="flex items-center gap-1">
                        <Clock className="h-3 w-3" />
                        {format(new Date(submission.created_at), 'MMM d, yyyy h:mm a')}
                      </span>
                      {submission.last_admin_response_at && (
                        <span className="flex items-center gap-1 text-primary">
                          <ArrowUpRight className="h-3 w-3" />
                          Last reply {format(new Date(submission.last_admin_response_at), 'MMM d')}
                        </span>
                      )}
                    </div>
                    <p className="text-sm line-clamp-2">{submission.message}</p>
                  </div>
                  {!mergeMode && (
                    <div className="flex items-center gap-2">
                      <Button
                        variant="outline"
                        size="sm"
                        onClick={(e) => handleQuickReply(e, submission)}
                        disabled={sendReplyMutation.isPending}
                        className="flex items-center gap-1"
                      >
                        <Reply className="h-4 w-4" />
                        Reply
                      </Button>
                      <ChevronDown className="h-5 w-5 text-muted-foreground" />
                    </div>
                  )}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      ) : (
        <Card>
          <CardContent className="py-12">
            <div className="text-center">
              <Mail className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
              <p className="text-muted-foreground">No submissions found</p>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Floating Merge Button */}
      {mergeMode && selectedForMerge.length >= 2 && (
        <div className="fixed bottom-6 right-6 z-50">
          <Button 
            size="lg" 
            onClick={() => {
              setPrimaryTicketId(selectedForMerge[0]); // Default to first selected
              setShowMergeDialog(true);
            }}
            className="shadow-lg"
          >
            <Merge className="h-5 w-5 mr-2" />
            Merge Selected ({selectedForMerge.length})
          </Button>
        </div>
      )}

      {/* Merge Confirmation Dialog */}
      <Dialog open={showMergeDialog} onOpenChange={setShowMergeDialog}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>Merge Contact Tickets</DialogTitle>
            <DialogDescription>
              Choose a primary ticket to keep. All others will be permanently deleted after their data is merged.
            </DialogDescription>
          </DialogHeader>
          
          {/* List selected tickets with radio buttons */}
          <div className="space-y-2">
            {selectedForMerge.map(ticketId => {
              const ticket = submissions?.find(s => s.id === ticketId);
              if (!ticket) return null;
              
              return (
                <div key={ticketId} className="flex items-start gap-3 p-3 border rounded">
                  <input 
                    type="radio" 
                    name="primary" 
                    value={ticketId}
                    checked={primaryTicketId === ticketId}
                    onChange={() => setPrimaryTicketId(ticketId)}
                    className="mt-1"
                  />
                  <div className="flex-1">
                    <div className="font-medium">{ticket.ticket_number}</div>
                    <div className="text-sm text-muted-foreground">{ticket.subject}</div>
                    <div className="text-xs text-muted-foreground mt-1">
                      {ticket.email} • {ticket.response_count} admin replies
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          
          {/* Optional merge reason */}
          <div className="space-y-2">
            <Label htmlFor="merge-reason">Reason for merge (optional)</Label>
            <Textarea 
              id="merge-reason"
              placeholder="e.g., Duplicate submissions about the same issue"
              value={mergeReason}
              onChange={(e) => setMergeReason(e.target.value)}
              rows={2}
            />
          </div>
          
          {/* Summary Alert */}
          <Alert>
            <AlertTriangle className="h-4 w-4" />
            <AlertDescription>
              <strong>This will:</strong>
              <ul className="list-disc pl-5 mt-2 space-y-1">
                <li>Keep <strong>{submissions?.find(s => s.id === primaryTicketId)?.ticket_number}</strong> active</li>
                <li>Move all email threads to primary ticket</li>
                <li>Consolidate admin notes</li>
                <li><strong className="text-destructive">Permanently delete {selectedForMerge.length - 1} other ticket(s)</strong></li>
              </ul>
              <p className="mt-2 font-semibold">This action cannot be undone.</p>
            </AlertDescription>
          </Alert>
          
          <DialogFooter>
            <Button 
              variant="outline" 
              onClick={() => {
                setShowMergeDialog(false);
                setMergeReason('');
              }}
            >
              Cancel
            </Button>
            <Button 
              variant="destructive" 
              onClick={handleConfirmMerge}
              disabled={!primaryTicketId || mergeTicketsMutation.isPending}
            >
              {mergeTicketsMutation.isPending ? (
                <><Loader2 className="mr-2 h-4 w-4 animate-spin" /> Merging...</>
              ) : (
                'Confirm Merge & Delete'
              )}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Submission Detail Dialog */}
      <Dialog
        open={!!selectedSubmission}
        onOpenChange={(open) => {
          if (!open) {
            setSelectedSubmission(null);
            setAdminNotes('');
          }
        }}
      >
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
          {selectedSubmission && (
            <>
              <DialogHeader>
                <DialogTitle className="flex items-center gap-2 flex-wrap">
                  <Mail className="h-5 w-5" />
                  {selectedSubmission.subject}
                  <Badge 
                    variant="outline" 
                    className="font-mono cursor-pointer hover:bg-accent transition-colors"
                    onClick={() => handleCopyTicket(selectedSubmission.ticket_number)}
                  >
                    {copiedTicket === selectedSubmission.ticket_number ? (
                      <><Check className="h-3 w-3 mr-1" /> Copied!</>
                    ) : (
                      <><Copy className="h-3 w-3 mr-1" /> {selectedSubmission.ticket_number}</>
                    )}
                  </Badge>
                  {selectedSubmission.response_count > 0 && (
                    <Badge variant="secondary" className="text-xs">
                      📧 {selectedSubmission.response_count} {selectedSubmission.response_count === 1 ? 'reply' : 'replies'}
                    </Badge>
                  )}
                </DialogTitle>
                <DialogDescription>
                  Submitted {format(new Date(selectedSubmission.created_at), 'PPpp')}
                </DialogDescription>
              </DialogHeader>

              <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 overflow-hidden flex flex-col">
                <TabsList className="w-full justify-start">
                  <TabsTrigger value="details" className="flex-1">
                    Details
                  </TabsTrigger>
                  <TabsTrigger value="thread" className="flex-1 flex items-center gap-2">
                    Email Thread ({emailThreads.length})
                  </TabsTrigger>
                  {activeTab === 'thread' && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={handleRefreshThreads}
                      disabled={loadingThreads}
                      className="ml-auto"
                    >
                      <RefreshCw className={`h-3 w-3 ${loadingThreads ? 'animate-spin' : ''}`} />
                    </Button>
                  )}
                </TabsList>

                <TabsContent value="details" className="flex-1 overflow-y-auto">
                  <div className="space-y-4 p-4">
                    {/* Sender Info */}
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <Label>Name</Label>
                        <p className="mt-1">{selectedSubmission.name}</p>
                      </div>
                      <div>
                        <Label>Email</Label>
                        <p className="mt-1">{selectedSubmission.email}</p>
                      </div>
                    </div>

                    {/* User Context Section */}
                    {selectedSubmission.submitter_profile_data && (
                      <div className="border rounded-lg p-4 bg-muted/30">
                        <h4 className="font-semibold mb-3 flex items-center gap-2">
                          <User className="h-4 w-4" />
                          Submitter Context
                        </h4>
                        <div className="flex items-start gap-4">
                          <Avatar className="h-12 w-12">
                            {selectedSubmission.submitter_profile_data.avatar_url && (
                              <AvatarImage src={selectedSubmission.submitter_profile_data.avatar_url} />
                            )}
                            <AvatarFallback>
                              {selectedSubmission.submitter_username?.[0]?.toUpperCase() || 'U'}
                            </AvatarFallback>
                          </Avatar>
                          <div className="flex-1 space-y-2">
                            <div className="flex items-center gap-2 flex-wrap">
                              <span className="font-medium">
                                @{selectedSubmission.submitter_username}
                              </span>
                              {selectedSubmission.submitter_profile_data.display_name && (
                                <span className="text-muted-foreground">
                                  ({selectedSubmission.submitter_profile_data.display_name})
                                </span>
                              )}
                              <Badge variant="secondary" className="gap-1">
                                <Award className="h-3 w-3" />
                                {selectedSubmission.submitter_reputation} rep
                              </Badge>
                            </div>
                            {selectedSubmission.submitter_profile_data.member_since && (
                              <div className="text-sm text-muted-foreground">
                                Member since {format(new Date(selectedSubmission.submitter_profile_data.member_since), 'MMM d, yyyy')}
                              </div>
                            )}
                            {selectedSubmission.submitter_profile_data.stats && (
                              <div className="flex items-center gap-3 text-sm flex-wrap">
                                <span className="flex items-center gap-1">
                                  <TrendingUp className="h-3 w-3" />
                                  {selectedSubmission.submitter_profile_data.stats.rides} rides
                                </span>
                                <span>•</span>
                                <span>{selectedSubmission.submitter_profile_data.stats.coasters} coasters</span>
                                <span>•</span>
                                <span>{selectedSubmission.submitter_profile_data.stats.parks} parks</span>
                                <span>•</span>
                                <span>{selectedSubmission.submitter_profile_data.stats.reviews} reviews</span>
                              </div>
                            )}
                          </div>
                        </div>
                      </div>
                    )}

                    {/* Subject & Category */}
                    <div className="space-y-2">
                      <Label>Category</Label>
                      <div className="mt-1">
                        <Badge>{getCategoryLabel(selectedSubmission.category)}</Badge>
                      </div>
                    </div>

                    {/* Message */}
                    <div>
                      <Label>Message</Label>
                      <ScrollArea className="h-40 mt-1 p-3 rounded-md border bg-muted/30">
                        <p className="whitespace-pre-wrap text-sm">{selectedSubmission.message}</p>
                      </ScrollArea>
                    </div>

                    {/* Admin Notes */}
                    <div>
                      <Label htmlFor="admin-notes">Admin Notes (Internal)</Label>
                      <Textarea
                        id="admin-notes"
                        value={adminNotes}
                        onChange={(e) => setAdminNotes(e.target.value)}
                        placeholder="Add internal notes about this submission..."
                        rows={4}
                        className="mt-1"
                      />
                    </div>

                    {/* Status Update */}
                    <div className="flex items-center gap-4 pt-4 border-t">
                      <div className="flex-1">
                        <Label>Status</Label>
                        <Select
                          value={selectedSubmission.status}
                          onValueChange={(value) => {
                            handleUpdateStatus(value as 'pending' | 'in_progress' | 'resolved' | 'closed');
                          }}
                        >
                          <SelectTrigger>
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="pending">Pending</SelectItem>
                            <SelectItem value="in_progress">In Progress</SelectItem>
                            <SelectItem value="resolved">Resolved</SelectItem>
                            <SelectItem value="closed">Closed</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

                      <Button
                        onClick={() => handleUpdateStatus(selectedSubmission.status)}
                        disabled={updateStatusMutation.isPending}
                      >
                        {updateStatusMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                        Save Notes & Status
                      </Button>
                    </div>

                    {/* Merge History Section */}
                    {selectedSubmission.merged_ticket_numbers && selectedSubmission.merged_ticket_numbers.length > 0 && (
                      <div className="mt-6 pt-6 border-t">
                        <Collapsible>
                          <CollapsibleTrigger className="flex items-center gap-2 text-sm font-semibold hover:text-primary transition-colors">
                            <Merge className="h-4 w-4" />
                            Merge History ({selectedSubmission.merged_ticket_numbers.length} tickets consolidated)
                            <ChevronDown className="h-4 w-4 ml-1" />
                          </CollapsibleTrigger>
                          <CollapsibleContent>
                            <div className="mt-3 space-y-1 text-sm text-muted-foreground">
                              <p className="mb-2">The following tickets were merged and deleted into this primary ticket:</p>
                              {selectedSubmission.merged_ticket_numbers.map(ticketNum => (
                                <div key={ticketNum} className="flex items-center gap-2 py-1">
                                  <XCircle className="h-3 w-3 text-destructive" />
                                  <span className="font-mono">{ticketNum}</span>
                                  <span className="text-xs">(deleted)</span>
                                </div>
                              ))}
                            </div>
                          </CollapsibleContent>
                        </Collapsible>
                      </div>
                    )}

                    {/* Danger Zone - Archive/Delete */}
                    <div className="mt-8 pt-6 border-t border-destructive/20">
                      <h4 className="text-sm font-semibold mb-3 text-destructive flex items-center gap-2">
                        <AlertTriangle className="h-4 w-4" />
                        Danger Zone
                      </h4>
                      <div className="flex items-center gap-3">
                        {!showArchived ? (
                          <>
                            <Button
                              variant="outline"
                              onClick={() => archiveSubmissionMutation.mutate(selectedSubmission.id)}
                              disabled={archiveSubmissionMutation.isPending}
                              className="flex-1"
                            >
                              {archiveSubmissionMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                              <Archive className="mr-2 h-4 w-4" />
                              Archive Submission
                            </Button>
                            <AlertDialog>
                              <AlertDialogTrigger asChild>
                                <Button
                                  variant="destructive"
                                  className="flex-1"
                                >
                                  <Trash2 className="mr-2 h-4 w-4" />
                                  Permanent Delete
                                </Button>
                              </AlertDialogTrigger>
                              <AlertDialogContent>
                                <AlertDialogHeader>
                                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                                  <AlertDialogDescription>
                                    This will permanently delete the contact submission and all associated email threads. 
                                    This action cannot be undone. Consider archiving instead.
                                  </AlertDialogDescription>
                                </AlertDialogHeader>
                                <AlertDialogFooter>
                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                                  <AlertDialogAction
                                    onClick={() => deleteSubmissionMutation.mutate(selectedSubmission.id)}
                                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                                  >
                                    {deleteSubmissionMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                                    Yes, Delete Permanently
                                  </AlertDialogAction>
                                </AlertDialogFooter>
                              </AlertDialogContent>
                            </AlertDialog>
                          </>
                        ) : (
                          <Button
                            variant="default"
                            onClick={() => unarchiveSubmissionMutation.mutate(selectedSubmission.id)}
                            disabled={unarchiveSubmissionMutation.isPending}
                            className="flex-1"
                          >
                            {unarchiveSubmissionMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                            <ArchiveRestore className="mr-2 h-4 w-4" />
                            Restore from Archive
                          </Button>
                        )}
                      </div>
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="thread" className="flex-1 overflow-hidden flex flex-col">
                  <div className="flex-1 overflow-y-auto p-4">
                    {loadingThreads ? (
                      <div className="flex items-center justify-center py-8">
                        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
                      </div>
                    ) : emailThreads.length === 0 ? (
                      <div className="text-center py-8 text-muted-foreground">
                        <Mail className="h-12 w-12 mx-auto mb-3 opacity-50" />
                        <p>No email thread yet. Send the first reply below.</p>
                      </div>
                    ) : (
                      <div className="space-y-2">
                        {emailThreads.map(thread => (
                          <EmailThreadItem key={thread.id} thread={thread} />
                        ))}
                      </div>
                    )}
                  </div>

                  {/* Reply Form */}
                  <div className="border-t p-4 bg-background">
                    {!showReplyForm ? (
                      <Button 
                        onClick={() => setShowReplyForm(true)}
                        className="w-full"
                        variant="default"
                      >
                        <Send className="mr-2 h-4 w-4" />
                        Reply via Email
                      </Button>
                    ) : (
                      <Card className="border-primary/20">
                        <CardContent className="pt-4">
                          <div className="mb-3 flex items-center justify-between">
                            <Label className="text-sm font-medium">
                              Reply to {selectedSubmission.name} ({selectedSubmission.email})
                            </Label>
                            <Badge variant="outline" className="font-mono">
                              {selectedSubmission.ticket_number}
                            </Badge>
                          </div>
                          <div className="text-xs text-muted-foreground mb-3">
                            Subject: Re: [{selectedSubmission.ticket_number}] {selectedSubmission.subject}
                          </div>
                          <Textarea
                            value={replyBody}
                            onChange={(e) => setReplyBody(e.target.value)}
                            placeholder="Type your response here... (Min 10 characters)"
                            rows={6}
                            className="mb-3 resize-none"
                          />
                          
                          {/* Status Update Dropdown */}
                          <div className="mb-3">
                            <Label className="text-sm mb-2 block">Update Status (Optional)</Label>
                            <Select value={replyStatus} onValueChange={setReplyStatus}>
                              <SelectTrigger className="w-full">
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="pending">Pending</SelectItem>
                                <SelectItem value="in_progress">In Progress</SelectItem>
                                <SelectItem value="resolved">Resolved</SelectItem>
                                <SelectItem value="closed">Closed</SelectItem>
                              </SelectContent>
                            </Select>
                            {replyStatus !== selectedSubmission.status && (
                              <p className="text-xs text-muted-foreground mt-1">
                                Status will be updated to <span className="font-medium">{replyStatus.replace('_', ' ')}</span>
                              </p>
                            )}
                          </div>
                          
                          <div className="flex gap-2">
                            <Button
                              onClick={() => sendReplyMutation.mutate({
                                submissionId: selectedSubmission.id,
                                body: replyBody,
                                newStatus: replyStatus
                              })}
                              disabled={sendReplyMutation.isPending || replyBody.length < 10}
                              className="flex-1"
                            >
                              {sendReplyMutation.isPending ? (
                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                              ) : (
                                <Send className="mr-2 h-4 w-4" />
                              )}
                              Send Reply
                            </Button>
                            <Button
                              variant="outline"
                              onClick={() => {
                                setShowReplyForm(false);
                                setReplyBody('');
                              }}
                              disabled={sendReplyMutation.isPending}
                            >
                              Cancel
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    )}
                  </div>
                </TabsContent>
              </Tabs>
            </>
          )}
        </DialogContent>
      </Dialog>
    </AdminLayout>
  );
}