'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  FaEnvelope,
  FaEnvelopeOpen,
  FaReply,
  FaTrash,
  FaSearch,
  FaFilter,
  FaCalendar,
  FaUser,
  FaPaperclip,
  FaTimes,
  FaPaperPlane,
  FaPhone,
  FaExclamationCircle
} from 'react-icons/fa';

interface Message {
  id: string;
  name: string;
  email: string;
  phone?: string;
  subject: string;
  message: string;
  serviceType?: string;
  status: 'unread' | 'read' | 'replied';
  priority: 'low' | 'medium' | 'high';
  receivedDate: string;
  attachments?: Array<{
    name: string;
    url: string;
    size: number;
  }>;
  reply?: {
    message: string;
    sentDate: string;
    sentBy: string;
  };
}

export default function MessageManagement() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [filteredMessages, setFilteredMessages] = useState<Message[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [filterStatus, setFilterStatus] = useState<string>('all');
  const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);
  const [isReplyModalOpen, setIsReplyModalOpen] = useState(false);
  const [replyMessage, setReplyMessage] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // Simulate API call
    setTimeout(() => {
      const mockMessages: Message[] = [
        {
          id: '1',
          name: 'John Doe',
          email: 'john.doe@example.com',
          phone: '+254 712 345 678',
          subject: 'E-Waste Collection Inquiry',
          message: 'Hello, I would like to inquire about your e-waste collection services for our office. We have about 50 old computers and monitors that need proper disposal. Could you provide a quote and schedule a pickup?',
          serviceType: 'e-waste-collection',
          status: 'unread',
          priority: 'high',
          receivedDate: '2024-01-22T10:30:00Z',
          attachments: [
            {
              name: 'inventory-list.pdf',
              url: '/attachments/inventory.pdf',
              size: 1024000
            }
          ]
        },
        {
          id: '2',
          name: 'Sarah Wilson',
          email: 'sarah.wilson@company.com',
          phone: '+254 734 567 890',
          subject: 'Computer Repair Service',
          message: 'My laptop has been running very slowly and sometimes freezes. I think it might need a hardware upgrade or cleaning. When would be the earliest appointment available?',
          serviceType: 'computer-repair',
          status: 'read',
          priority: 'medium',
          receivedDate: '2024-01-21T14:15:00Z'
        },
        {
          id: '3',
          name: 'Mike Johnson',
          email: 'mike.j@email.com',
          subject: 'Data Security Consultation',
          message: 'We are a small business looking to improve our data security practices. Could you provide information about your data security services and consultation packages?',
          serviceType: 'data-security',
          status: 'replied',
          priority: 'medium',
          receivedDate: '2024-01-20T09:45:00Z',
          reply: {
            message: 'Thank you for your inquiry. We offer comprehensive data security consultations. I will send you our service packages via email.',
            sentDate: '2024-01-20T16:30:00Z',
            sentBy: 'Admin'
          }
        },
        {
          id: '4',
          name: 'Lisa Chen',
          email: 'lisa.chen@organization.org',
          subject: 'Assistive Technology Training',
          message: 'Our organization works with visually impaired individuals. We are interested in your assistive technology training programs. Could you provide more details about the curriculum and pricing?',
          serviceType: 'assistive-tech',
          status: 'unread',
          priority: 'high',
          receivedDate: '2024-01-22T16:20:00Z'
        }
      ];
      setMessages(mockMessages);
      setFilteredMessages(mockMessages);
      setIsLoading(false);
    }, 1000);
  }, []);

  useEffect(() => {
    let filtered = messages.filter(msg =>
      msg.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      msg.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      msg.subject.toLowerCase().includes(searchTerm.toLowerCase()) ||
      msg.message.toLowerCase().includes(searchTerm.toLowerCase())
    );

    if (filterStatus !== 'all') {
      filtered = filtered.filter(msg => msg.status === filterStatus);
    }

    setFilteredMessages(filtered);
  }, [searchTerm, filterStatus, messages]);

  const handleMarkAsRead = (id: string) => {
    setMessages(prev => prev.map(msg => 
      msg.id === id ? { ...msg, status: 'read' as const } : msg
    ));
  };

  const handleDelete = (id: string) => {
    if (confirm('Are you sure you want to delete this message?')) {
      setMessages(prev => prev.filter(msg => msg.id !== id));
      if (selectedMessage?.id === id) {
        setSelectedMessage(null);
      }
    }
  };

  const handleReply = (message: Message) => {
    setSelectedMessage(message);
    setReplyMessage('');
    setIsReplyModalOpen(true);
    if (message.status === 'unread') {
      handleMarkAsRead(message.id);
    }
  };

  const handleSendReply = () => {
    if (!selectedMessage || !replyMessage.trim()) return;

    setMessages(prev => prev.map(msg => 
      msg.id === selectedMessage.id 
        ? { 
            ...msg, 
            status: 'replied' as const,
            reply: {
              message: replyMessage,
              sentDate: new Date().toISOString(),
              sentBy: 'Admin'
            }
          } 
        : msg
    ));

    setIsReplyModalOpen(false);
    setReplyMessage('');
    setSelectedMessage(null);
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'unread':
        return 'bg-red-100 text-red-800';
      case 'read':
        return 'bg-yellow-100 text-yellow-800';
      case 'replied':
        return 'bg-green-100 text-green-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high':
        return 'text-red-500';
      case 'medium':
        return 'text-yellow-500';
      case 'low':
        return 'text-green-500';
      default:
        return 'text-gray-500';
    }
  };

  const formatFileSize = (bytes: number): string => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-600"></div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold text-gray-900">Message Management</h1>
        <div className="flex items-center space-x-4 text-sm text-gray-500">
          <span>{messages.filter(m => m.status === 'unread').length} unread</span>
          <span>•</span>
          <span>{filteredMessages.length} of {messages.length} messages</span>
        </div>
      </div>

      {/* Search and Filter */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="relative">
            <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <input
              type="text"
              placeholder="Search messages by name, email, or content..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
            />
          </div>
          
          <div className="relative">
            <FaFilter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
            <select
              value={filterStatus}
              onChange={(e) => setFilterStatus(e.target.value)}
              className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent appearance-none"
            >
              <option value="all">All Messages</option>
              <option value="unread">Unread</option>
              <option value="read">Read</option>
              <option value="replied">Replied</option>
            </select>
          </div>
        </div>
      </div>

      {/* Messages List */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="divide-y divide-gray-200">
          <AnimatePresence>
            {filteredMessages.map((message) => (
              <motion.div
                key={message.id}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                className={`p-6 hover:bg-gray-50 cursor-pointer transition-colors ${
                  message.status === 'unread' ? 'bg-blue-50' : ''
                }`}
                onClick={() => setSelectedMessage(message)}
              >
                <div className="flex items-start justify-between">
                  <div className="flex items-start space-x-4 flex-1">
                    <div className="flex-shrink-0">
                      {message.status === 'unread' ? (
                        <FaEnvelope className="text-blue-500 text-lg" />
                      ) : (
                        <FaEnvelopeOpen className="text-gray-400 text-lg" />
                      )}
                    </div>
                    
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center space-x-2 mb-1">
                        <h3 className={`text-sm font-medium ${
                          message.status === 'unread' ? 'text-gray-900' : 'text-gray-700'
                        }`}>
                          {message.name}
                        </h3>
                        <span className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${
                          getStatusColor(message.status)
                        }`}>
                          {message.status}
                        </span>
                        <FaExclamationCircle className={`text-sm ${getPriorityColor(message.priority)}`} />
                      </div>
                      
                      <p className={`text-sm mb-1 ${
                        message.status === 'unread' ? 'text-gray-900 font-medium' : 'text-gray-600'
                      }`}>
                        {message.subject}
                      </p>
                      
                      <p className="text-sm text-gray-500 line-clamp-2">
                        {message.message}
                      </p>
                      
                      <div className="flex items-center space-x-4 mt-2 text-xs text-gray-500">
                        <div className="flex items-center space-x-1">
                          <FaUser />
                          <span>{message.email}</span>
                        </div>
                        {message.phone && (
                          <div className="flex items-center space-x-1">
                            <FaPhone />
                            <span>{message.phone}</span>
                          </div>
                        )}
                        <div className="flex items-center space-x-1">
                          <FaCalendar />
                          <span>{new Date(message.receivedDate).toLocaleDateString()}</span>
                        </div>
                        {message.attachments && message.attachments.length > 0 && (
                          <div className="flex items-center space-x-1">
                            <FaPaperclip />
                            <span>{message.attachments.length} attachment(s)</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                  
                  <div className="flex items-center space-x-2 ml-4">
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleReply(message);
                      }}
                      className="text-blue-600 hover:text-blue-800 transition-colors"
                      title="Reply"
                    >
                      <FaReply />
                    </button>
                    <button
                      onClick={(e) => {
                        e.stopPropagation();
                        handleDelete(message.id);
                      }}
                      className="text-red-600 hover:text-red-800 transition-colors"
                      title="Delete"
                    >
                      <FaTrash />
                    </button>
                  </div>
                </div>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>
      </div>

      {filteredMessages.length === 0 && (
        <div className="text-center py-12">
          <FaEnvelope className="mx-auto text-4xl text-gray-300 mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">No messages found</h3>
          <p className="text-gray-500">
            {searchTerm || filterStatus !== 'all' 
              ? 'Try adjusting your search or filter criteria.' 
              : 'No messages have been received yet.'}
          </p>
        </div>
      )}

      {/* Message Detail Modal */}
      <AnimatePresence>
        {selectedMessage && !isReplyModalOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
            onClick={() => setSelectedMessage(null)}
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="p-6">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-xl font-bold text-gray-900">Message Details</h2>
                  <button
                    onClick={() => setSelectedMessage(null)}
                    className="text-gray-400 hover:text-gray-600"
                  >
                    <FaTimes />
                  </button>
                </div>

                <div className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-700">From</label>
                      <p className="text-sm text-gray-900">{selectedMessage.name}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Email</label>
                      <p className="text-sm text-gray-900">{selectedMessage.email}</p>
                    </div>
                  </div>

                  {selectedMessage.phone && (
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Phone</label>
                      <p className="text-sm text-gray-900">{selectedMessage.phone}</p>
                    </div>
                  )}

                  <div>
                    <label className="block text-sm font-medium text-gray-700">Subject</label>
                    <p className="text-sm text-gray-900">{selectedMessage.subject}</p>
                  </div>

                  {selectedMessage.serviceType && (
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Service Type</label>
                      <p className="text-sm text-gray-900 capitalize">
                        {selectedMessage.serviceType.replace('-', ' ')}
                      </p>
                    </div>
                  )}

                  <div>
                    <label className="block text-sm font-medium text-gray-700">Message</label>
                    <div className="mt-1 p-3 bg-gray-50 rounded-lg">
                      <p className="text-sm text-gray-900 whitespace-pre-wrap">{selectedMessage.message}</p>
                    </div>
                  </div>

                  {selectedMessage.attachments && selectedMessage.attachments.length > 0 && (
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-2">Attachments</label>
                      <div className="space-y-2">
                        {selectedMessage.attachments.map((attachment, index) => (
                          <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                            <div className="flex items-center space-x-2">
                              <FaPaperclip className="text-gray-400" />
                              <span className="text-sm text-gray-900">{attachment.name}</span>
                              <span className="text-xs text-gray-500">({formatFileSize(attachment.size)})</span>
                            </div>
                            <a
                              href={attachment.url}
                              download
                              className="text-blue-600 hover:text-blue-800 text-sm"
                            >
                              Download
                            </a>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

                  {selectedMessage.reply && (
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Your Reply</label>
                      <div className="mt-1 p-3 bg-green-50 rounded-lg">
                        <p className="text-sm text-gray-900 whitespace-pre-wrap">{selectedMessage.reply.message}</p>
                        <p className="text-xs text-gray-500 mt-2">
                          Sent on {new Date(selectedMessage.reply.sentDate).toLocaleString()} by {selectedMessage.reply.sentBy}
                        </p>
                      </div>
                    </div>
                  )}

                  <div className="flex space-x-3 pt-4">
                    <button
                      onClick={() => handleReply(selectedMessage)}
                      className="flex-1 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center space-x-2"
                    >
                      <FaReply />
                      <span>Reply</span>
                    </button>
                    <button
                      onClick={() => {
                        handleDelete(selectedMessage.id);
                        setSelectedMessage(null);
                      }}
                      className="flex-1 bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors flex items-center justify-center space-x-2"
                    >
                      <FaTrash />
                      <span>Delete</span>
                    </button>
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Reply Modal */}
      <AnimatePresence>
        {isReplyModalOpen && selectedMessage && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
            onClick={() => setIsReplyModalOpen(false)}
          >
            <motion.div
              initial={{ scale: 0.95, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              exit={{ scale: 0.95, opacity: 0 }}
              className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto"
              onClick={(e) => e.stopPropagation()}
            >
              <div className="p-6">
                <div className="flex items-center justify-between mb-6">
                  <h2 className="text-xl font-bold text-gray-900">Reply to {selectedMessage.name}</h2>
                  <button
                    onClick={() => setIsReplyModalOpen(false)}
                    className="text-gray-400 hover:text-gray-600"
                  >
                    <FaTimes />
                  </button>
                </div>

                <div className="space-y-4">
                  <div className="bg-gray-50 p-4 rounded-lg">
                    <h3 className="font-medium text-gray-900 mb-2">Original Message:</h3>
                    <p className="text-sm text-gray-700">
                      <strong>Subject:</strong> {selectedMessage.subject}
                    </p>
                    <p className="text-sm text-gray-600 mt-2 line-clamp-3">
                      {selectedMessage.message}
                    </p>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">
                      Your Reply
                    </label>
                    <textarea
                      value={replyMessage}
                      onChange={(e) => setReplyMessage(e.target.value)}
                      placeholder="Type your reply here..."
                      rows={6}
                      className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none"
                    />
                  </div>

                  <div className="flex space-x-3 pt-4">
                    <button
                      onClick={() => setIsReplyModalOpen(false)}
                      className="flex-1 bg-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-400 transition-colors"
                    >
                      Cancel
                    </button>
                    <button
                      onClick={handleSendReply}
                      disabled={!replyMessage.trim()}
                      className="flex-1 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      <FaPaperPlane />
                      <span>Send Reply</span>
                    </button>
                  </div>
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}