'use client';

import { useMemo } from 'react';
import { MapPin } from 'lucide-react';
import { MapView } from '@/components/map/MapView';
import { buildWorkerMapMarkers } from '@/components/map/workerMarkers';
import { useRegion } from '@/contexts/RegionContext';
import { getRegionMapViewport, regionLabel, resolveBrowseRegionSlug } from '@/lib/region';
import { cn } from '@/lib/utils';

interface WorkersMapPanelProps {
  workers: Record<string, unknown>[];
  categorySlug?: string;
  regionSlug?: string;
  loading?: boolean;
  className?: string;
  emptyTitle?: string;
  emptySubtitle?: string;
}

export function WorkersMapPanel({
  workers,
  categorySlug,
  regionSlug,
  loading = false,
  className,
  emptyTitle,
  emptySubtitle,
}: WorkersMapPanelProps) {
  const { slug: contextSlug } = useRegion();
  const effectiveSlug = resolveBrowseRegionSlug(regionSlug, contextSlug);
  const { center, zoom } = getRegionMapViewport(effectiveSlug);
  const label = regionLabel(effectiveSlug);

  const markers = useMemo(
    () => buildWorkerMapMarkers(workers, categorySlug, effectiveSlug),
    [workers, categorySlug, effectiveSlug]
  );

  return (
    <div
      className={cn(
        'relative overflow-hidden border border-[#e2ddd2] bg-[var(--home-sand)]',
        className
      )}
    >
      <MapView
        markers={markers}
        defaultCenter={center}
        defaultZoom={zoom}
        focusOnRegion
        className="h-full w-full"
      />
      {loading && (
        <div className="absolute top-3 left-3 z-10 flex items-center gap-2 border border-[#e2ddd2] bg-white/95 px-3 py-1.5 text-xs text-muted shadow-sm">
          <div className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-[var(--home-amber)] border-t-transparent" />
          Updating map…
        </div>
      )}
      {!loading && markers.length === 0 && (
        <div className="absolute inset-0 flex flex-col items-center justify-center bg-[var(--home-sand)]/90 text-center p-8 pointer-events-none">
          <div className="mb-3 flex h-12 w-12 items-center justify-center bg-[var(--home-ink)] text-white">
            <MapPin className="h-6 w-6" />
          </div>
          <p className="home-display font-medium text-slate-900">
            {emptyTitle ?? `No workers to show in ${label}`}
          </p>
          <p className="text-sm text-muted mt-1 max-w-sm">
            {emptySubtitle ?? 'Try adjusting your filters or check back later.'}
          </p>
        </div>
      )}
      {!loading && markers.length > 0 && (
        <div className="absolute top-3 left-3 z-10 border border-[#e2ddd2] bg-white/95 px-3 py-1.5 text-xs text-muted shadow-sm">
          <span className="inline-block h-2 w-2 rounded-full bg-[var(--home-amber)] mr-1.5 align-middle" />
          {markers.length} worker{markers.length !== 1 ? 's' : ''} on map
        </div>
      )}
    </div>
  );
}