"use client";

import { use } from "react";
import { useTranslations } from "next-intl";
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 { ClawFeed } from "@/components/dashboard/claw-feed";

const continentSlugs = ["asia", "europe", "americas", "africa", "oceania"] as const;

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

export default function ContinentPage({ params }: PageProps) {
  const { slug } = use(params);
  const t = useTranslations("continents");
  const tPage = useTranslations("continentPage");

  const name = continentSlugs.includes(slug as (typeof continentSlugs)[number])
    ? t(slug as (typeof continentSlugs)[number])
    : "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)",
            }}
          >
            {tPage("regionTitle", { name })}
          </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 />
            <ClawFeed />
          </div>
        </div>
      </main>
    </div>
  );
}