/*
README — Roblox Map Website

This single-file React component provides:
1) A design & structure brief (wireframes, page list, features)
2) A ready-to-run React single-file template (App + Router + components)
   - Uses Tailwind CSS classes (assumes Tailwind is available in project)
   - Mock data included; replace with API calls or headless CMS
3) WordPress guidance section (theme/plugin suggestions, PHP starter snippets)

How to use the React template
- Create a React project (e.g. `create-react-app` or `vite` + React)
- Install React Router v6 and Tailwind CSS (or adapt classes to your CSS)
- Drop this file as `src/App.jsx`, import into `src/main.jsx`
- Replace mock data with calls to your backend or Roblox API

WordPress guidance
- Suggested theme: Astra / Kadence / GeneratePress (lightweight)
- Directory/Listing plugins: HivePress, Directorist, GeoDirectory (for listing maps)
- Useful plugins: Advanced Custom Fields (ACF), WP All Import (for bulk), RankMath/Yoast SEO, WP Rocket or LiteSpeed Cache
- Basic page templates: provide `archive-map.php` and `single-map.php` and a custom post type `map` (register in functions.php)

PHP snippet to register CPT (add to functions.php):
/*
add_action('init', function(){
  register_post_type('map', [
    'labels' => ['name' => 'Maps', 'singular_name'=>'Map'],
    'public' => true,
    'has_archive' => true,
    'supports' => ['title','editor','thumbnail','comments','custom-fields'],
    'rewrite' => ['slug' => 'maps'],
  ]);
});
*/

Basic single-map.php structure (WordPress template)
/*
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <h1><?php the_title(); ?></h1>
  <div class="map-meta"><?php the_excerpt(); ?></div>
  <div class="map-content"><?php the_content(); ?></div>
  <!-- show custom fields: roblox_link, category, difficulty -->
<?php endwhile; endif; ?>
<?php get_footer(); ?>
*/

----------------------------------------------------------------
END README
----------------------------------------------------------------
*/

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams, useNavigate } from 'react-router-dom';

// MOCK DATA — replace with API
const MAPS = [
  { id: '1', title: 'Skyblock Adventure', category: 'Adventure', players: 4231, rating: 4.7, creator: 'SkyDev', thumbnail: '', description: 'Explore floating islands and build your legacy. Tips: collect emeralds at spawn.' },
  { id: '2', title: 'Haunted Obby', category: 'Obby', players: 1287, rating: 4.2, creator: 'SpookyWorks', thumbnail: '', description: 'Dodge traps and solve puzzles in this horror obby.' },
  { id: '3', title: 'Tycoon Masters', category: 'Tycoon', players: 3210, rating: 4.5, creator: 'TycoonCo', thumbnail: '', description: 'Build your empire. Pro tip: focus on upgrades first.' },
];

// Small utility for categories
const CATEGORIES = ['All','Adventure','Obby','Tycoon','Simulator','Roleplay','Horror'];

function Header(){
  return (
    <header className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white p-4 shadow-md">
      <div className="container mx-auto flex items-center justify-between">
        <Link to="/" className="text-2xl font-bold">RobloxMap.ID</Link>
        <nav className="flex gap-4 items-center">
          <Link to="/maps" className="hover:underline">Maps</Link>
          <Link to="/submit" className="bg-white text-indigo-600 px-3 py-1 rounded">Submit Map</Link>
        </nav>
      </div>
    </header>
  );
}

function Footer(){
  return (
    <footer className="bg-gray-100 text-gray-700 p-6 mt-12">
      <div className="container mx-auto text-center">
        <p className="text-sm">© {new Date().getFullYear()} RobloxMap.ID — Community driven map directory</p>
      </div>
    </footer>
  );
}

