sampleui.js

import React, { useState, useEffect, useRef } from 'react';
import { 
  Search, 
  MoreVertical, 
  Send, 
  Paperclip, 
  Smile, 
  Check, 
  CheckCheck, 
  Users, 
  Phone, 
  Video,
  ChevronLeft,
  ArrowLeft,
  User,
  Settings
} from 'lucide-react';

// Mock data to simulate your API structure with groups and private chats
const MOCK_CHANNELS = [
  {
    _id: "1",
    name: "Architects Alpha",
    type: "group",
    participantsCount: 12,
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Architects",
    lastMessage: "Einstein: The scaling logic is ready.",
    timestamp: "10:42 AM",
    unread: 3,
    online: true
  },
  {
    _id: "2",
    name: "Ada Lovelace",
    type: "private",
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Ada",
    lastMessage: "Did you review the algorithm?",
    timestamp: "Yesterday",
    unread: 0,
    online: true
  },
  {
    _id: "3",
    name: "Core Backend Team",
    type: "group",
    participantsCount: 5,
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Backend",
    lastMessage: "Turing: Encryption key updated.",
    timestamp: "Tuesday",
    unread: 0,
    online: false
  },
  {
    _id: "4",
    name: "Nikola Tesla",
    type: "private",
    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Tesla",
    lastMessage: "The energy readings are spiking.",
    timestamp: "Monday",
    unread: 1,
    online: false
  }
];

const MOCK_MESSAGES = {
  "1": [
    { id: 1, sender: "Einstein", text: "We need to rethink the spatial relativity module.", time: "10:30 AM", isMe: false },
    { id: 2, sender: "Me", text: "Is it the scaling factor causing issues?", time: "10:32 AM", isMe: true },
    { id: 3, sender: "Einstein", text: "Precisely. The scaling logic is ready.", time: "10:42 AM", isMe: false },
  ],
  "2": [
    { id: 1, sender: "Ada", text: "The first analytical engine draft is complete.", time: "Yesterday", isMe: false },
    { id: 2, sender: "Me", text: "Incredible. Checking it now.", time: "Yesterday", isMe: true },
    { id: 3, sender: "Ada", text: "Did you review the algorithm?", time: "Yesterday", isMe: false },
  ]
};

