/**
 * MapSkeletonPins
 * ─────────────────────────────────────────────────────────────────────────────
 * A tasteful "spots are loading" overlay shown ONLY on a genuinely cold, empty
 * map (no cached spots yet + still fetching). Instead of a blank map that reads
 * as broken, we scatter a few softly-pulsing ghost pins in the SkateSpots pin
 * shape, so the moment reads as "finding spots near you…".
 *
 * It's purely decorative and non-interactive (`pointer-events-none`), sits above
 * the tiles but below every real control, and fully respects reduced-motion.
 * The instant real spots arrive the parent unmounts this — no layout shift.
 */

import { useTranslation } from '@/contexts/language';

interface Ghost {
  /** left/top as viewport percentages so it scales on any screen. */
  left: number;
  top: number;
  /** teardrop scale + animation delay for an organic, staggered feel. */
  scale: number;
  delay: number;
}

// Hand-placed so they feel scattered-but-balanced (not a rigid grid).
const GHOSTS: Ghost[] = [
  { left: 22, top: 34, scale: 1.0, delay: 0 },
  { left: 48, top: 22, scale: 0.82, delay: 0.35 },
  { left: 71, top: 38, scale: 1.1, delay: 0.15 },
  { left: 34, top: 58, scale: 0.9, delay: 0.6 },
  { left: 62, top: 62, scale: 1.0, delay: 0.45 },
  { left: 82, top: 66, scale: 0.78, delay: 0.8 },
];

export function MapSkeletonPins() {
  const { t } = useTranslation();
  return (
    <div
      className="pointer-events-none absolute inset-0 z-[900] overflow-hidden"
      aria-hidden="true"
    >
      {GHOSTS.map((g, i) => (
        <div
          key={i}
          className="absolute motion-safe:animate-ghost-pin"
          style={{
            left: `${g.left}%`,
            top: `${g.top}%`,
            animationDelay: `${g.delay}s`,
          }}
        >
          {/* Soft ground shadow / radar ping under each pin */}
          <span
            className="absolute left-1/2 top-full h-2 w-8 -translate-x-1/2 -translate-y-1 rounded-[50%] bg-[#ff0040]/20 blur-[3px] motion-safe:animate-ghost-ping"
            style={{ animationDelay: `${g.delay}s` }}
          />
          {/* SkateSpots teardrop pin outline */}
          <div
            style={{
              width: 30 * g.scale,
              height: 30 * g.scale,
              borderRadius: '50% 50% 50% 0',
              transform: 'rotate(-45deg)',
              background:
                'linear-gradient(135deg, rgba(255,0,64,0.18), rgba(255,102,0,0.14))',
              border: '2px solid rgba(255,255,255,0.14)',
              boxShadow: '0 4px 14px rgba(255,0,64,0.15)',
              backdropFilter: 'blur(1px)',
            }}
          />
        </div>
      ))}

      {/* Quiet status label — slim pill near the TOP so it never blocks the
          map's center where the spots are. */}
      <div className="absolute left-1/2 top-3 -translate-x-1/2">
        <div className="flex items-center gap-2 rounded-full bg-black/55 px-3.5 py-1.5 backdrop-blur-md ring-1 ring-white/10 shadow-lg">
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full rounded-full bg-[#ff0040] opacity-70 motion-safe:animate-ping" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-[#ff0040]" />
          </span>
          <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70">
            {t('mapUi.findingSpots')}
          </span>
        </div>
      </div>
    </div>
  );
}

export default MapSkeletonPins;