"use client";

import { useState } from "react";
import dynamic from "next/dynamic";
import { useTranslations } from "next-intl";
import { Globe, 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 { Hero } from "@/components/layout/hero";
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 { TokenLeaderboard } from "@/components/dashboard/token-leaderboard";
import { cn } from "@/lib/utils";

const WorldMap = dynamic(
  () =>
    import("@/components/map/world-map").then((m) => ({
      default: m.WorldMap,
    })),
  {
    ssr: false,
    loading: () => (
      <div className="flex h-full items-center justify-center">
        <div className="flex flex-col items-center gap-3">
          <div className="h-8 w-8 animate-spin rounded-full border-2 border-[var(--accent-cyan)] border-t-transparent" />
          <span className="font-mono text-xs text-[var(--text-muted)]">Loading map...</span>
        </div>
      </div>
    ),
  }
);

type ViewMode = "2d" | "3d";

export default function HomePage() {
  const [viewMode, setViewMode] = useState<ViewMode>("2d");
  const tNavbar = useTranslations("navbar");

  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">
        {/* Hero Section */}
        <Hero />

        {/* Section 1: Main Map View + 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 />
              <TokenLeaderboard />
            </div>

            {/* Center - Map/Globe + Timeline */}
            <div className="flex flex-col gap-4">
              {/* View Switcher + Map Container */}
              <div className="relative h-[500px] lg:h-[600px]">
                {/* View Mode Toggle */}
                <div className="absolute left-4 top-4 z-20 flex rounded-lg border border-white/10 bg-[var(--bg-card)]/90 p-1 backdrop-blur-sm">
                  <button
                    onClick={() => setViewMode("2d")}
                    className={cn(
                      "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
                      viewMode === "2d"
                        ? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
                        : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
                    )}
                  >
                    <Map className="h-3.5 w-3.5" />
                    {tNavbar("map")}
                  </button>
                  <button
                    onClick={() => setViewMode("3d")}
                    className={cn(
                      "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-all",
                      viewMode === "3d"
                        ? "bg-[var(--accent-cyan)]/20 text-[var(--accent-cyan)]"
                        : "text-[var(--text-muted)] hover:text-[var(--text-secondary)]"
                    )}
                  >
                    <Globe className="h-3.5 w-3.5" />
                    {tNavbar("globe")}
                  </button>
                </div>

                {/* Map View */}
                {viewMode === "2d" && (
                  <WorldMap className="h-full w-full" />
                )}

                {/* Globe View */}
                {viewMode === "3d" && (
                  <GlobeView />
                )}
              </div>

              <ActivityTimeline />
            </div>

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