"use client";

import * as React from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import type { Group } from "three";
import { cn } from "@/lib/utils";

export interface Marker {
  lat: number;
  lon: number;
  label?: string;
  color?: string;
}

const DEFAULT_MARKERS: Marker[] = [
  { lat: 30.0, lon: 31.2, label: "Cairo" },
  { lat: 25.2, lon: 55.3, label: "Dubai" },
  { lat: 51.5, lon: -0.12, label: "London" },
  { lat: 40.7, lon: -74.0, label: "New York" },
  { lat: 35.7, lon: 139.7, label: "Tokyo" },
];

function toVector(lat: number, lon: number, radius: number) {
  const phi = (90 - lat) * (Math.PI / 180);
  const theta = (lon + 180) * (Math.PI / 180);
  return [
    -radius * Math.sin(phi) * Math.cos(theta),
    radius * Math.cos(phi),
    radius * Math.sin(phi) * Math.sin(theta),
  ] as [number, number, number];
}

function Globe({ markers, color }: { markers: Marker[]; color: string }) {
  const group = React.useRef<Group>(null);

  useFrame((_, delta) => {
    if (group.current) group.current.rotation.y += delta * 0.12;
  });

  return (
    <group ref={group}>
      <mesh>
        <sphereGeometry args={[1.6, 40, 24]} />
        <meshBasicMaterial color={color} wireframe transparent opacity={0.28} />
      </mesh>

      <mesh>
        <sphereGeometry args={[1.58, 48, 32]} />
        <meshStandardMaterial color="#0b1220" roughness={0.9} />
      </mesh>

      {markers.map((marker, index) => (
        <mesh key={index} position={toVector(marker.lat, marker.lon, 1.63)}>
          <sphereGeometry args={[0.045, 12, 12]} />
          <meshBasicMaterial color={marker.color ?? "#f472b6"} />
        </mesh>
      ))}
    </group>
  );
}

export function WireframeGlobe3D({
  markers = DEFAULT_MARKERS,
  color = "#38bdf8",
  height = 380,
  className,
}: {
  markers?: Marker[];
  color?: string;
  height?: number;
  className?: string;
}) {
  return (
    <div
      className={cn("relative w-full overflow-hidden rounded-2xl border bg-black", className)}
      style={{ height }}
    >
      <Canvas camera={{ position: [0, 0, 4.4], fov: 45 }} dpr={[1, 2]}>
        <ambientLight intensity={0.7} />
        <pointLight position={[4, 3, 4]} intensity={22} color={color} />
        <Globe markers={markers} color={color} />
        <OrbitControls enableZoom={false} enablePan={false} />
      </Canvas>

      <div className="pointer-events-none absolute bottom-4 start-4 flex flex-wrap gap-1.5">
        {markers.slice(0, 5).map((marker) => (
          <span
            key={marker.label}
            className="rounded-full border border-white/15 bg-white/5 px-2 py-0.5 text-[11px] text-white/70 backdrop-blur"
          >
            {marker.label}
          </span>
        ))}
      </div>
    </div>
  );
}

Related components