"use client";

import { MessageSquare, Trash2, MoreHorizontal } from "lucide-react";

function generateMockMessages() {
  const messages = [
    {
      id: 1,
      character: "Luna",
      avatar: "🌙",
      preview: "That sounds interesting...",
      timestamp: "2 hours ago",
      unread: true,
    },
    {
      id: 2,
      character: "Alex",
      avatar: "⚡",
      preview: "Hey! How have you been?",
      timestamp: "5 hours ago",
      unread: false,
    },
    {
      id: 3,
      character: "Sage",
      avatar: "🧙",
      preview: "The ancient prophecy speaks of...",
      timestamp: "Yesterday",
      unread: false,
    },
    {
      id: 4,
      character: "Nova",
      avatar: "✨",
      preview: "Ready for another space adventure?",
      timestamp: "2 days ago",
      unread: false,
    },
    {
      id: 5,
      character: "Echo",
      avatar: "🔮",
      preview: "I sensed something in the shadows...",
      timestamp: "3 days ago",
      unread: false,
    },
    {
      id: 6,
      character: "Storm",
      avatar: "⛈️",
      preview: "The journey awaits us!",
      timestamp: "1 week ago",
      unread: false,
    },
  ];

  return messages;
}

export default function MessagesPage() {
  const messages = generateMockMessages();

  return (
    <div className="p-6 max-w-3xl mx-auto">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold mb-2">Messages</h1>
        <p className="text-gray-600">Your conversations with characters</p>
      </div>

      {/* Messages List */}
      <div className="space-y-2">
        {messages.map((msg) => (
          <div
            key={msg.id}
            className={`border border-gray-200 rounded-xl p-4 hover:bg-gray-50 cursor-pointer transition flex items-center gap-4 group ${
              msg.unread ? "bg-blue-50" : "bg-white"
            }`}
          >
            {/* Avatar */}
            <div className="w-12 h-12 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 rounded-full flex items-center justify-center text-xl flex-shrink-0">
              {msg.avatar}
            </div>

            {/* Content */}
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 mb-1">
                <h3 className="font-semibold">{msg.character}</h3>
                {msg.unread && <div className="w-2 h-2 bg-blue-600 rounded-full"></div>}
              </div>
              <p className="text-sm text-gray-600 truncate">{msg.preview}</p>
            </div>

            {/* Meta */}
            <div className="text-right flex-shrink-0">
              <p className="text-xs text-gray-500 mb-2">{msg.timestamp}</p>
              <div className="opacity-0 group-hover:opacity-100 transition flex gap-2">
                <button className="p-2 hover:bg-gray-200 rounded-lg transition">
                  <MoreHorizontal className="w-4 h-4" />
                </button>
                <button className="p-2 hover:bg-red-100 text-red-600 rounded-lg transition">
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Empty State */}
      {messages.length === 0 && (
        <div className="text-center py-16">
          <MessageSquare className="w-16 h-16 text-gray-300 mx-auto mb-4" />
          <h3 className="text-lg font-semibold mb-2">No messages yet</h3>
          <p className="text-gray-600">Start a conversation with a character!</p>
        </div>
      )}
    </div>
  );
}