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
} from 'lucide-react';
import toast from 'react-hot-toast';

// 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';

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');
    },
  });

  // Handlers
  const handleRoleToggle = (role: string) => {
    setSelectedRoles((prev) =>
      prev.includes(role) ? prev.filter((r) => r !== role) : [...prev, 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: 'All Owners', icon: Users },
    { value: 'manager', label: 'All Managers', icon: Users },
    { value: 'staff', label: 'All Staff', icon: Users },
    { value: 'customer', label: 'All Customers', icon: Users },
  ];

  const deliveryMethodOptions = [
    { value: 'IN_APP' as const, label: 'In-App Only', icon: Bell },
    { value: 'EMAIL' as const, label: 'Email Only', icon: Mail },
    { value: 'SMS' as const, label: 'SMS Only', icon: Smartphone },
    { value: 'ALL' as const, label: 'All Channels', icon: MessageSquare },
  ];

  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 (
          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
            <CheckCircle2 size={12} />
            Sent
          </span>
        );
      case 'SENDING':
        return (
          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
            <Loader2 size={12} className="animate-spin" />
            Sending
          </span>
        );
      case 'FAILED':
        return (
          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
            <AlertCircle size={12} />
            Failed
          </span>
        );
      default:
        return (
          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
            <Clock size={12} />
            Draft
          </span>
        );
    }
  };

  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} individual user(s)`);
    }

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

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Broadcast Messages</h2>
          <p className="text-gray-500 dark:text-gray-400">
            Send messages to staff and customers
          </p>
        </div>
      </div>

      {/* Tabs */}
      <div className="border-b border-gray-200 dark:border-gray-700">
        <nav className="-mb-px flex space-x-8">
          <button
            onClick={() => setActiveTab('compose')}
            className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
              activeTab === 'compose'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <div className="flex items-center gap-2">
              <MessageSquare size={18} />
              Compose
            </div>
          </button>
          <button
            onClick={() => setActiveTab('sent')}
            className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
              activeTab === 'sent'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <div className="flex items-center gap-2">
              <Send size={18} />
              Sent Messages
              {messages.length > 0 && (
                <span className="ml-2 px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                  {messages.length}
                </span>
              )}
            </div>
          </button>
        </nav>
      </div>

      {/* Compose Tab */}
      {activeTab === 'compose' && (
        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
          <form onSubmit={handleSubmit} className="p-6 space-y-6">
            {/* Subject */}
            <div>
              <label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Subject *
              </label>
              <input
                type="text"
                id="subject"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                placeholder="Enter message subject..."
                required
              />
            </div>

            {/* Body */}
            <div>
              <label htmlFor="body" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                Message *
              </label>
              <textarea
                id="body"
                value={body}
                onChange={(e) => setBody(e.target.value)}
                rows={8}
                className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-700 dark:text-white resize-none"
                placeholder="Enter your message..."
                required
              />
            </div>

            {/* Target Roles */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                Target Groups
              </label>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                {roleOptions.map((role) => (
                  <label
                    key={role.value}
                    className={`flex items-center gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all ${
                      selectedRoles.includes(role.value)
                        ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
                        : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
                    }`}
                  >
                    <input
                      type="checkbox"
                      checked={selectedRoles.includes(role.value)}
                      onChange={() => handleRoleToggle(role.value)}
                      className="w-5 h-5 text-brand-600 border-gray-300 rounded focus:ring-brand-500"
                    />
                    <role.icon size={20} className="text-gray-400" />
                    <span className="text-sm font-medium text-gray-900 dark:text-white">
                      {role.label}
                    </span>
                  </label>
                ))}
              </div>
            </div>

            {/* Individual Recipients */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                Individual Recipients (Optional)
              </label>

              {/* Autofill Search */}
              <div className="relative">
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
                  <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="Type to search recipients..."
                    className="w-full pl-10 pr-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
                  />
                  {recipientsLoading && recipientSearchTerm && (
                    <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 animate-spin" size={18} />
                  )}
                </div>

                {/* Dropdown Results */}
                {isRecipientDropdownOpen && recipientSearchTerm && !recipientsLoading && (
                  <>
                    {/* Click outside to close */}
                    <div
                      className="fixed inset-0 z-10"
                      onClick={() => setIsRecipientDropdownOpen(false)}
                    />
                    <div
                      ref={dropdownRef}
                      onScroll={handleDropdownScroll}
                      className="absolute z-20 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg max-h-72 overflow-y-auto"
                    >
                      {filteredRecipients.length === 0 ? (
                        <p className="text-center py-4 text-gray-500 dark:text-gray-400 text-sm">
                          No matching users found
                        </p>
                      ) : (
                        <>
                          {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 transition-colors border-b border-gray-100 dark:border-gray-700 last:border-b-0 text-left"
                            >
                              <UserPlus size={18} className="text-gray-400 flex-shrink-0" />
                              <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>
                              <span className="px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 capitalize flex-shrink-0">
                                {user.role}
                              </span>
                            </button>
                          ))}
                          {filteredRecipients.length > visibleRecipientCount && (
                            <div className="text-center py-3 text-xs text-gray-500 dark:text-gray-400">
                              <Loader2 size={16} className="inline-block animate-spin mr-2" />
                              Scroll for more...
                            </div>
                          )}
                        </>
                      )}
                    </div>
                  </>
                )}
              </div>

              {/* Selected Users List */}
              {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 px-3 py-1.5 bg-brand-50 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 rounded-full text-sm"
                    >
                      <span className="font-medium">{user.name}</span>
                      <span className="text-brand-500 dark:text-brand-400 text-xs">({user.role})</span>
                      <button
                        type="button"
                        onClick={() => handleRemoveUser(user.id)}
                        className="ml-1 p-0.5 hover:bg-brand-200 dark:hover:bg-brand-800 rounded-full transition-colors"
                      >
                        <X size={14} />
                      </button>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Delivery Method */}
            <div>
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                Delivery Method
              </label>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                {deliveryMethodOptions.map((option) => (
                  <label
                    key={option.value}
                    className={`flex items-center gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all ${
                      deliveryMethod === option.value
                        ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
                        : 'border-gray-200 dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-500'
                    }`}
                  >
                    <input
                      type="radio"
                      name="delivery_method"
                      value={option.value}
                      checked={deliveryMethod === option.value}
                      onChange={(e) => setDeliveryMethod(e.target.value as any)}
                      className="w-5 h-5 text-brand-600 border-gray-300 focus:ring-brand-500"
                    />
                    <option.icon size={20} className="text-gray-400" />
                    <span className="text-sm font-medium text-gray-900 dark:text-white">
                      {option.label}
                    </span>
                  </label>
                ))}
              </div>
            </div>

            {/* Recipient Count */}
            {recipientCount > 0 && (
              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                <div className="flex items-center gap-2 text-blue-800 dark:text-blue-300">
                  <Users size={18} />
                  <span className="font-medium">
                    This message will be sent to approximately {recipientCount} recipient{recipientCount !== 1 ? 's' : ''}
                  </span>
                </div>
              </div>
            )}

            {/* Actions */}
            <div className="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-gray-700">
              <button
                type="button"
                onClick={resetForm}
                disabled={createMessage.isPending || sendMessage.isPending}
                className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:opacity-50"
              >
                Clear
              </button>
              <button
                type="submit"
                disabled={createMessage.isPending || sendMessage.isPending}
                className="inline-flex items-center gap-2 px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors disabled:opacity-50"
              >
                {createMessage.isPending || sendMessage.isPending ? (
                  <>
                    <Loader2 size={18} className="animate-spin" />
                    Sending...
                  </>
                ) : (
                  <>
                    <Send size={18} />
                    Send Message
                  </>
                )}
              </button>
            </div>
          </form>
        </div>
      )}

      {/* Sent Messages Tab */}
      {activeTab === 'sent' && (
        <div className="space-y-4">
          {/* Filters */}
          <div className="flex flex-col sm:flex-row gap-3">
            <div className="flex-1 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 messages..."
                className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-800 dark:text-white"
              />
            </div>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as any)}
              className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-transparent dark:bg-gray-800 dark:text-white"
            >
              <option value="ALL">All Statuses</option>
              <option value="SENT">Sent</option>
              <option value="SENDING">Sending</option>
              <option value="FAILED">Failed</option>
            </select>
          </div>

          {/* Messages List */}
          {messagesLoading ? (
            <div className="text-center py-12">
              <Loader2 className="mx-auto h-12 w-12 animate-spin text-brand-500" />
            </div>
          ) : filteredMessages.length === 0 ? (
            <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
              <MessageSquare className="mx-auto h-12 w-12 text-gray-400" />
              <p className="mt-4 text-gray-500 dark:text-gray-400">
                {searchTerm || statusFilter !== 'ALL' ? 'No messages found' : 'No messages sent yet'}
              </p>
            </div>
          ) : (
            <div className="space-y-3">
              {filteredMessages.map((message) => (
                <div
                  key={message.id}
                  className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow cursor-pointer"
                  onClick={() => setSelectedMessage(message)}
                >
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">
                          {message.subject}
                        </h3>
                        {getStatusBadge(message.status)}
                      </div>
                      <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">
                        {message.body}
                      </p>
                      <div className="flex flex-wrap items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                        <div className="flex items-center gap-1.5">
                          <Users size={14} />
                          <span>{getTargetDescription(message)}</span>
                        </div>
                        <div className="flex items-center gap-1.5">
                          {getDeliveryMethodIcon(message.delivery_method)}
                          <span className="capitalize">{message.delivery_method.toLowerCase().replace('_', ' ')}</span>
                        </div>
                        <div className="flex items-center gap-1.5">
                          <Clock size={14} />
                          <span>{formatDate(message.sent_at || message.created_at)}</span>
                        </div>
                      </div>
                    </div>
                    <div className="flex flex-col items-end gap-2 text-right">
                      <div className="text-sm text-gray-500 dark:text-gray-400">
                        By {message.created_by_name}
                      </div>
                      {message.status === 'SENT' && (
                        <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
                          <div className="flex items-center gap-1">
                            <Send size={12} />
                            <span>{message.delivered_count}/{message.total_recipients}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Eye size={12} />
                            <span>{message.read_count}</span>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Message Detail Modal */}
      {selectedMessage && (
        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 p-6 flex items-start justify-between">
              <div className="flex-1">
                <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">
                  {selectedMessage.subject}
                </h3>
                <div className="flex items-center gap-3">
                  {getStatusBadge(selectedMessage.status)}
                  <span className="text-sm text-gray-500 dark:text-gray-400">
                    {formatDate(selectedMessage.sent_at || selectedMessage.created_at)}
                  </span>
                </div>
              </div>
              <button
                onClick={() => setSelectedMessage(null)}
                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
              >
                <X size={20} />
              </button>
            </div>

            <div className="p-6 space-y-6">
              {/* Message Body */}
              <div>
                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                  Message
                </h4>
                <p className="text-gray-900 dark:text-gray-100 whitespace-pre-wrap">
                  {selectedMessage.body}
                </p>
              </div>

              {/* Recipients */}
              <div>
                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                  Recipients
                </h4>
                <p className="text-gray-900 dark:text-gray-100">
                  {getTargetDescription(selectedMessage)}
                </p>
              </div>

              {/* Delivery Method */}
              <div>
                <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                  Delivery Method
                </h4>
                <div className="flex items-center gap-2 text-gray-900 dark:text-gray-100">
                  {getDeliveryMethodIcon(selectedMessage.delivery_method)}
                  <span className="capitalize">
                    {selectedMessage.delivery_method.toLowerCase().replace('_', ' ')}
                  </span>
                </div>
              </div>

              {/* Statistics */}
              {selectedMessage.status === 'SENT' && (
                <div className="grid grid-cols-3 gap-4">
                  <div className="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
                      {selectedMessage.total_recipients}
                    </div>
                    <div className="text-sm text-gray-500 dark:text-gray-400">
                      Total Recipients
                    </div>
                  </div>
                  <div className="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
                    <div className="text-2xl font-bold text-green-700 dark:text-green-400">
                      {selectedMessage.delivered_count}
                    </div>
                    <div className="text-sm text-green-600 dark:text-green-500">
                      Delivered
                    </div>
                  </div>
                  <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
                    <div className="text-2xl font-bold text-blue-700 dark:text-blue-400">
                      {selectedMessage.read_count}
                    </div>
                    <div className="text-sm text-blue-600 dark:text-blue-500">
                      Read
                    </div>
                  </div>
                </div>
              )}

              {/* Sender */}
              <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Sent by <span className="font-medium text-gray-900 dark:text-white">{selectedMessage.created_by_name}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Messages;