function Home(){
  return (
    <main className="container mx-auto p-6">
      <section className="bg-white rounded-xl p-6 shadow-sm">
        <h1 className="text-3xl font-semibold mb-2">Temukan Map Roblox Terbaik</h1>
        <p className="text-gray-600 mb-4">Katalog map, panduan, dan tips untuk pemain Roblox. Cari map berdasarkan kategori atau rating.</p>
        <div className="grid md:grid-cols-3 gap-4">
          <div className="col-span-2">
            <SearchAndPreview />
          </div>
          <aside className="bg-indigo-50 p-4 rounded">
            <h3 className="font-semibold mb-2">Kategori Populer</h3>
            <ul className="flex flex-wrap gap-2">
              {CATEGORIES.slice(1,6).map(c => (
                <Link key={c} to={`/maps?cat=${c}`} className="px-2 py-1 bg-white rounded shadow-sm text-sm">{c}</Link>
              ))}
            </ul>
            <div className="mt-4">
              <h4 className="font-semibold">Submit Map</h4>
              <p className="text-sm text-gray-600">Punya map? Submit dan dapatkan exposure.</p>
              <Link to="/submit" className="inline-block mt-2 bg-indigo-600 text-white px-3 py-1 rounded">Kirim Sekarang</Link>
            </div>
          </aside>
        </div>
      </section>

      <section className="mt-6">
        <h2 className="text-xl font-semibold mb-3">Map Terbaru</h2>
        <div className="grid md:grid-cols-3 gap-4">
          {MAPS.map(m => <MapCard key={m.id} map={m} />)}
        </div>
      </section>

    </main>
  );
}

function SearchAndPreview(){
  const navigate = useNavigate();
  const [q,setQ] = React.useState('');
  const [cat,setCat] = React.useState('All');
  const handleSearch = (e)=>{ e.preventDefault(); navigate(`/maps?q=${encodeURIComponent(q)}&cat=${encodeURIComponent(cat)}`); };
  return (
    <form onSubmit={handleSearch} className="bg-gray-50 p-4 rounded">
      <div className="flex gap-2">
        <input value={q} onChange={e=>setQ(e.target.value)} placeholder="Cari nama map atau keyword" className="flex-1 p-2 rounded border" />
        <select value={cat} onChange={e=>setCat(e.target.value)} className="p-2 rounded border">
          {CATEGORIES.map(c=> <option key={c} value={c}>{c}</option>)}
        </select>
        <button className="bg-indigo-600 text-white px-3 rounded">Cari</button>
      </div>
      <div className="mt-3 text-sm text-gray-600">Preview: hasil akan menampilkan thumbnail, rating, dan link ke game.</div>
    </form>
  );
}

function MapCard({map}){
  return (
    <article className="bg-white p-4 rounded shadow-sm flex gap-4 items-center">
      <div className="w-28 h-20 bg-gray-200 rounded flex items-center justify-center">Thumb</div>
      <div className="flex-1">
        <Link to={`/maps/${map.id}`} className="font-semibold text-indigo-700 text-lg">{map.title}</Link>
        <div className="text-sm text-gray-600">{map.category} • {map.creator}</div>
        <div className="mt-2 flex items-center gap-2 text-sm">
          <div className="font-bold">{map.rating}</div>
          <div className="text-gray-500">• {map.players} players</div>
        </div>
      </div>
      <div>
        <a href={`https://www.roblox.com/games/${map.id}`} target="_blank" rel="noreferrer" className="inline-block bg-green-500 text-white px-3 py-1 rounded">Play</a>
      </div>
    </article>
  );
}

function MapList(){
  // parse query params (simple)
  const query = new URLSearchParams(window.location.search);
  const q = (query.get('q')||'').toLowerCase();
  const cat = query.get('cat')||'All';
  const filtered = MAPS.filter(m=> (cat==='All' || m.category===cat) && (m.title.toLowerCase().includes(q) || m.description.toLowerCase().includes(q)));

  return (
    <main className="container mx-auto p-6">
      <h1 className="text-2xl font-semibold mb-4">Daftar Map</h1>
      <div className="grid md:grid-cols-3 gap-4">
        <aside className="p-4 bg-white rounded shadow-sm">
          <h4 className="font-semibold">Filter</h4>
          <ul className="mt-2 space-y-2">
            {CATEGORIES.map(c=> <li key={c}><Link to={`/?cat=${c}`} className="text-indigo-600">{c}</Link></li>)}
          </ul>
        </aside>
        <section className="md:col-span-2">
          {filtered.length===0 ? (
            <div className="bg-yellow-50 p-4 rounded">Tidak menemukan map. Coba kata kunci lain.</div>
          ) : (
            <div className="space-y-3">{filtered.map(m => <MapCard key={m.id} map={m} />)}</div>
          )}
        </section>
      </div>
    </main>
  );
}

