"use client";

import { useState, useMemo } from "react";
import {
  ComposableMap,
  Geographies,
  Geography,
  ZoomableGroup,
} from "react-simple-maps";
import { useHeatmapData, type HeatmapPoint } from "@/hooks/use-heatmap-data";
import { HeatmapLayer } from "./heatmap-layer";
import { geoMercator } from "d3-geo";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

const GEO_URL = "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";

interface ContinentConfig {
  center: [number, number];
  zoom: number;
  label: string;
}

const continentConfigs: Record<string, ContinentConfig> = {
  asia: { center: [100, 35], zoom: 2.5, label: "Asia" },
  europe: { center: [15, 52], zoom: 4, label: "Europe" },
  americas: { center: [-80, 15], zoom: 1.8, label: "Americas" },
  africa: { center: [20, 5], zoom: 2.2, label: "Africa" },
  oceania: { center: [145, -25], zoom: 3, label: "Oceania" },
};

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

interface ContinentMapProps {
  slug: string;
}

export function ContinentMap({ slug }: ContinentMapProps) {
  const config = continentConfigs[slug] ?? continentConfigs.asia;
  const regionFilter = continentRegionMap[slug];
  const { points } = useHeatmapData(30000);
  const [selectedPoint, setSelectedPoint] = useState<HeatmapPoint | null>(null);

  const filteredPoints = useMemo(
    () => (regionFilter ? points.filter(() => true) : points),
    [points, regionFilter]
  );

  const projection = useMemo(
    () =>
      geoMercator()
        .center(config.center)
        .scale(150 * config.zoom)
        .translate([400, 300]),
    [config]
  );

  const projectionFn = (coords: [number, number]): [number, number] | null => {
    const result = projection(coords);
    return result ?? null;
  };

  return (
    <div className="relative">
      <div className="overflow-hidden rounded-xl border border-white/5 bg-[var(--bg-secondary)]">
        <ComposableMap
          projection="geoMercator"
          projectionConfig={{
            center: config.center,
            scale: 150 * config.zoom,
          }}
          width={800}
          height={600}
          style={{ width: "100%", height: "auto" }}
        >
          <ZoomableGroup center={config.center} zoom={1}>
            <Geographies geography={GEO_URL}>
              {({ geographies }) =>
                geographies.map((geo) => (
                  <Geography
                    key={geo.rsmKey}
                    geography={geo}
                    fill="#1a1f2e"
                    stroke="#2a3040"
                    strokeWidth={0.5}
                    style={{
                      default: { outline: "none" },
                      hover: { fill: "#242a3d", outline: "none" },
                      pressed: { outline: "none" },
                    }}
                  />
                ))
              }
            </Geographies>
            <HeatmapLayer
              points={filteredPoints}
              projection={projectionFn}
              onPointClick={setSelectedPoint}
            />
          </ZoomableGroup>
        </ComposableMap>
      </div>

      {selectedPoint && (
        <Card className="absolute bottom-4 left-4 z-10 w-64 border-[var(--accent-cyan)]/20">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="font-mono text-sm font-medium text-[var(--accent-cyan)]">
                  {selectedPoint.city}
                </p>
                <p className="text-xs text-[var(--text-muted)]">{selectedPoint.country}</p>
              </div>
              <button
                onClick={() => setSelectedPoint(null)}
                className="text-xs text-[var(--text-muted)] hover:text-[var(--text-primary)]"
              >
                ✕
              </button>
            </div>
            <div className="mt-2 flex gap-2">
              <Badge variant="online">{selectedPoint.lobsterCount} lobsters</Badge>
              <Badge variant="secondary">weight: {selectedPoint.weight.toFixed(1)}</Badge>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}