"use client";

import { useState } from "react";
import dynamic from "next/dynamic";
import { useTranslations } from "next-intl";
import { Map } from "lucide-react";
import { Navbar } from "@/components/layout/navbar";
import { InstallBanner } from "@/components/layout/install-banner";
import { ParticleBg } from "@/components/layout/particle-bg";
import { GlobeView } from "@/components/globe/globe-view";
import { StatsPanel } from "@/components/dashboard/stats-panel";
import { ActivityTimeline } from "@/components/dashboard/activity-timeline";
import { ClawFeed } from "@/components/dashboard/claw-feed";
import { RegionRanking } from "@/components/dashboard/region-ranking";
import { cn } from "@/lib/utils";

const ContinentMap = dynamic(
  () =>
    import("@/components/map/continent-map").then((m) => ({
      default: m.ContinentMap,
    })),
  { ssr: false }
);

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

export default function HomePage() {
  const [activeContinent, setActiveContinent] = useState<string>("asia");
  const tContinents = useTranslations("continents");
  const tRegion = useTranslations("regionExplorer");

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

      <main className="relative z-10 mx-auto max-w-[1800px] px-4 pt-20 pb-8">
        {/* Section 1: Globe + Dashboard */}
        <section className="min-h-[calc(100vh-5rem)]">
          <div className="mb-4">
            <InstallBanner />
          </div>
          <div className="grid gap-4 lg:grid-cols-[280px_1fr_280px]">
            {/* Left Panel */}
            <div className="flex flex-col gap-4">
              <StatsPanel />
              <RegionRanking />
            </div>

            {/* Center - Globe + Timeline */}
            <div className="flex flex-col gap-4">
              <div className="h-[500px] lg:h-[600px]">
                <GlobeView />
              </div>
              <ActivityTimeline />
            </div>

            {/* Right Panel */}
            <div className="flex flex-col gap-4">
              <ClawFeed />
            </div>
          </div>
        </section>

        {/* Section 2: Region Explorer */}
        <section className="mt-8">
          <div className="mb-4 flex items-center justify-between">
            <h2
              className="flex items-center gap-2 font-mono text-2xl font-bold"
              style={{
                color: "var(--accent-cyan)",
                textShadow: "var(--glow-cyan)",
              }}
            >
              <Map className="h-5 w-5" />
              {tRegion("title")}
            </h2>
          </div>

          {/* Continent Tabs */}
          <div className="mb-4 flex flex-wrap gap-2">
            {continentSlugs.map((slug) => (
              <button
                key={slug}
                onClick={() => setActiveContinent(slug)}
                className={cn(
                  "rounded-lg border px-4 py-2 text-sm font-medium transition-all",
                  activeContinent === slug
                    ? "border-[var(--accent-cyan)]/30 bg-[var(--accent-cyan)]/10 text-[var(--accent-cyan)]"
                    : "border-white/5 text-[var(--text-muted)] hover:border-white/10 hover:text-[var(--text-secondary)]"
                )}
              >
                {tContinents(slug)}
              </button>
            ))}
          </div>

          {/* Map — explicit height so MapLibre can render */}
          <ContinentMap
            key={activeContinent}
            slug={activeContinent}
            className="h-[calc(100vh-14rem)]"
          />
        </section>
      </main>
    </div>
  );
}