function MapDetail(){
  const { id } = useParams();
  const map = MAPS.find(m=> m.id===id);
  if(!map) return (
    <main className="container mx-auto p-6">
      <div className="bg-red-50 p-4 rounded">Map tidak ditemukan.</div>
    </main>
  );

  return (
    <main className="container mx-auto p-6">
      <div className="bg-white rounded p-6 shadow-sm">
        <div className="flex gap-6">
          <div className="w-1/3 bg-gray-200 rounded h-48 flex items-center justify-center">Thumbnail</div>
          <div className="flex-1">
            <h1 className="text-2xl font-semibold">{map.title}</h1>
            <div className="text-sm text-gray-600">{map.category} • by {map.creator}</div>
            <div className="mt-4">{map.description}</div>
            <div className="mt-4 flex gap-3 items-center">
              <div className="px-3 py-2 bg-indigo-600 text-white rounded">Rating: {map.rating}</div>
              <a href={`https://www.roblox.com/games/${map.id}`} target="_blank" rel="noreferrer" className="px-3 py-2 bg-green-500 text-white rounded">Play on Roblox</a>
            </div>
          </div>
        </div>

        <section className="mt-6">
          <h3 className="font-semibold mb-2">Panduan & Tips</h3>
          <ol className="list-decimal list-inside text-gray-700">
            <li>Pelajari spawn area dan kumpulkan resources.</li>
            <li>Perhatikan NPC yang memberi quest.</li>
            <li>Cari portal rahasia di area timur untuk bonus XP.</li>
          </ol>
        </section>

        <section className="mt-6">
          <h3 className="font-semibold mb-2">Komentar Pemain</h3>
          <div className="bg-gray-50 p-3 rounded">Belum ada komentar — jadilah yang pertama!</div>
        </section>

      </div>
    </main>
  );
}

function SubmitMap(){
  return (
    <main className="container mx-auto p-6">
      <div className="bg-white rounded p-6 shadow-sm">
        <h1 className="text-2xl font-semibold mb-3">Submit Map</h1>
        <p className="text-gray-600 mb-4">Isi form untuk menambahkan map ke katalog. Admin akan verifikasi.</p>
        <form className="space-y-3">
          <input placeholder="Judul map" className="w-full p-2 border rounded" />
          <input placeholder="Roblox Game ID (angka)" className="w-full p-2 border rounded" />
          <select className="w-full p-2 border rounded">
            {CATEGORIES.slice(1).map(c=> <option key={c}>{c}</option>)}
          </select>
          <textarea placeholder="Deskripsi singkat & tips" className="w-full p-2 border rounded" rows={4}></textarea>
          <div className="flex gap-2">
            <button className="bg-indigo-600 text-white px-3 py-1 rounded">Kirim</button>
            <Link to="/" className="px-3 py-1 border rounded">Batal</Link>
          </div>
        </form>
      </div>
    </main>
  );
}

function AdminDashboard(){
  return (
    <main className="container mx-auto p-6">
      <h1 className="text-2xl font-semibold mb-4">Admin Dashboard</h1>
      <div className="grid md:grid-cols-3 gap-4">
        <div className="bg-white p-4 rounded shadow-sm">Pending submissions: 0</div>
        <div className="bg-white p-4 rounded shadow-sm">Total maps: {MAPS.length}</div>
        <div className="bg-white p-4 rounded shadow-sm">Active users: 123</div>
      </div>
    </main>
  );
}

export default function App(){
  return (
    <Router>
      <div className="min-h-screen flex flex-col">
        <Header />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/maps" element={<MapList />} />
          <Route path="/maps/:id" element={<MapDetail />} />
          <Route path="/submit" element={<SubmitMap />} />
          <Route path="/admin" element={<AdminDashboard />} />
          <Route path="*" element={<main className="container mx-auto p-6">Page not found. <Link to="/">Back home</Link></main>} />
        </Routes>
        <Footer />
      </div>
    </Router>
  );
}