"use client";

import { MapPin, Maximize2 } from "lucide-react";
import type { SearchResult } from "@/data/mock-results";

interface MapPlaceholderProps {
  results: SearchResult[];
  accent?: "emerald" | "amber";
}

export default function MapPlaceholder({
  results,
  accent = "emerald",
}: MapPlaceholderProps) {
  const accentColor = accent === "amber" ? "bg-amber-500" : "bg-emerald-500";
  const accentGlow =
    accent === "amber" ? "shadow-amber-500/40" : "shadow-emerald-500/40";

  return (
    <div className="relative h-[280px] overflow-hidden rounded-2xl border border-white/10 bg-[#0a0f1a] lg:sticky lg:top-36 lg:h-[calc(100vh-12rem)]">
      <div className="absolute inset-0 grid-pattern opacity-40" />
      <div
        className={`absolute inset-0 bg-gradient-to-br ${
          accent === "amber"
            ? "from-amber-500/10 via-transparent to-orange-500/5"
            : "from-emerald-500/10 via-transparent to-cyan-500/5"
        }`}
      />

      {/* Mock map pins */}
      {results.slice(0, 5).map((r, i) => {
        const positions = [
          { top: "25%", left: "30%" },
          { top: "45%", left: "65%" },
          { top: "60%", left: "25%" },
          { top: "35%", left: "50%" },
          { top: "70%", left: "70%" },
        ];
        const pos = positions[i];
        return (
          <div
            key={r.id}
            className="absolute -translate-x-1/2 -translate-y-1/2"
            style={{ top: pos.top, left: pos.left }}
          >
            <div
              className={`flex h-8 w-8 items-center justify-center rounded-full ${accentColor} text-xs font-bold text-white shadow-lg ${accentGlow}`}
            >
              {i + 1}
            </div>
          </div>
        );
      })}

      {/* User location */}
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        <div className="relative">
          <span
            className={`absolute -inset-3 rounded-full ${accentColor} opacity-20 animate-ping`}
          />
          <div className="relative h-4 w-4 rounded-full border-2 border-white bg-blue-500 shadow-lg" />
        </div>
      </div>

      {/* Overlay controls */}
      <div className="absolute bottom-3 left-3 right-3 flex items-center justify-between">
        <div className="flex items-center gap-2 rounded-xl border border-white/10 bg-[#030712]/80 px-3 py-2 backdrop-blur-md">
          <MapPin className="h-4 w-4 text-emerald-400" />
          <span className="text-xs font-medium text-slate-300">
            {results.length} sonuç haritada
          </span>
        </div>
        <button
          type="button"
          className="flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-[#030712]/80 backdrop-blur-md text-slate-300"
        >
          <Maximize2 className="h-4 w-4" />
        </button>
      </div>

      <div className="absolute left-3 top-3 rounded-lg bg-[#030712]/80 px-2.5 py-1 text-[10px] font-medium uppercase tracking-wider text-slate-500 backdrop-blur-md">
        Harita önizleme
      </div>
    </div>
  );
}