smoothschedule/frontend/src/pages/Messages.tsx

import React, { useState, useMemo, useRef, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import api from '../api/client';
import {
  MessageSquare,
  Send,
  Users,
  Mail,
  Smartphone,
  Bell,
  CheckCircle2,
  Clock,
  Eye,
  AlertCircle,
  X,
  Loader2,
  Search,
  UserPlus,
  Filter
} from 'lucide-react';
import toast from 'react-hot-toast';

// UI Components
import Card, { CardHeader, CardBody, CardFooter } from '../components/ui/Card';
import Button, { SubmitButton } from '../components/ui/Button';
import FormInput from '../components/ui/FormInput';
import FormTextarea from '../components/ui/FormTextarea';
import FormSelect from '../components/ui/FormSelect';
import TabGroup from '../components/ui/TabGroup';
import Badge from '../components/ui/Badge';
import EmptyState from '../components/ui/EmptyState';

// Types
interface BroadcastMessage {
  id: string;
  subject: string;
  body: string;
  target_roles: string[];
  target_users: string[];
  delivery_method: 'IN_APP' | 'EMAIL' | 'SMS' | 'ALL';
  status: 'DRAFT' | 'SENDING' | 'SENT' | 'FAILED';
  total_recipients: number;
  delivered_count: number;
  read_count: number;
  created_at: string;
  sent_at: string | null;
  created_by: string;
  created_by_name: string;
}

interface RecipientOption {
  id: string;
  name: string;
  email: string;
  role: string;
}

interface RecipientOptionsResponse {
  users: RecipientOption[];
}

type TabType = 'compose' | 'sent';

// Local Component for Selection Tiles
interface SelectionTileProps {
  selected: boolean;
  onClick: () => void;
  icon: React.ElementType;
  label: string;
  description?: string;
}

const SelectionTile: React.FC<SelectionTileProps> = ({
  selected,
  onClick,
  icon: Icon,
  label,
  description
}) => (
  <div
    onClick={onClick}
    className={`
      cursor-pointer relative flex flex-col items-center justify-center p-4 rounded-xl border-2 transition-all duration-200
      ${selected
        ? 'border-brand-500 bg-brand-50/50 dark:bg-brand-900/20 shadow-sm'
        : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50'
      }
    `}
  >
    <div className={`p-3 rounded-full mb-3 ${selected ? 'bg-brand-100 text-brand-600 dark:bg-brand-900/40 dark:text-brand-400' : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'}`}>
      <Icon size={24} />
    </div>
    <span className={`font-semibold text-sm ${selected ? 'text-brand-900 dark:text-brand-100' : 'text-gray-900 dark:text-white'}`}>
      {label}
    </span>
    {description && (
      <span className="text-xs text-gray-500 dark:text-gray-400 mt-1 text-center">
        {description}
      </span>
    )}
    {selected && (
      <div className="absolute top-3 right-3 text-brand-500">
        <CheckCircle2 size={16} className="fill-brand-500 text-white" />
      </div>
    )}
  </div>
);

const Messages: React.FC = () => {
  const { t } = useTranslation();
  const queryClient = useQueryClient();

  // State
  const [activeTab, setActiveTab] = useState<TabType>('compose');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
  const [selectedUsers, setSelectedUsers] = useState<RecipientOption[]>([]);
  const [deliveryMethod, setDeliveryMethod] = useState<'IN_APP' | 'EMAIL' | 'SMS' | 'ALL'>('IN_APP');
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<'ALL' | 'SENT' | 'SENDING' | 'FAILED'>('ALL');
  const [selectedMessage, setSelectedMessage] = useState<BroadcastMessage | null>(null);
  const [recipientSearchTerm, setRecipientSearchTerm] = useState('');
  const [isRecipientDropdownOpen, setIsRecipientDropdownOpen] = useState(false);
  const [visibleRecipientCount, setVisibleRecipientCount] = useState(20);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Queries
  const { data: messages = [], isLoading: messagesLoading } = useQuery<BroadcastMessage[]>({
    queryKey: ['broadcast-messages'],
    queryFn: async () => {
      const response = await api.get('/messages/broadcast-messages/');
      return response.data;
    },
  });

  const { data: recipientOptions, isLoading: recipientsLoading } = useQuery<RecipientOptionsResponse>({
    queryKey: ['message-recipient-options'],
    queryFn: async () => {
      const response = await api.get('/messages/broadcast-messages/recipient_options/');
      return response.data;
    },
  });

  // Mutations
  const createMessage = useMutation({
    mutationFn: async (data: {
      subject: string;
      body: string;
      target_roles: string[];
      target_users: string[];
      delivery_method: string;
    }) => {
      const response = await api.post('/messages/broadcast-messages/', data);
      return response.data;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({ queryKey: ['broadcast-messages'] });
      // Auto-send the message
      sendMessage.mutate(data.id);
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.error || 'Failed to create message');
    },
  });

  const sendMessage = useMutation({
    mutationFn: async (messageId: string) => {
      const response = await api.post(`/messages/broadcast-messages/${messageId}/send/`);
      return response.data;
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['broadcast-messages'] });
      toast.success('Message sent successfully!');
      resetForm();
      setActiveTab('sent');
    },
    onError: (error: any) => {
      toast.error(error.response?.data?.error || 'Failed to send message');
    },
  });

  // All available target roles (excluding 'everyone' which is a meta-option)
  const allRoles = ['owner', 'staff', 'customer'];

  // Handlers
  const handleRoleToggle = (role: string) => {
    if (role === 'everyone') {
      // Toggle all roles on/off
      setSelectedRoles((prev) =>
        prev.length === allRoles.length ? [] : [...allRoles]
      );
    } else {
      setSelectedRoles((prev) =>
        prev.includes(role) ? prev.filter((r) => r !== role) : [...prev, role]
      );
    }
  };

  // Check if all roles are selected (for "Everyone" tile)
  const isEveryoneSelected = allRoles.every(role => selectedRoles.includes(role));

  const handleAddUser = (user: RecipientOption) => {
    if (!selectedUsers.find(u => u.id === user.id)) {
      setSelectedUsers((prev) => [...prev, user]);
    }
    // Clear search and close dropdown for tag-style input
    setRecipientSearchTerm('');
    setIsRecipientDropdownOpen(false);
  };

  const handleRemoveUser = (userId: string) => {
    setSelectedUsers((prev) => prev.filter((u) => u.id !== userId));
  };

  const handleDropdownScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const target = e.target as HTMLDivElement;
    const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;

    // Load more when within 50px of bottom
    if (scrollBottom < 50) {
      setVisibleRecipientCount((prev) => prev + 20);
    }
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    // Validation
    if (!subject.trim()) {
      toast.error('Subject is required');
      return;
    }
    if (!body.trim()) {
      toast.error('Message body is required');
      return;
    }
    if (selectedRoles.length === 0 && selectedUsers.length === 0) {
      toast.error('Please select at least one recipient');
      return;
    }

    createMessage.mutate({
      subject,
      body,
      target_roles: selectedRoles,
      target_users: selectedUsers.map(u => u.id),
      delivery_method: deliveryMethod,
    });
  };

  const resetForm = () => {
    setSubject('');
    setBody('');
    setSelectedRoles([]);
    setSelectedUsers([]);
    setDeliveryMethod('IN_APP');
    setRecipientSearchTerm('');
    setIsRecipientDropdownOpen(false);
    setVisibleRecipientCount(20);
  };

  // Computed
  const roleOptions = [
    { value: 'owner', label: 'Owners', icon: Users, description: 'Business owners' },
    { value: 'staff', label: 'Staff', icon: Users, description: 'Employees' },
    { value: 'customer', label: 'Customers', icon: Users, description: 'Clients' },
    { value: 'everyone', label: 'Everyone', icon: Users, description: 'All users' },
  ];

  const deliveryMethodOptions = [
    { value: 'IN_APP' as const, label: 'In-App', icon: Bell, description: 'Notifications only' },
    { value: 'EMAIL' as const, label: 'Email', icon: Mail, description: 'Send via email' },
    { value: 'SMS' as const, label: 'SMS', icon: Smartphone, description: 'Text message' },
    { value: 'ALL' as const, label: 'All Channels', icon: MessageSquare, description: 'Maximum reach' },
  ];

  const filteredMessages = useMemo(() => {
    let filtered = messages;

    // Status filter
    if (statusFilter !== 'ALL') {
      filtered = filtered.filter((msg) => msg.status === statusFilter);
    }

    // Search filter
    if (searchTerm) {
      const term = searchTerm.toLowerCase();
      filtered = filtered.filter(
        (msg) =>
          msg.subject.toLowerCase().includes(term) ||
          msg.body.toLowerCase().includes(term) ||
          msg.created_by_name.toLowerCase().includes(term)
      );
    }

    return filtered;
  }, [messages, statusFilter, searchTerm]);

  const filteredRecipients = useMemo(() => {
    if (!recipientOptions) return [];

    // Filter out already selected users
    const selectedIds = selectedUsers.map(u => u.id);
    let filtered = recipientOptions.users.filter(u => !selectedIds.includes(u.id));

    // Apply search filter
    if (recipientSearchTerm) {
      const term = recipientSearchTerm.toLowerCase();
      filtered = filtered.filter(
        (user) =>
          user.name.toLowerCase().includes(term) ||
          user.email.toLowerCase().includes(term)
      );
    }

    return filtered;
  }, [recipientOptions, recipientSearchTerm, selectedUsers]);

  const recipientCount = useMemo(() => {
    let count = 0;

    // Count users from selected roles
    if (recipientOptions) {
      selectedRoles.forEach((role) => {
        count += recipientOptions.users.filter((u) => u.role === role).length;
      });
    }

    // Add individually selected users (avoid double counting)
    const roleUserIds = recipientOptions?.users
      .filter((u) => selectedRoles.includes(u.role))
      .map((u) => u.id) || [];

    count += selectedUsers.filter((u) => !roleUserIds.includes(u.id)).length;

    return count;
  }, [selectedRoles, selectedUsers, recipientOptions]);

  const getDeliveryMethodIcon = (method: string) => {
    switch (method) {
      case 'IN_APP': return <Bell size={16} />;
      case 'EMAIL': return <Mail size={16} />;
      case 'SMS': return <Smartphone size={16} />;
      case 'ALL': return <MessageSquare size={16} />;
      default: return <Bell size={16} />;
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'SENT': return <Badge variant="success" size="sm" dot>Sent</Badge>;
      case 'SENDING': return <Badge variant="info" size="sm" dot>Sending</Badge>;
      case 'FAILED': return <Badge variant="danger" size="sm" dot>Failed</Badge>;
      default: return <Badge variant="default" size="sm" dot>Draft</Badge>;
    }
  };

  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return 'Not sent';
    return new Intl.DateTimeFormat('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date(dateStr));
  };

  const getTargetDescription = (message: BroadcastMessage) => {
    const parts: string[] = [];

    if (message.target_roles.length > 0) {
      const roleLabels = message.target_roles.map((role) => {
        const option = roleOptions.find((opt) => opt.value === role);
        return option?.label || role;
      });
      parts.push(...roleLabels);
    }

    if (message.target_users.length > 0) {
      parts.push(`${message.target_users.length} user(s)`);
    }

    return parts.join(', ');
  };

  return (
    <div className="max-w-5xl mx-auto space-y-8 pb-12">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">Broadcast Messages</h1>
          <p className="text-gray-500 dark:text-gray-400 mt-1 text-lg">
            Reach your staff and customers across multiple channels.
          </p>
        </div>
      </div>

      {/* Tabs */}
      <TabGroup
        variant="pills"
        activeColor="brand"
        tabs={[
          {
            id: 'compose',
            label: 'Compose New',
            icon: <MessageSquare size={18} />
          },
          {
            id: 'sent',
            label: `Sent History ${messages.length > 0 ? `(${messages.length})` : ''}`,
            icon: <Send size={18} />
          }
        ]}
        activeTab={activeTab}
        onChange={(id) => setActiveTab(id as TabType)}
        className="w-full sm:w-auto"
      />

      {/* Compose Tab */}
      {activeTab === 'compose' && (
        <form onSubmit={handleSubmit} className="animate-in fade-in slide-in-from-bottom-4 duration-300">
          <Card className="overflow-visible">
            <CardHeader>
              <h3 className="text-lg font-semibold">Message Details</h3>
            </CardHeader>
            <CardBody className="space-y-8">
              {/* Target Selection */}
              <div className="space-y-4">
                <label className="block text-sm font-semibold text-gray-900 dark:text-white">
                  1. Who are you sending to?
                </label>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                  {roleOptions.map((role) => (
                    <SelectionTile
                      key={role.value}
                      label={role.label}
                      icon={role.icon}
                      description={role.description}
                      selected={role.value === 'everyone' ? isEveryoneSelected : selectedRoles.includes(role.value)}
                      onClick={() => handleRoleToggle(role.value)}
                    />
                  ))}
                </div>

                {/* Individual Recipients Search */}
                <div className="mt-4">
                  <div className="relative group">
                    <Search className="absolute left-3.5 top-3.5 text-gray-400 group-focus-within:text-brand-500 transition-colors" size={20} />
                    <input
                      type="text"
                      value={recipientSearchTerm}
                      onChange={(e) => {
                        setRecipientSearchTerm(e.target.value);
                        setVisibleRecipientCount(20);
                        setIsRecipientDropdownOpen(e.target.value.length > 0);
                      }}
                      onFocus={() => {
                        if (recipientSearchTerm.length > 0) {
                          setIsRecipientDropdownOpen(true);
                        }
                      }}
                      placeholder="Search for specific people..."
                      className="w-full pl-11 pr-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/50 focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-all outline-none"
                    />
                    {recipientsLoading && recipientSearchTerm && (
                      <Loader2 className="absolute right-3.5 top-3.5 text-gray-400 animate-spin" size={20} />
                    )}

                    {/* Dropdown Results */}
                    {isRecipientDropdownOpen && recipientSearchTerm && !recipientsLoading && (
                      <>
                        <div
                          className="fixed inset-0 z-10"
                          onClick={() => setIsRecipientDropdownOpen(false)}
                        />
                        <div
                          ref={dropdownRef}
                          onScroll={handleDropdownScroll}
                          className="absolute z-20 w-full mt-2 bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl shadow-xl max-h-72 overflow-y-auto"
                        >
                          {filteredRecipients.length === 0 ? (
                            <p className="text-center py-6 text-gray-500 dark:text-gray-400 text-sm">
                              No matching users found
                            </p>
                          ) : (
                            <div className="p-2 space-y-1">
                              {filteredRecipients.slice(0, visibleRecipientCount).map((user) => (
                                <button
                                  key={user.id}
                                  type="button"
                                  onClick={() => handleAddUser(user)}
                                  className="w-full flex items-center gap-3 p-3 hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-lg transition-colors text-left group/item"
                                >
                                  <div className="h-8 w-8 rounded-full bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center text-brand-600 dark:text-brand-400 group-hover/item:bg-brand-200 dark:group-hover/item:bg-brand-800 transition-colors">
                                    <span className="font-semibold text-xs">{user.name.charAt(0)}</span>
                                  </div>
                                  <div className="flex-1 min-w-0">
                                    <p className="text-sm font-medium text-gray-900 dark:text-white truncate">
                                      {user.name}
                                    </p>
                                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">
                                      {user.email}
                                    </p>
                                  </div>
                                  <Badge size="sm" variant="default">{user.role}</Badge>
                                </button>
                              ))}
                            </div>
                          )}
                        </div>
                      </>
                    )}
                  </div>

                  {/* Selected Users Chips */}
                  {selectedUsers.length > 0 && (
                    <div className="mt-3 flex flex-wrap gap-2">
                      {selectedUsers.map((user) => (
                        <div
                          key={user.id}
                          className="inline-flex items-center gap-2 pl-3 pr-2 py-1.5 bg-white border border-gray-200 dark:bg-gray-800 dark:border-gray-700 rounded-full text-sm shadow-sm"
                        >
                          <span className="font-medium text-gray-700 dark:text-gray-200">{user.name}</span>
                          <span className="text-xs text-gray-500 uppercase">{user.role}</span>
                          <button
                            type="button"
                            onClick={() => handleRemoveUser(user.id)}
                            className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
                          >
                            <X size={14} />
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>

              <hr className="border-gray-100 dark:border-gray-800" />

              {/* Message Content */}
              <div className="space-y-4">
                <label className="block text-sm font-semibold text-gray-900 dark:text-white">
                  2. What do you want to say?
                </label>
                <div className="grid gap-4">
                  <FormInput
                    label="Subject"
                    value={subject}
                    onChange={(e) => setSubject(e.target.value)}
                    placeholder="Brief summary of your message..."
                    required
                    fullWidth
                  />
                  <FormTextarea
                    label="Message Body"
                    value={body}
                    onChange={(e) => setBody(e.target.value)}
                    rows={6}
                    placeholder="Write your message here..."
                    required
                    fullWidth
                    hint="You can use plain text. Links will be automatically detected."
                  />
                </div>
              </div>

              <hr className="border-gray-100 dark:border-gray-800" />

              {/* Delivery Method */}
              <div className="space-y-4">
                <label className="block text-sm font-semibold text-gray-900 dark:text-white">
                  3. How should we send it?
                </label>
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                  {deliveryMethodOptions.map((option) => (
                    <SelectionTile
                      key={option.value}
                      label={option.label}
                      icon={option.icon}
                      description={option.description}
                      selected={deliveryMethod === option.value}
                      onClick={() => setDeliveryMethod(option.value)}
                    />
                  ))}
                </div>
              </div>

              {/* Recipient Count Summary */}
              {recipientCount > 0 && (
                <div className="bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/30 rounded-xl p-4 flex items-start gap-4">
                  <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg text-blue-600 dark:text-blue-400 shrink-0">
                    <Users size={20} />
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold text-blue-900 dark:text-blue-100">Ready to Broadcast</h4>
                    <p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
                      This message will be sent to approximately <span className="font-bold">{recipientCount} recipient{recipientCount !== 1 ? 's' : ''}</span> via {deliveryMethodOptions.find(o => o.value === deliveryMethod)?.label}.
                    </p>
                  </div>
                </div>
              )}
            </CardBody>
            <CardFooter className="flex justify-end gap-3 bg-gray-50/50 dark:bg-gray-800/50">
              <Button
                variant="ghost"
                onClick={resetForm}
                disabled={createMessage.isPending || sendMessage.isPending}
              >
                Clear Form
              </Button>
              <SubmitButton
                isLoading={createMessage.isPending || sendMessage.isPending}
                loadingText="Sending..."
                leftIcon={<Send size={18} />}
                variant="primary"
                size="lg"
              >
                Send Broadcast
              </SubmitButton>
            </CardFooter>
          </Card>
        </form>
      )}

      {/* Sent Messages Tab */}
      {activeTab === 'sent' && (
        <div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-300">
          {/* Filters Bar */}
          <Card padding="sm">
            <div className="flex flex-col sm:flex-row gap-4 items-center">
              <div className="flex-1 w-full relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                <input
                  type="text"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  placeholder="Search subject, body, or sender..."
                  className="w-full pl-10 pr-4 py-2 border-none bg-transparent focus:ring-0 text-gray-900 dark:text-white placeholder-gray-400"
                />
              </div>
              <div className="h-8 w-px bg-gray-200 dark:bg-gray-700 hidden sm:block" />
              <div className="w-full sm:w-auto min-w-[200px]">
                <div className="relative">
                  <Filter className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
                  <select
                    value={statusFilter}
                    onChange={(e) => setStatusFilter(e.target.value as any)}
                    className="w-full pl-10 pr-8 py-2 bg-gray-50 dark:bg-gray-800 border-none rounded-lg text-sm font-medium focus:ring-2 focus:ring-brand-500 cursor-pointer"
                  >
                    <option value="ALL">All Statuses</option>
                    <option value="SENT">Sent</option>
                    <option value="SENDING">Sending</option>
                    <option value="FAILED">Failed</option>
                  </select>
                </div>
              </div>
            </div>
          </Card>

          {/* Messages List */}
          {messagesLoading ? (
            <div className="flex flex-col items-center justify-center py-24">
              <Loader2 className="h-10 w-10 animate-spin text-brand-500 mb-4" />
              <p className="text-gray-500">Loading messages...</p>
            </div>
          ) : filteredMessages.length === 0 ? (
            <EmptyState
              icon={<MessageSquare className="h-12 w-12 text-gray-400" />}
              title="No messages found"
              description={searchTerm || statusFilter !== 'ALL' ? "Try adjusting your filters to see more results." : "You haven't sent any broadcast messages yet."}
              action={
                statusFilter === 'ALL' && !searchTerm ? (
                  <Button onClick={() => setActiveTab('compose')} leftIcon={<Send size={16} />}>
                    Compose First Message
                  </Button>
                ) : undefined
              }
            />
          ) : (
            <div className="grid gap-4">
              {filteredMessages.map((message) => (
                <Card
                  key={message.id}
                  hoverable
                  onClick={() => setSelectedMessage(message)}
                  className="group transition-all duration-200 border-l-4 border-l-transparent hover:border-l-brand-500"
                  padding="lg"
                >
                  <div className="flex flex-col sm:flex-row gap-4 justify-between">
                    <div className="flex-1 min-w-0 space-y-2">
                      <div className="flex items-center gap-3">
                        {getStatusBadge(message.status)}
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">
                          {message.subject}
                        </h3>
                      </div>
                      <p className="text-gray-600 dark:text-gray-400 line-clamp-2 text-sm">
                        {message.body}
                      </p>
                      <div className="flex flex-wrap items-center gap-4 text-xs font-medium text-gray-500 dark:text-gray-400 pt-2">
                        <div className="flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
                          <Users size={12} />
                          <span>{getTargetDescription(message)}</span>
                        </div>
                        <div className="flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
                          {getDeliveryMethodIcon(message.delivery_method)}
                          <span className="capitalize">{message.delivery_method.toLowerCase().replace('_', ' ')}</span>
                        </div>
                        <div className="flex items-center gap-1.5 bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
                          <Clock size={12} />
                          <span>{formatDate(message.sent_at || message.created_at)}</span>
                        </div>
                      </div>
                    </div>

                    <div className="flex sm:flex-col items-center sm:items-end justify-between sm:justify-center gap-4 border-t sm:border-t-0 sm:border-l border-gray-100 dark:border-gray-800 pt-4 sm:pt-0 sm:pl-6 min-w-[120px]">
                      {message.status === 'SENT' ? (
                        <div className="grid grid-cols-2 gap-x-6 gap-y-2 text-center">
                          <div>
                            <div className="text-xs text-gray-500 uppercase tracking-wide">Sent</div>
                            <div className="font-bold text-gray-900 dark:text-white">{message.total_recipients}</div>
                          </div>
                          <div>
                            <div className="text-xs text-gray-500 uppercase tracking-wide">Read</div>
                            <div className="font-bold text-brand-600 dark:text-brand-400">{message.read_count}</div>
                          </div>
                        </div>
                      ) : (
                        <div className="text-sm text-gray-400 italic">
                          Draft
                        </div>
                      )}
                      <div className="text-xs text-gray-400">
                        by {message.created_by_name}
                      </div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Message Detail Modal - Using simple fixed overlay for now since Modal component wasn't in list but likely exists. keeping existing logic with better styling */}
      {selectedMessage && (
        <div className="fixed inset-0 bg-gray-900/60 backdrop-blur-sm flex items-center justify-center p-4 z-50 animate-in fade-in duration-200">
          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[85vh] overflow-hidden flex flex-col animate-in zoom-in-95 duration-200">
            <div className="p-6 border-b border-gray-100 dark:border-gray-700 flex items-start justify-between bg-gray-50/50 dark:bg-gray-800">
              <div>
                <div className="flex items-center gap-3 mb-2">
                  {getStatusBadge(selectedMessage.status)}
                  <span className="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
                    <Clock size={14} />
                    {formatDate(selectedMessage.sent_at || selectedMessage.created_at)}
                  </span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 dark:text-white leading-tight">
                  {selectedMessage.subject}
                </h3>
              </div>
              <button
                onClick={() => setSelectedMessage(null)}
                className="p-2 -mr-2 -mt-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors"
              >
                <X size={20} />
              </button>
            </div>

            <div className="p-8 overflow-y-auto space-y-8 custom-scrollbar">
              {/* Stats Cards */}
              {selectedMessage.status === 'SENT' && (
                <div className="grid grid-cols-3 gap-4">
                  <div className="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4 text-center border border-gray-100 dark:border-gray-700">
                    <div className="text-2xl font-bold text-gray-900 dark:text-white mb-1">
                      {selectedMessage.total_recipients}
                    </div>
                    <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
                      Recipients
                    </div>
                  </div>
                  <div className="bg-green-50 dark:bg-green-900/10 rounded-xl p-4 text-center border border-green-100 dark:border-green-900/20">
                    <div className="text-2xl font-bold text-green-700 dark:text-green-400 mb-1">
                      {selectedMessage.delivered_count}
                    </div>
                    <div className="text-xs font-semibold text-green-600 uppercase tracking-wider">
                      Delivered
                    </div>
                  </div>
                  <div className="bg-blue-50 dark:bg-blue-900/10 rounded-xl p-4 text-center border border-blue-100 dark:border-blue-900/20">
                    <div className="text-2xl font-bold text-blue-700 dark:text-blue-400 mb-1">
                      {selectedMessage.read_count}
                    </div>
                    <div className="text-xs font-semibold text-blue-600 uppercase tracking-wider">
                      Read
                    </div>
                  </div>
                </div>
              )}

              {/* Message Body */}
              <div className="prose dark:prose-invert max-w-none">
                <h4 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
                  Message Content
                </h4>
                <div className="p-6 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-gray-100 dark:border-gray-700 text-gray-800 dark:text-gray-200 whitespace-pre-wrap leading-relaxed">
                  {selectedMessage.body}
                </div>
              </div>

              {/* Meta Info */}
              <div className="grid sm:grid-cols-2 gap-6">
                <div>
                  <h4 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">
                    Recipients
                  </h4>
                  <div className="flex items-center gap-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                    <Users size={18} className="text-gray-400" />
                    <span>{getTargetDescription(selectedMessage)}</span>
                  </div>
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">
                    Delivery Method
                  </h4>
                  <div className="flex items-center gap-2 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                    {getDeliveryMethodIcon(selectedMessage.delivery_method)}
                    <span className="capitalize">
                      {selectedMessage.delivery_method.toLowerCase().replace('_', ' ')}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div className="p-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-700 flex justify-end">
               <span className="text-xs text-gray-400">
                  Sent by {selectedMessage.created_by_name}
               </span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Messages;