import React, { useState } from 'react';
import { useCollege } from '../context/CollegeContext';
import {
  MessageSquare,
  Send,
  User,
  Users,
  Search,
  CheckCircle2,
  Paperclip,
  Clock,
  GraduationCap,
  ShieldCheck,
} from 'lucide-react';

export const MessagesView: React.FC = () => {
  const { messages, currentUser, allUsers, sendMessage, fees } = useCollege();
  const [selectedRecipientId, setSelectedRecipientId] = useState<string>('user-teacher-1');
  const [msgContent, setMsgContent] = useState('');
  const [msgSubject, setMsgSubject] = useState('');
  const [searchTerm, setSearchTerm] = useState('');

  // Available contacts (excluding self)
  const contacts = allUsers.filter(u => u.id !== currentUser.id);

  const selectedRecipient = allUsers.find(u => u.id === selectedRecipientId) || contacts[0];

  // Messages between current user and selected contact
  const conversation = messages.filter(
    m =>
      (m.senderId === currentUser.id && m.receiverId === selectedRecipient?.id) ||
      (m.senderId === selectedRecipient?.id && m.receiverId === currentUser.id) ||
      (currentUser.role === 'admin')
  );

  const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault();
    if (!msgContent.trim() || !selectedRecipient) return;

    // Find student context if parent
    const studentInfo = fees.find(f => f.studentId === currentUser.studentId) || fees[0];

    sendMessage({
      senderId: currentUser.id,
      senderName: currentUser.name,
      senderRole: currentUser.role,
      receiverId: selectedRecipient.id,
      receiverName: selectedRecipient.name,
      receiverRole: selectedRecipient.role,
      studentId: currentUser.studentId || studentInfo?.studentId,
      studentName: studentInfo?.studentName,
      subject: msgSubject || `Message from ${currentUser.name}`,
      content: msgContent,
    });

    setMsgContent('');
    setMsgSubject('');
  };

  return (
    <div className="space-y-6">
      
      {/* Top Banner */}
      <div className="bg-slate-900 text-white rounded-2xl p-6 shadow-md border border-slate-800 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="space-y-1">
          <div className="flex items-center gap-2">
            <span className="bg-purple-600 text-white font-mono text-[10px] font-bold px-2 py-0.5 rounded uppercase">
              Encrypted Channel
            </span>
            <span className="text-xs text-slate-400">Parent-Faculty Direct Line</span>
          </div>
          <h1 className="text-xl sm:text-2xl font-bold tracking-tight text-white">
            Direct Faculty & Guardian Messaging
          </h1>
          <p className="text-xs sm:text-sm text-slate-300">
            Real-time inquiries on academic attendance, coursework performance, and fee settlements.
          </p>
        </div>

        <div className="flex items-center gap-2">
          <span className="text-xs bg-slate-800 text-emerald-400 font-mono px-3 py-1.5 rounded-lg border border-slate-700">
            Active: {currentUser.name} ({currentUser.role.toUpperCase()})
          </span>
        </div>
      </div>

      {/* Main Messaging Interface */}
      <div className="bg-white rounded-2xl border border-slate-200 shadow-xs overflow-hidden grid grid-cols-1 md:grid-cols-3 min-h-[550px]">
        
        {/* Left: Contact Directory */}
        <div className="border-r border-slate-200 bg-slate-50 flex flex-col">
          <div className="p-3.5 border-b border-slate-200">
            <div className="relative">
              <Search className="w-4 h-4 text-slate-400 absolute left-3 top-2.5" />
              <input
                type="text"
                placeholder="Search staff, parents..."
                value={searchTerm}
                onChange={e => setSearchTerm(e.target.value)}
                className="w-full pl-9 pr-3 py-1.5 bg-white border border-slate-300 rounded-lg text-xs focus:ring-2 focus:ring-emerald-500 focus:outline-none"
              />
            </div>
          </div>

          <div className="flex-1 overflow-y-auto divide-y divide-slate-200">
            {contacts
              .filter(c => c.name.toLowerCase().includes(searchTerm.toLowerCase()) || c.role.includes(searchTerm.toLowerCase()))
              .map(c => (
                <button
                  key={c.id}
                  onClick={() => setSelectedRecipientId(c.id)}
                  className={`w-full text-left p-3.5 flex items-center gap-3 transition ${
                    selectedRecipientId === c.id
                      ? 'bg-white border-l-4 border-emerald-600 shadow-xs'
                      : 'hover:bg-slate-100'
                  }`}
                >
                  <div className="relative">
                    <img
                      src={c.avatarUrl || 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&auto=format&fit=crop&q=80'}
                      alt={c.name}
                      className="w-10 h-10 rounded-full object-cover border border-slate-300"
                    />
                    <span className="absolute bottom-0 right-0 w-2.5 h-2.5 rounded-full bg-emerald-500 ring-2 ring-white"></span>
                  </div>

                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <h4 className="font-bold text-xs text-slate-900 truncate">{c.name}</h4>
                      <span className="text-[10px] text-slate-400 capitalize font-medium">{c.role}</span>
                    </div>
                    <p className="text-[11px] text-slate-500 truncate">{c.title || c.email}</p>
                  </div>
                </button>
              ))}
          </div>
        </div>

        {/* Right: Active Chat Conversation */}
        <div className="md:col-span-2 flex flex-col bg-white">
          
          {/* Chat Header */}
          {selectedRecipient ? (
            <div className="p-4 border-b border-slate-200 flex items-center justify-between bg-slate-50/50">
              <div className="flex items-center gap-3">
                <img
                  src={selectedRecipient.avatarUrl || 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&auto=format&fit=crop&q=80'}
                  alt={selectedRecipient.name}
                  className="w-10 h-10 rounded-full object-cover border border-slate-300"
                />
                <div>
                  <h3 className="font-bold text-slate-900 text-sm">{selectedRecipient.name}</h3>
                  <p className="text-[11px] text-slate-500">
                    {selectedRecipient.title} • {selectedRecipient.email}
                  </p>
                </div>
              </div>

              <span className="px-2.5 py-1 rounded text-[10px] font-bold uppercase tracking-wider bg-purple-100 text-purple-900">
                {selectedRecipient.role}
              </span>
            </div>
          ) : null}

          {/* Messages Stream */}
          <div className="flex-1 p-4 overflow-y-auto space-y-3 bg-slate-50/30">
            {conversation.length === 0 ? (
              <div className="py-16 text-center text-slate-400 space-y-2">
                <MessageSquare className="w-8 h-8 mx-auto text-slate-300" />
                <p className="text-xs">No prior messages with {selectedRecipient?.name}. Send the first message below!</p>
              </div>
            ) : (
              conversation.map(msg => {
                const isMe = msg.senderId === currentUser.id;
                return (
                  <div
                    key={msg.id}
                    className={`flex flex-col ${isMe ? 'items-end' : 'items-start'}`}
                  >
                    <div className="flex items-center gap-1.5 mb-0.5 text-[10px] text-slate-400">
                      <span className="font-semibold text-slate-700">{msg.senderName}</span>
                      <span>•</span>
                      <span>{msg.timestamp}</span>
                    </div>

                    <div
                      className={`max-w-md p-3.5 rounded-2xl text-xs space-y-1.5 ${
                        isMe
                          ? 'bg-slate-900 text-white rounded-tr-xs'
                          : 'bg-white border border-slate-200 text-slate-800 rounded-tl-xs shadow-xs'
                      }`}
                    >
                      {msg.subject && (
                        <div className={`font-bold text-[11px] pb-1 border-b ${
                          isMe ? 'border-slate-800 text-emerald-400' : 'border-slate-100 text-emerald-800'
                        }`}>
                          {msg.subject}
                        </div>
                      )}
                      <p className="leading-relaxed">{msg.content}</p>
                      {msg.studentName && (
                        <span className={`inline-block text-[10px] px-1.5 py-0.5 rounded font-mono ${
                          isMe ? 'bg-slate-800 text-slate-300' : 'bg-slate-100 text-slate-600'
                        }`}>
                          Re: {msg.studentName} ({msg.studentId})
                        </span>
                      )}
                    </div>
                  </div>
                );
              })
            )}
          </div>

          {/* Message Composer */}
          <form onSubmit={handleSendMessage} className="p-3.5 border-t border-slate-200 bg-white space-y-2">
            <div className="flex gap-2">
              <input
                type="text"
                placeholder="Subject / Topic (Optional)..."
                value={msgSubject}
                onChange={e => setMsgSubject(e.target.value)}
                className="w-full px-3 py-1.5 text-xs bg-slate-50 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
              />
            </div>

            <div className="flex gap-2">
              <input
                type="text"
                required
                placeholder={`Message ${selectedRecipient?.name}...`}
                value={msgContent}
                onChange={e => setMsgContent(e.target.value)}
                className="flex-1 px-3 py-2 text-xs bg-slate-50 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
              />
              <button
                type="submit"
                className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs flex items-center gap-1.5 shadow transition"
              >
                <Send className="w-3.5 h-3.5" />
                Send
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};