import React, { useEffect, useState, useMemo } from "react";

// ⚡ REDUXHUB V5 FULL PLATFORM (NO SERVER)
// Black/White Neon UI + iOS 26 style buttons + marketplace system + favorites + profile

const DEFAULT_MODS = [
  {
    id: 1,
    title: "ReduxHub FPS Boost",
    description: "Max FPS optimization + performance tuning pack",
    category: "FPS",
    featured: true,
  },
  {
    id: 2,
    title: "Neon Graphics Ultra Pack",
    description: "Enhanced lighting, reflections and visual effects",
    category: "Graphics",
    featured: true,
  },
  {
    id: 3,
    title: "Pro UI Overhaul",
    description: "Modern interface redesign with smooth animations",
    category: "UI",
    featured: false,
  },
  {
    id: 4,
    title: "Competitive Input Fix",
    description: "Reduces input delay for competitive gameplay",
    category: "Performance",
    featured: false,
  },
];

export default function ReduxHub() {
  const [mods, setMods] = useState([]);
  const [view, setView] = useState("market"); // market | create | profile | details
  const [selectedMod, setSelectedMod] = useState(null);

  const [category, setCategory] = useState("All");
  const [search, setSearch] = useState("");

  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [newCategory, setNewCategory] = useState("");

  const [user, setUser] = useState(() => {
    return localStorage.getItem("reduxhub_user") || "Guest";
  });

  const [favorites, setFavorites] = useState(() => {
    return JSON.parse(localStorage.getItem("reduxhub_favs") || "[]");
  });

  useEffect(() => {
    const stored = localStorage.getItem("reduxhub_mods_v5");
    if (stored) setMods(JSON.parse(stored));
    else {
      setMods(DEFAULT_MODS);
      localStorage.setItem("reduxhub_mods_v5", JSON.stringify(DEFAULT_MODS));
    }
  }, []);

  const saveMods = (data) => {
    setMods(data);
    localStorage.setItem("reduxhub_mods_v5", JSON.stringify(data));
  };

  const toggleFav = (id) => {
    let updated;
    if (favorites.includes(id)) {
      updated = favorites.filter((f) => f !== id);
    } else {
      updated = [...favorites, id];
    }
    setFavorites(updated);
    localStorage.setItem("reduxhub_favs", JSON.stringify(updated));
  };

  const addMod = () => {
    if (!title || !description || !newCategory) return;

    const newMod = {
      id: Date.now(),
      title,
      description,
      category: newCategory,
      featured: false,
    };

    saveMods([newMod, ...mods]);
    setTitle("");
    setDescription("");
    setNewCategory("");
    setView("market");
  };

  const categories = useMemo(() => {
    return ["All", ...new Set(mods.map((m) => m.category))];
  }, [mods]);

  const filtered = useMemo(() => {
    return mods.filter(
      (m) =>
        (category === "All" || m.category === category) &&
        m.title.toLowerCase().includes(search.toLowerCase())
    );
  }, [mods, category, search]);

  const featured = mods.filter((m) => m.featured);

  const openMod = (mod) => {
    setSelectedMod(mod);
    setView("details");
  };

  return (
    <div className="min-h-screen bg-black text-white">

      {/* GLOBAL STYLE — BLACK / WHITE NEON iOS26 */}
      <style>{`
        body { margin:0; font-family: Inter, sans-serif; background:#000; }

        .glass {
          background: rgba(255,255,255,0.06);
          backdrop-filter: blur(18px);
          border: 1px solid rgba(255,255,255,0.12);
          border-radius: 18px;
        }

        .glassStrong {
          background: rgba(255,255,255,0.08);
          backdrop-filter: blur(25px);
          border: 1px solid rgba(255,255,255,0.18);
          border-radius: 22px;
        }

        .neon {
          color: #fff;
          text-shadow: 0 0 10px rgba(255,255,255,0.35), 0 0 25px rgba(0,255,255,0.15);
        }

        .card {
          transition: .25s ease;
        }
        .card:hover {
          transform: translateY(-6px);
          box-shadow: 0 15px 40px rgba(255,255,255,0.08);
        }

        /* iOS 26 style button */
        .iosbtn {
          background: rgba(255,255,255,0.08);
          border: 1px solid rgba(255,255,255,0.18);
          border-radius: 14px;
          padding: 10px 14px;
          transition: .2s;
          backdrop-filter: blur(12px);
        }

        .iosbtn:hover {
          transform: scale(1.03);
          background: rgba(255,255,255,0.12);
        }

        .iosactive {
          background: white;
          color: black;
          font-weight: 700;
        }

        .topbar {
          display:flex;
          justify-content:space-between;
          padding:16px;
          border-bottom:1px solid rgba(255,255,255,0.08);
        }
      `}</style>

      {/* TOP BAR */}
      <div className="topbar">
        <div className="neon text-xl">ReduxHub V5</div>
        <div className="flex gap-2 items-center">
          <span className="text-sm text-gray-300">User: {user}</span>
          <button className="iosbtn" onClick={() => setView("profile")}>Profile</button>
        </div>
      </div>

      <div className="flex">

        {/* SIDEBAR */}
        <aside className="w-64 p-4 border-r border-white/10 min-h-screen">
          <div className="flex flex-col gap-2">

            <button className={`iosbtn ${view === "market" ? "iosactive" : ""}`} onClick={() => setView("market")}>Marketplace</button>

            <button className={`iosbtn ${view === "create" ? "iosactive" : ""}`} onClick={() => setView("create")}>Create</button>

            <button className="iosbtn" onClick={() => setFavorites([])}>Clear Fav</button>
          </div>

          <div className="mt-6 text-xs text-gray-400">
            ⚡ V5 FULL PLATFORM • NO SERVER
          </div>
        </aside>

        {/* MAIN */}
        <main className="flex-1 p-6">

          {/* MARKET */}
          {view === "market" && (
            <>

              <div className="flex justify-between mb-4">
                <input
                  className="glass px-3 py-2 w-72"
                  placeholder="Search mods..."
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                />
              </div>

              {/* FEATURED */}
              <h2 className="neon mb-2">Featured</h2>
              <div className="grid md:grid-cols-2 gap-4 mb-6">
                {featured.map((m) => (
                  <div key={m.id} className="glassStrong p-4 card">
                    <div className="neon text-lg">{m.title}</div>
                    <div className="text-gray-400 text-sm">{m.description}</div>
                  </div>
                ))}
              </div>

              {/* FILTER */}
              <div className="flex gap-2 mb-4 flex-wrap">
                {categories.map((c) => (
                  <button
                    key={c}
                    className={`iosbtn ${category === c ? "iosactive" : ""}`}
                    onClick={() => setCategory(c)}
                  >
                    {c}
                  </button>
                ))}
              </div>

              {/* LIST */}
              <div className="grid md:grid-cols-2 gap-4">
                {filtered.map((m) => (
                  <div key={m.id} className="glass p-4 card">
                    <div className="flex justify-between">
                      <div onClick={() => openMod(m)} className="cursor-pointer">
                        <div className="neon">{m.title}</div>
                        <div className="text-sm text-gray-400">{m.description}</div>
                      </div>

                      <button className="iosbtn" onClick={() => toggleFav(m.id)}>
                        {favorites.includes(m.id) ? "★" : "☆"}
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}

          {/* CREATE */}
          {view === "create" && (
            <div className="glassStrong p-6 max-w-xl">
              <h2 className="neon mb-4">Create Mod</h2>

              <input className="glass p-3 w-full mb-2" placeholder="Title" value={title} onChange={(e)=>setTitle(e.target.value)} />
              <input className="glass p-3 w-full mb-2" placeholder="Description" value={description} onChange={(e)=>setDescription(e.target.value)} />
              <input className="glass p-3 w-full mb-2" placeholder="Category" value={newCategory} onChange={(e)=>setNewCategory(e.target.value)} />

              <button className="iosbtn w-full" onClick={addMod}>Publish</button>
            </div>
          )}

          {/* DETAILS */}
          {view === "details" && selectedMod && (
            <div className="glassStrong p-6">
              <h2 className="neon text-2xl">{selectedMod.title}</h2>
              <p className="text-gray-400 mt-2">{selectedMod.description}</p>
              <div className="mt-4 text-sm">Category: {selectedMod.category}</div>

              <button className="iosbtn mt-4" onClick={() => setView("market")}>Back</button>
            </div>
          )}

          {/* PROFILE */}
          {view === "profile" && (
            <div className="glassStrong p-6">
              <h2 className="neon">Profile</h2>
              <p className="text-gray-400 mt-2">Username: {user}</p>
              <p className="text-gray-500 text-sm mt-2">Favorites: {favorites.length}</p>
            </div>
          )}

        </main>
      </div>
    </div>
  );
}