"use client";

import { use } from "react";
import { Navbar } from "@/components/layout/navbar";
import { ParticleBg } from "@/components/layout/particle-bg";
import { ViewSwitcher } from "@/components/layout/view-switcher";
import { ContinentMap } from "@/components/map/continent-map";
import { StatsPanel } from "@/components/dashboard/stats-panel";
import { LobsterFeed } from "@/components/dashboard/lobster-feed";

const continentNames: Record<string, string> = {
  asia: "Asia",
  europe: "Europe",
  americas: "Americas",
  africa: "Africa",
  oceania: "Oceania",
};

interface PageProps {
  params: Promise<{ slug: string }>;
}

export default function ContinentPage({ params }: PageProps) {
  const { slug } = use(params);
  const name = continentNames[slug] ?? "Unknown";

  return (
    <div className="relative min-h-screen">
      <ParticleBg />
      <Navbar activeView="map" />

      <main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
        <div className="mb-4 flex items-center justify-between">
          <h1
            className="font-mono text-2xl font-bold"
            style={{
              color: "var(--accent-cyan)",
              textShadow: "var(--glow-cyan)",
            }}
          >
            {name} Region
          </h1>
          <ViewSwitcher activeContinent={slug} />
        </div>

        <div className="grid gap-4 lg:grid-cols-[1fr_300px]">
          {/* Map */}
          <div>
            <ContinentMap slug={slug} />
          </div>

          {/* Side Panel */}
          <div className="flex flex-col gap-4">
            <StatsPanel />
            <LobsterFeed />
          </div>
        </div>
      </main>
    </div>
  );
}