export default function MessagesPage() {
  const [selectedId, setSelectedId] = useState(null);
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState("");
  const scrollRef = useRef(null);

  const selectedChannel = MOCK_CHANNELS.find(c => c._id === selectedId);

  useEffect(() => {
    if (selectedId) {
      setMessages(MOCK_MESSAGES[selectedId] || []);
    }
  }, [selectedId]);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages]);

  const handleSendMessage = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    
    const newMsg = {
      id: Date.now(),
      sender: "Me",
      text: inputValue,
      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
      isMe: true
    };
    
    setMessages([...messages, newMsg]);
    setInputValue("");
  };

  return (
    <div className="flex h-screen bg-[#0f0f0f] text-white overflow-hidden font-sans border border-white/5">
      
      {/* LEFT SIDEBAR: Conversations List */}
      <div className={`w-full md:w-[400px] border-r border-white/5 flex flex-col bg-[#121212] ${selectedId ? 'hidden md:flex' : 'flex'}`}>
        {/* Sidebar Header */}
        <div className="p-6 space-y-6">
          <div className="flex justify-between items-center">
            <h1 className="text-2xl font-black italic tracking-tighter uppercase">Squad_Comms</h1>
            <div className="flex gap-4">
               <Settings className="w-5 h-5 opacity-40 cursor-pointer hover:opacity-100 transition-opacity" />
            </div>
          </div>
          
          <div className="relative">
            <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-white/20" />
            <input 
              type="text" 
              placeholder="Search frequency..." 
              className="w-full bg-white/5 border border-white/5 rounded-full py-3 pl-12 pr-4 text-sm focus:outline-none focus:border-white/20 transition-all placeholder:text-white/10"
            />
          </div>
        </div>

        {/* Channels List */}
        <div className="flex-1 overflow-y-auto custom-scrollbar">
          {MOCK_CHANNELS.map(channel => (
            <div 
              key={channel._id}
              onClick={() => setSelectedId(channel._id)}
              className={`px-6 py-4 flex items-center gap-4 cursor-pointer transition-all border-l-2 ${
                selectedId === channel._id 
                  ? 'bg-white/5 border-emerald-500' 
                  : 'border-transparent hover:bg-white/[0.02]'
              }`}
            >
              <div className="relative flex-shrink-0">
                <img src={channel.avatar} alt="" className="w-14 h-14 rounded-full bg-[#1a1a1a]" />
                {channel.online && (
                  <div className="absolute bottom-0 right-0 w-3.5 h-3.5 bg-emerald-500 border-2 border-[#121212] rounded-full" />
                )}
              </div>
              
              <div className="flex-1 min-w-0">
                <div className="flex justify-between items-baseline mb-1">
                  <div className="flex items-center gap-2 overflow-hidden">
                    <h3 className="font-bold truncate text-[15px]">{channel.name}</h3>
                    {channel.type === 'group' && <Users className="w-3 h-3 text-white/20" />}
                  </div>
                  <span className="text-[10px] font-black tracking-widest text-white/20 uppercase whitespace-nowrap">{channel.timestamp}</span>
                </div>
                <div className="flex justify-between items-center">
                  <p className="text-sm text-white/40 truncate leading-snug">{channel.lastMessage}</p>
                  {channel.unread > 0 && (
                    <span className="bg-emerald-500 text-black text-[10px] font-black px-1.5 py-0.5 rounded-sm ml-2">
                      {channel.unread}
                    </span>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* RIGHT PANE: Chat Interface */}
      <div className={`flex-1 flex flex-col bg-[#0a0a0a] ${!selectedId ? 'hidden md:flex items-center justify-center' : 'flex'}`}>
        {selectedId ? (
          <>
            {/* Chat Header */}
            <div className="h-20 border-b border-white/5 px-8 flex items-center justify-between bg-[#121212]/50 backdrop-blur-xl">
              <div className="flex items-center gap-4">
                <button onClick={() => setSelectedId(null)} className="md:hidden mr-2">
                  <ArrowLeft className="w-5 h-5" />
                </button>
                <img src={selectedChannel.avatar} className="w-10 h-10 rounded-full" alt="" />
                <div>
                  <h2 className="font-bold text-sm tracking-tight">{selectedChannel.name}</h2>
                  <p className="text-[10px] text-emerald-500 font-bold tracking-widest uppercase">
                    {selectedChannel.online ? 'Active Now' : 'Disconnected'}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-6 opacity-40">
                <Phone className="w-4 h-4 cursor-pointer hover:opacity-100" />
                <Video className="w-4 h-4 cursor-pointer hover:opacity-100" />
                <MoreVertical className="w-4 h-4 cursor-pointer hover:opacity-100" />
              </div>
            </div>

            {/* Messages Area */}
            <div 
              ref={scrollRef}
              className="flex-1 overflow-y-auto p-8 space-y-6 custom-scrollbar"
            >
              <div className="flex justify-center mb-8">
                <span className="text-[9px] font-black tracking-[0.4em] bg-white/5 px-4 py-1.5 rounded-full text-white/20 uppercase">
                  Encrypted Archive Access
                </span>
              </div>

              {messages.map((msg) => (
                <div key={msg.id} className={`flex flex-col ${msg.isMe ? 'items-end' : 'items-start'}`}>
                  {!msg.isMe && selectedChannel.type === 'group' && (
                    <span className="text-[10px] font-bold text-emerald-500/50 mb-1 ml-2 uppercase tracking-tighter">
                      {msg.sender}
                    </span>
                  )}
                  <div className={`max-w-[70%] group relative`}>
                    <div className={`px-5 py-3 rounded-2xl text-sm leading-relaxed ${
                      msg.isMe 
                        ? 'bg-emerald-500 text-black font-medium rounded-tr-none' 
                        : 'bg-white/5 text-white/80 rounded-tl-none border border-white/5'
                    }`}>
                      {msg.text}
                    </div>
                    <div className={`flex items-center gap-1 mt-1 px-1 ${msg.isMe ? 'justify-end' : 'justify-start'}`}>
                      <span className="text-[9px] font-black tracking-tighter opacity-20 uppercase">{msg.time}</span>
                      {msg.isMe && <CheckCheck className="w-3 h-3 text-emerald-500" />}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            {/* Message Input */}
            <div className="p-8">
              <form 
                onSubmit={handleSendMessage}
                className="bg-[#121212] border border-white/5 rounded-2xl flex items-center p-2 focus-within:border-white/20 transition-all shadow-2xl"
              >
                <div className="flex items-center px-4 gap-4 opacity-30">
                  <Paperclip className="w-5 h-5 cursor-pointer hover:opacity-100" />
                  <Smile className="w-5 h-5 cursor-pointer hover:opacity-100" />
                </div>
                <input 
                  type="text" 
                  value={inputValue}
                  onChange={(e) => setInputValue(e.target.value)}
                  placeholder="Transmit message..." 
                  className="flex-1 bg-transparent py-4 text-sm focus:outline-none placeholder:text-white/10"
                />
                <button 
                  type="submit"
                  className="w-12 h-12 bg-white text-black rounded-xl flex items-center justify-center hover:bg-emerald-500 transition-all active:scale-95"
                >
                  <Send className="w-5 h-5" />
                </button>
              </form>
            </div>
          </>
        ) : (
          <div className="text-center space-y-6 opacity-20">
            <div className="relative inline-block">
               <div className="absolute inset-0 bg-emerald-500 blur-3xl rounded-full" />
               <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Admin" className="w-32 h-32 rounded-full relative bg-black p-1" />
            </div>
            <div className="space-y-2">
              <h2 className="text-2xl font-black italic tracking-tighter uppercase">Protocol Ready</h2>
              <p className="text-xs tracking-widest font-sans font-bold uppercase">Select a terminal to begin communication</p>
            </div>
          </div>
        )}
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        .custom-scrollbar::-webkit-scrollbar {
          width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
          background: transparent;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.05);
          border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      `}} />
    </div>
  );
}