import React from "react";
import Message from "./Message";
import MessageInput from "./MessageInput";

const messages = [
  { type: "system", label: "FOUNDATION", text: "Foundation authentication services upgraded to v2.1.0. Enhanced security protocols now active across all AeThex infrastructure.", className: "foundation" },
  { type: "user", author: "Trevor", badge: "Foundation", time: "10:34 AM", text: "Just pushed the authentication updates. All services should automatically migrate to the new protocols within 24 hours.", avatar: "T", avatarBg: "from-red-600 to-red-800" },
  { type: "user", author: "Marcus", time: "10:41 AM", text: "Excellent work! I've been testing the new Passport integration and it's incredibly smooth. The Trinity color-coding in the UI makes it really clear which division is handling what.", avatar: "M", avatarBg: "from-blue-600 to-blue-900" },
  { type: "system", label: "LABS", text: "Nexus Engine v2.0-beta now available for testing. New cross-platform sync reduces latency by 40%. Join #labs-testing to participate.", className: "labs" },
  { type: "user", author: "Sarah", badge: "Labs", time: "11:15 AM", text: "The Nexus v2 parallel compilation is insane. Cut my build time from 3 minutes to under 2. Still some edge cases with complex state synchronization but wow... ⚠️", avatar: "S", avatarBg: "from-orange-400 to-orange-700" },
  { type: "user", author: "Anderson", badge: "Founder", time: "11:47 AM", text: "Love seeing the Trinity infrastructure working in harmony. Foundation keeping everything secure, Labs pushing the boundaries, Corporation delivering production-ready tools. This is exactly the vision.", avatar: "A", avatarBg: "from-red-600 via-blue-600 to-orange-400" },
  { type: "user", author: "DevUser_2847", time: "12:03 PM", text: "Quick question - when using AeThex Studio, does the Terminal automatically connect to all three Trinity divisions, or do I need to configure that?", avatar: "D", avatarBg: "bg-[#1a1a1a]" },
  { type: "system", label: "CORPORATION", text: "AeThex Studio Pro users: New Railway deployment templates available. Optimized configurations for Foundation APIs, Corporation services, and Labs experiments.", className: "corporation" },
];

const ChatArea: React.FC = () => (
  <div className="chat-area flex flex-col flex-1 bg-[#0a0a0a]">
    {/* Chat Header */}
    <div className="chat-header px-5 py-4 border-b border-[#1a1a1a] flex items-center gap-3">
      <span className="channel-name-header flex-1 font-bold text-base"># general</span>
      <div className="chat-tools flex gap-4 text-sm text-gray-500">
        <span className="chat-tool cursor-pointer hover:text-blue-500">🔔</span>
        <span className="chat-tool cursor-pointer hover:text-blue-500">📌</span>
        <span className="chat-tool cursor-pointer hover:text-blue-500">👥 128</span>
        <span className="chat-tool cursor-pointer hover:text-blue-500">🔍</span>
      </div>
    </div>
    {/* Messages */}
    <div className="chat-messages flex-1 overflow-y-auto px-5 py-5">
      {messages.map((msg, i) => (
        <Message key={i} {...msg} />
      ))}
    </div>
    {/* Message Input */}
    <div className="message-input-container px-5 py-5 border-t border-[#1a1a1a]">
      <MessageInput />
    </div>
  </div>
);

export default ChatArea;