"use client";

import { Heart, MessageCircle, Share2, Filter } from "lucide-react";
import { useState } from "react";

function generateRoleplayCharacters() {
  const categories = ["Fantasy", "Sci-Fi", "Romance", "Mystery", "Adventure"];
  const baseCharacters = [
    { name: "Luna", avatar: "🌙", category: "Fantasy" },
    { name: "Alex", avatar: "⚡", category: "Sci-Fi" },
    { name: "Sage", avatar: "🧙", category: "Fantasy" },
    { name: "Nova", avatar: "✨", category: "Sci-Fi" },
    { name: "Echo", avatar: "🔮", category: "Mystery" },
    { name: "Storm", avatar: "⛈️", category: "Adventure" },
  ];

  return Array.from({ length: 12 }, (_, i) => {
    const char = baseCharacters[i % baseCharacters.length];
    return {
      id: i + 1,
      ...char,
      messages: Math.floor(Math.random() * 500) + 50,
      likes: Math.floor(Math.random() * 1000) + 100,
    };
  });
}

export default function RoleplayPage() {
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
  const characters = generateRoleplayCharacters();
  const categories = ["Fantasy", "Sci-Fi", "Romance", "Mystery", "Adventure"];

  const filtered = selectedCategory
    ? characters.filter((c) => c.category === selectedCategory)
    : characters;

  return (
    <div className="p-6 max-w-4xl mx-auto">
      {/* Header */}
      <div className="mb-8 space-y-4">
        <div>
          <h1 className="text-3xl font-bold mb-2">Roleplay</h1>
          <p className="text-gray-600">Immersive roleplay experiences</p>
        </div>

        {/* Category Filter */}
        <div className="flex items-center gap-3 overflow-x-auto pb-2">
          <button
            onClick={() => setSelectedCategory(null)}
            className={`px-4 py-2 rounded-full font-medium text-sm whitespace-nowrap transition ${
              selectedCategory === null
                ? "bg-black text-white"
                : "border-2 border-gray-200 hover:border-black"
            }`}
          >
            All
          </button>
          {categories.map((cat) => (
            <button
              key={cat}
              onClick={() => setSelectedCategory(cat)}
              className={`px-4 py-2 rounded-full font-medium text-sm whitespace-nowrap transition ${
                selectedCategory === cat
                  ? "bg-black text-white"
                  : "border-2 border-gray-200 hover:border-black"
              }`}
            >
              {cat}
            </button>
          ))}
        </div>
      </div>

      {/* Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {filtered.map((char) => (
          <div
            key={char.id}
            className="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition group cursor-pointer"
          >
            {/* Character Card */}
            <div className="h-48 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 flex items-center justify-center relative">
              <span className="text-6xl">{char.avatar}</span>
              <div className="absolute top-2 right-2 bg-white px-3 py-1 rounded-full text-xs font-semibold">
                {char.category}
              </div>
            </div>

            {/* Content */}
            <div className="p-4 space-y-4">
              <div>
                <h3 className="text-xl font-bold">{char.name}</h3>
                <p className="text-sm text-gray-600">{char.category} Character</p>
              </div>

              {/* Stats */}
              <div className="flex gap-4 text-sm text-gray-600 pb-4 border-b border-gray-200">
                <div className="flex items-center gap-1">
                  <MessageCircle className="w-4 h-4" />
                  <span>{char.messages}</span>
                </div>
                <div className="flex items-center gap-1">
                  <Heart className="w-4 h-4" />
                  <span>{char.likes}</span>
                </div>
              </div>

              {/* Actions */}
              <div className="flex gap-2">
                <button className="flex-1 bg-black text-white py-2 rounded-lg font-medium hover:bg-gray-800 transition text-sm">
                  Start Roleplay
                </button>
                <button className="p-2 hover:bg-gray-100 rounded-lg transition">
                  <Heart className="w-5 h-5" />
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {filtered.length === 0 && (
        <div className="text-center py-12">
          <p className="text-gray-600">No characters found in this category</p>
        </div>
      )}
    </div>
  );
}