// SpaceForum.jsx
import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ArrowUp, ArrowDown } from "lucide-react";

const initialPosts = [
  {
    id: 1,
    title: "Your favorite sci-fi universe?",
    body: "Let's discuss our favorite sci-fi settings and why!",
    votes: 12,
    comments: ["Mass Effect has the best lore.", "I love Star Wars for the variety of planets!"],
    user: "astroFan01"
  },
  {
    id: 2,
    title: "What would your space station look like?",
    body: "Design your dream sci-fi outpost.",
    votes: 7,
    comments: ["Lots of greenery and curved windows!", "A cyberpunk aesthetic for sure."],
    user: "nebulaQueen"
  },
];

const nsfwWords = ["fuck", "shit", "bitch", "asshole", "dick", "pussy", "cock", "cum", "rape", "porn", "nsfw"];

function isNSFW(text) {
  const lowerText = text.toLowerCase();
  return nsfwWords.some(word => lowerText.includes(word));
}

export default function SpaceForum() {
  const [posts, setPosts] = useState(initialPosts);
  const [newPost, setNewPost] = useState({ title: "", body: "" });
  const [user, setUser] = useState("guest");
  const [customTheme, setCustomTheme] = useState("cyan");

  const handleVote = (id, delta) => {
    setPosts((prev) =>
      prev.map((post) =>
        post.id === id ? { ...post, votes: post.votes + delta } : post
      )
    );
  };

  const handlePost = () => {
    if (!newPost.title || !newPost.body) return;
    if (isNSFW(newPost.title) || isNSFW(newPost.body)) {
      alert("Your post contains inappropriate language and cannot be submitted.");
      return;
    }
    const newEntry = {
      id: posts.length + 1,
      title: newPost.title,
      body: newPost.body,
      votes: 0,
      comments: [],
      user: user
    };
    setPosts([newEntry, ...posts]);
    setNewPost({ title: "", body: "" });
  };

  const handleLogin = () => {
    const input = prompt("Enter your username:");
    if (input) setUser(input);
  };

  return (
    <div className={`min-h-screen bg-gradient-to-br from-gray-900 to-black text-white p-6 space-y-8 font-sans theme-${customTheme}`}>
      <h1 className="text-4xl font-bold text-center text-cyan-400 glow">🪐 Cosmic Forum</h1>

      <div className="flex justify-between items-center">
        <div className="text-sm text-gray-300">Signed in as: <span className="font-bold">{user}</span></div>
        <div className="space-x-2">
          <Button onClick={handleLogin} className="bg-gray-700 hover:bg-gray-600">Sign In</Button>
          <select
            className="bg-black text-white border border-cyan-400 p-1 rounded"
            value={customTheme}
            onChange={(e) => setCustomTheme(e.target.value)}
          >
            <option value="cyan">Cyan</option>
            <option value="purple">Purple</option>
            <option value="green">Green</option>
          </select>
        </div>
      </div>

      <div className="bg-gradient-to-br from-indigo-900 to-gray-800 p-4 rounded-xl shadow-xl space-y-2 border border-cyan-500">
        <input
          className="w-full p-2 rounded bg-black text-white border border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-400"
          placeholder="Post title"
          value={newPost.title}
          onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
        />
        <textarea
          className="w-full p-2 rounded bg-black text-white border border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-400"
          placeholder="Share your sci-fi thoughts..."
          value={newPost.body}
          onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
        />
        <Button onClick={handlePost} className="bg-cyan-600 hover:bg-cyan-500 transition">
          Launch Post 🚀
        </Button>
      </div>

      {posts.map((post) => (
        <Card key={post.id} className="bg-black text-white border border-cyan-700 rounded-xl">
          <CardContent className="p-4 space-y-2">
            <div className="flex justify-between items-center">
              <h2 className="text-2xl font-semibold text-cyan-300">{post.title}</h2>
              <div className="flex items-center space-x-2">
                <Button variant="ghost" onClick={() => handleVote(post.id, 1)}>
                  <ArrowUp className="text-green-400" />
                </Button>
                <span>{post.votes}</span>
                <Button variant="ghost" onClick={() => handleVote(post.id, -1)}>
                  <ArrowDown className="text-red-400" />
                </Button>
              </div>
            </div>
            <p className="text-gray-300">{post.body}</p>
            <div className="text-sm text-gray-500">
              Posted by <strong>{post.user}</strong> • {post.comments.length} comment{post.comments.length !== 1 && "s"}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}