import { useState, useMemo, useEffect, lazy, Suspense, useCallback } from 'react';
import { useSeoMeta } from '@unhead/react';
import { Link, useNavigate, useSearchParams } from 'react-router-dom';

// Lazy-load the map — Leaflet is large (~150KB) and only needed on this page
const SpotMap = lazy(() => import('@/components/SpotMap').then(m => ({ default: m.SpotMap })));
import { SpotCard, SpotCardSkeleton } from '@/components/SpotCard';
import { WeatherToggle } from '@/components/WeatherToggle';
import { RouteDialog } from '@/components/RouteDialog';
import { TrustFilter } from '@/components/TrustFilter';
import { filterByTrustLevel, type TrustFilterLevel } from '@/lib/trustFilter';
import { SortDropdown, type SortOption } from '@/components/SortDropdown';
import { calculateDistance } from '@/lib/sortOptions';
import { useZapTotals, zapTargetKey } from '@/hooks/useZapTotals';
import { useIsMobile } from '@/hooks/useIsMobile';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Skeleton } from '@/components/ui/skeleton';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { LoginArea } from '@/components/auth/LoginArea';

import { useSkateSpots } from '@/hooks/useSkateSpots';
import { useRelayStatus } from '@/hooks/useRelayStatus';
import { useAutoHiddenSpots } from '@/hooks/useAutoHiddenSpots';
import { useOnlineStatus } from '@/hooks/useOfflineCache';
import { useShops } from '@/hooks/useShops';
import { useMarketplaceItems } from '@/hooks/useMarketplace';
import { useTours } from '@/hooks/useTours';
import { useUpcomingSkateEvents } from '@/hooks/useSkateEvents';
import { useCrews } from '@/hooks/useCrews';
import { useBtcMapPlaces } from '@/hooks/useBtcMapPlaces';
import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useFollowing } from '@/hooks/useFollowing';
import { useBatchTrustScores } from '@/hooks/useBatchTrustScores';
import { useBatchSpotStatus } from '@/hooks/useSpotStatus';
import { useMultipleSpotWeather } from '@/hooks/useSpotWeather';
import { useCommentCounts } from '@/hooks/useCommentCounts';
import { ImageWithFallback } from '@/components/ImageWithFallback';
import { useStash, STASH_CATEGORIES, CONDITION_LABELS, RARITY_TIERS, type StashItem } from '@/hooks/useStash';
import { useAuthor } from '@/hooks/useAuthor';
import { useSatsToUsd } from '@/hooks/useExchangeRate';
import { useLocalStorage } from '@/hooks/useLocalStorage';
import { genUserName } from '@/lib/genUserName';
import { useTranslation } from '@/contexts/language';
import { SPOT_CATEGORIES, SPOT_TYPE_LABELS, SHELTER_INFO, SKATE_RELAY } from '@/lib/types';
import type { SkateSpot } from '@/lib/types';
import ngeohash from 'ngeohash';
import {
  Search,
  Plus,
  List,
  Map,
  X,
  ShoppingBag,
  Route,
  Backpack,
  Package,
  Target,
  Star,
  Zap,
  ArrowRightLeft,
  Shield,
  Trash2,
  AlertTriangle,
  Bitcoin,
  SlidersHorizontal,
  Check,
  Navigation,
  ExternalLink,
  MapPin,
  LocateFixed,
  LocateOff,
  Store,
  Layers,
  Calendar,
  MessageCircle,
  ChevronDown,
  Smartphone,
  WifiOff,
  RefreshCw,
} from 'lucide-react';
import { SpotChat } from '@/components/SpotChat';
import { useToast } from '@/hooks/useToast';
import { cn } from '@/lib/utils';
import { getCurrentPosition, GeolocationError, isNativeGeolocation } from '@/lib/geolocation';
import { getLastLocation } from '@/lib/lastLocation';


type ViewMode = 'map' | 'list';

// Compact stash item card for the drawer
function MiniStashCard({ item, onDelete }: { item: StashItem; onDelete: () => void }) {
  const category = STASH_CATEGORIES[item.category];
  const condition = CONDITION_LABELS[item.condition];
  const rarity = (item.rarity || category.rarity) as keyof typeof RARITY_TIERS;
  const rarityTier = RARITY_TIERS[rarity];
  const isWishlist = item.itemType === 'wtb';
  const hasImage = item.images && item.images.length > 0;

  return (
    <div
      className={cn(
        'relative p-3 rounded-lg border-2 bg-black/60 transition-all hover:bg-black/80',
        // Wishlist keeps a fixed cyan border; gear uses its rarity colour (applied
        // via inline style below, since Tailwind's JIT can't see dynamically
        // interpolated `border-${colour}` class names).
        isWishlist && 'border-cyan-500/40',
      )}
      style={isWishlist ? undefined : { borderColor: rarityTier.color + '40' }}
    >
      {/* Wishlist badge */}
      {isWishlist && (
        <Badge className="absolute -top-2 -left-1 bg-cyan-500 text-black text-[9px] px-1.5 py-0">
          <Target className="h-2.5 w-2.5 mr-0.5" />
          Wishlist
        </Badge>
      )}
      
      <div className="flex items-start gap-2">
        {/* Image or emoji */}
        {hasImage ? (
          <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0 border border-white/10">
            <ImageWithFallback src={item.images![0]} alt={item.title} className="w-full h-full object-cover" />
          </div>
        ) : (
          <span className="text-2xl">{category.emoji}</span>
        )}
        <div className="flex-1 min-w-0">
          <h4 className="font-bold text-sm text-white truncate">{item.title}</h4>
          <p className="text-[10px] text-muted-foreground">
            {item.brand && <span>{item.brand} • </span>}
            {item.size && <span>{item.size}</span>}
          </p>
          <div className="flex items-center gap-2 mt-1">
            {!isWishlist && (
              <div className="flex items-center gap-0.5">
                {Array.from({ length: 5 }).map((_, i) => (
                  <Star 
                    key={i}
                    className={cn(
                      'h-2.5 w-2.5',
                      i < condition.stars ? 'fill-yellow-400 text-yellow-400' : 'text-gray-700'
                    )}
                  />
                ))}
              </div>
            )}
            {(item.minPrice || item.maxPrice) && (
              <span className="text-[10px] text-amber-400 flex items-center gap-0.5">
                <Zap className="h-2.5 w-2.5" />
                {isWishlist ? `≤${item.maxPrice?.toLocaleString()}` : item.minPrice?.toLocaleString()}
              </span>
            )}
          </div>
        </div>
        <div className="flex flex-col items-end gap-1">
          <Badge 
            variant="outline" 
            className="text-[8px] px-1 py-0"
            style={{ borderColor: rarityTier.color, color: rarityTier.color }}
          >
            {rarityTier.label}
          </Badge>
          <button 
            onClick={onDelete}
            className="p-1 rounded hover:bg-red-500/20 text-gray-500 hover:text-red-400 transition-colors"
          >
            <Trash2 className="h-3 w-3" />
          </button>
        </div>
      </div>
    </div>
  );
}

// Stash drawer component
function StashDrawer() {
  const { user } = useCurrentUser();
  const { items, stats, isLoading, removeItem, isEncryptionAvailable } = useStash();
  const author = useAuthor(user?.pubkey || '');
  const metadata = author.data?.metadata;
  const displayName = metadata?.name ?? genUserName(user?.pubkey || '');
  const avatar = metadata?.picture;
  const usdValue = useSatsToUsd(stats.totalValue);
  
  const stashItems = items.filter(i => i.itemType !== 'wtb');
  const wishlistItems = items.filter(i => i.itemType === 'wtb');

  // Not logged in
  if (!user) {
    return (
      <div className="p-6 text-center">
        <Backpack className="h-12 w-12 mx-auto mb-4 text-[#ff6600]/50" />
        <h3 className="font-bold text-lg mb-2">Your Private Stash</h3>
        <p className="text-sm text-muted-foreground mb-4">
          Track your gear, set prices, and find trades with other skaters.
        </p>
        <LoginArea className="justify-center" />
      </div>
    );
  }

  // No encryption
  if (!isEncryptionAvailable) {
    return (
      <div className="p-6 text-center">
        <AlertTriangle className="h-12 w-12 mx-auto mb-4 text-yellow-500" />
        <h3 className="font-bold text-lg mb-2">Encryption Required</h3>
        <p className="text-sm text-muted-foreground mb-4">
          Use a signer with NIP-44 support (Alby, nos2x, Amber).
        </p>
        <Link to="/signers">
          <Button variant="outline" size="sm">Learn More</Button>
        </Link>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Profile header */}
      <div className="p-4 bg-gradient-to-r from-[#ff6600]/20 to-[#ff0040]/20 border-b border-[#ff6600]/30">
        <div className="flex items-center gap-3">
          <Avatar className="h-12 w-12 border-2 border-[#ff6600]/50">
            <AvatarImage src={avatar} alt={displayName} />
            <AvatarFallback className="bg-[#ff6600]/20 text-[#ff6600] font-bold">
              {displayName.slice(0, 2).toUpperCase()}
            </AvatarFallback>
          </Avatar>
          <div className="flex-1 min-w-0">
            <h3 className="font-bold text-white truncate">{displayName}</h3>
            <p className="text-xs text-muted-foreground">{stats.total} items</p>
          </div>
          <div className="text-right">
            <div className="flex items-center gap-1 text-amber-400">
              <Zap className="h-3.5 w-3.5" />
              <span className="font-bold text-sm">
                {stats.totalValue > 999 ? Math.floor(stats.totalValue / 1000) + 'k' : stats.totalValue}
              </span>
            </div>
            <p className="text-[10px] text-muted-foreground">
              {usdValue ? `~$${usdValue.toFixed(0)}` : 'sats'}
            </p>
          </div>
        </div>
      </div>

      {/* Quick stats */}
      <div className="grid grid-cols-3 gap-2 p-3 border-b border-white/10">
        <div className="text-center p-2 rounded bg-black/40">
          <div className="text-lg font-black text-[#ff0040]">{stashItems.length}</div>
          <div className="text-[9px] text-muted-foreground uppercase">Items</div>
        </div>
        <div className="text-center p-2 rounded bg-black/40">
          <div className="text-lg font-black text-cyan-400">{wishlistItems.length}</div>
          <div className="text-[9px] text-muted-foreground uppercase">Wishlist</div>
        </div>
        <div className="text-center p-2 rounded bg-black/40">
          <div className="text-lg font-black text-purple-400">{Object.keys(stats.byCategory).length}</div>
          <div className="text-[9px] text-muted-foreground uppercase">Types</div>
        </div>
      </div>

      {/* Items list */}
      <div className="flex-1 overflow-auto p-3 space-y-2">
        {isLoading ? (
          Array.from({ length: 3 }).map((_, i) => (
            <Skeleton key={i} className="h-20 w-full bg-white/5" />
          ))
        ) : items.length === 0 ? (
          <div className="text-center py-8">
            <Package className="h-10 w-10 mx-auto mb-3 text-muted-foreground/30" />
            <p className="text-sm text-muted-foreground mb-3">Your stash is empty</p>
            <Link to="/stash">
              <Button size="sm" className="bg-[#ff6600] hover:bg-[#ff6600]/90">
                <Plus className="h-3.5 w-3.5 mr-1" />
                Add First Item
              </Button>
            </Link>
          </div>
        ) : (
          <>
            {/* Wishlist items first */}
            {wishlistItems.length > 0 && (
              <div className="mb-3">
                <h4 className="text-[10px] font-bold uppercase text-cyan-400 mb-2 flex items-center gap-1">
                  <Target className="h-3 w-3" />
                  Wishlist ({wishlistItems.length})
                </h4>
                {wishlistItems.slice(0, 3).map(item => (
                  <MiniStashCard 
                    key={item.id} 
                    item={item} 
                    onDelete={() => removeItem.mutate(item.id)}
                  />
                ))}
              </div>
            )}
            
            {/* Stash items */}
            {stashItems.length > 0 && (
              <div>
                <h4 className="text-[10px] font-bold uppercase text-[#ff6600] mb-2 flex items-center gap-1">
                  <Package className="h-3 w-3" />
                  My Gear ({stashItems.length})
                </h4>
                <div className="space-y-2">
                  {stashItems.slice(0, 5).map(item => (
                    <MiniStashCard 
                      key={item.id} 
                      item={item} 
                      onDelete={() => removeItem.mutate(item.id)}
                    />
                  ))}
                </div>
              </div>
            )}
          </>
        )}
      </div>

      {/* Footer actions */}
      <div className="p-3 border-t border-white/10 space-y-2">
        <Link to="/stash" className="block">
          <Button className="w-full bg-gradient-to-r from-[#ff6600] to-[#ff0040] hover:opacity-90 font-bold">
            <Backpack className="h-4 w-4 mr-2" />
            Open Full Stash
          </Button>
        </Link>
        <div className="flex gap-2">
          <Link to="/stash" className="flex-1">
            <Button variant="outline" size="sm" className="w-full border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10">
              <Plus className="h-3.5 w-3.5 mr-1" />
              Add Item
            </Button>
          </Link>
          <Link to="/stash" className="flex-1">
            <Button variant="outline" size="sm" className="w-full border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10">
              <Target className="h-3.5 w-3.5 mr-1" />
              Wishlist
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}

// In-app directions — opens the same RouteDialog used on the detail pages.
// Deliberately NO external map handoff: routing stays inside SkateSpots.
function DirectionsButton({
  lat,
  lon,
  label,
  onDirections,
}: {
  lat: string;
  lon: string;
  label: string;
  /**
   * When provided, the PARENT owns the RouteDialog. Rendering a Radix Dialog
   * inside the spot's Radix Sheet stacked two modals (the sheet covered the
   * route), so the map passes this and renders the dialog itself; the sheet
   * then closes and the route gets the whole screen.
   */
  onDirections?: (target: { lat: number; lng: number; label: string }) => void;
}) {
  const [open, setOpen] = useState(false);
  const destination = useMemo(() => {
    const la = parseFloat(lat);
    const lo = parseFloat(lon);
    return Number.isFinite(la) && Number.isFinite(lo) ? { lat: la, lng: lo } : null;
  }, [lat, lon]);

  return (
    <>
      <Button
        variant="outline"
        className="h-12 w-full font-bold text-sm border-white/20 hover:bg-white/10 rounded-xl"
        onClick={() => {
          if (!destination) return;
          if (onDirections) onDirections({ ...destination, label: label || 'Spot' });
          else setOpen(true);
        }}
        disabled={!destination}
      >
        <Navigation className="h-4 w-4 mr-2 text-[#ccff00]" />
        Directions
      </Button>
      {!onDirections && (
        <RouteDialog
          open={open}
          onOpenChange={setOpen}
          destination={destination}
          destinationLabel={label || 'Spot'}
        />
      )}
    </>
  );
}

// Bottom sheet shown when a map marker is tapped
function SpotBottomSheet({
  spot,
  onClose,
  onDirections,
}: {
  spot: SkateSpot;
  onClose: () => void;
  onDirections: (target: { lat: number; lng: number; label: string }) => void;
}) {
  const navigate = useNavigate();
  const author = useAuthor(spot.pubkey);
  const metadata = author.data?.metadata;
  const displayName = metadata?.name ?? genUserName(spot.pubkey);
  const isShop = spot.types.includes('shop');
  const route = isShop ? `/shop/${spot.pubkey}/${spot.identifier}` : `/spot/${spot.pubkey}/${spot.identifier}`;

  return (
    <div className="flex flex-col">
      {/* Drag handle */}
      <div className="flex justify-center pt-3 pb-1">
        <div className="w-10 h-1 rounded-full bg-white/20" />
      </div>

      <div className="px-4 pb-2">
        {/* Header row */}
        <div className="flex items-start gap-3 mb-3">
          {/* Thumbnail */}
          <div className="w-16 h-16 rounded-xl overflow-hidden bg-white/5 flex-shrink-0 border border-white/10">
            {spot.images[0] ? (
              <ImageWithFallback src={spot.images[0]} alt={spot.title} className="w-full h-full object-cover" />
            ) : (
              <div className="w-full h-full flex items-center justify-center text-2xl">
                {isShop ? '🏪' : '🛹'}
              </div>
            )}
          </div>

          {/* Info */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-0.5">
              <h2 className="font-black text-white text-lg leading-tight truncate">{spot.title}</h2>
            </div>
            {spot.location && (
              <p className="text-xs text-muted-foreground flex items-center gap-1 truncate">
                <MapPin className="h-3 w-3 flex-shrink-0" />
                {spot.location}
              </p>
            )}
            {/* Type badges */}
            <div className="flex flex-wrap gap-1 mt-1.5">
              {spot.shelter && spot.shelter !== 'outdoor' && SHELTER_INFO[spot.shelter] && (
                <span
                  className="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-bold"
                  style={{
                    color: SHELTER_INFO[spot.shelter].color,
                    backgroundColor: `${SHELTER_INFO[spot.shelter].color}25`,
                  }}
                >
                  {SHELTER_INFO[spot.shelter].emoji} {SHELTER_INFO[spot.shelter].short}
                </span>
              )}
              {spot.types.slice(0, 3).map((type) => (
                <span
                  key={type}
                  className="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold bg-white/10 text-white/70"
                >
                  {SPOT_TYPE_LABELS[type] || type}
                </span>
              ))}
            </div>
          </div>

          {/* Close */}
          <button
            onClick={onClose}
            className="p-1.5 rounded-full hover:bg-white/10 text-white/40 hover:text-white transition-colors flex-shrink-0 -mt-0.5"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        {/* Description */}
        {spot.description && (
          <p className="text-sm text-muted-foreground line-clamp-2 mb-3">{spot.description}</p>
        )}

        {/* Author */}
        <div className="flex items-center gap-2 mb-4">
          <Avatar className="h-5 w-5">
            <AvatarImage src={metadata?.picture} />
            <AvatarFallback className="text-[8px] bg-white/10">{displayName.slice(0, 2).toUpperCase()}</AvatarFallback>
          </Avatar>
          <span className="text-xs text-muted-foreground">Added by <span className="text-white/70">{displayName}</span></span>
        </div>

        {/* CTA buttons */}
        <div className="grid grid-cols-2 gap-2 pb-safe pb-4">
          <Button
            onClick={() => navigate(route)}
            className="h-12 font-bold text-sm bg-gradient-to-r from-[#ff0040] to-[#ff6600] hover:opacity-90 rounded-xl"
          >
            <ExternalLink className="h-4 w-4 mr-2" />
            View Details
          </Button>
          {spot.geohash && (() => {
            const { latitude, longitude } = ngeohash.decode(spot.geohash);
            const lat = latitude.toFixed(6);
            const lon = longitude.toFixed(6);
            const label = spot.title;
            return (
              <div className="relative">
                <DirectionsButton lat={lat} lon={lon} label={label} onDirections={onDirections} />
              </div>
            );
          })()}
        </div>
      </div>
    </div>
  );
}

export default function MapPage() {
  const { t } = useTranslation();
  
  useSeoMeta({
    title: 'Skate Spots Map - SkateSpots',
    description: 'Explore skateboarding spots around the world on our interactive map.',
  });

  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const { user } = useCurrentUser();
  const { data: followingList } = useFollowing(user?.pubkey);
  const followCount = followingList?.length ?? 0;
  const { data: spots, isLoading: spotsLoading, refetch: refetchSpots } = useSkateSpots(2000);
  const { data: shops, isLoading: shopsLoading } = useShops(500);

  // Wi-Fi present ≠ relay reachable (captive portal / relay outage). The utility
  // prefers saved spots over a blank map, so we detect that honestly and say so.
  // ⚠️ Two different signals on purpose:
  //   • deviceOffline  — the DEVICE has no connection, so the pins really are
  //     the saved cache. This is what the "showing saved spots" banner means.
  //   • relayUnreachable — the canonical community relay didn't answer its probe.
  //     The map reads from several relays, so this can be true while fresh data
  //     loads fine; use it only for the "nothing at all" card, never the banner
  //     (that mismatch is why the banner used to stick around online).
  const online = useOnlineStatus();
  const relay = useRelayStatus(SKATE_RELAY);
  const deviceOffline = !online;
  const relayUnreachable = !online || relay.status === 'offline';
  // Dismissable for the session; re-armed when the connection comes back.
  const [offlineBannerDismissed, setOfflineBannerDismissed] = useState(false);
  useEffect(() => {
    if (online) setOfflineBannerDismissed(false);
  }, [online]);

  // Spots reported "not a skate spot" by ≥3 distinct accounts with NO community
  // signals are hidden from the map pending a human (see useAutoHiddenSpots).
  const autoHideInput = useMemo(
    () => (spots ?? []).map((s) => ({ id: s.id, pubkey: s.pubkey, identifier: s.identifier })),
    [spots],
  );
  const { autoHiddenIds } = useAutoHiddenSpots(autoHideInput);

  // Tell the cold-start splash that real content has arrived, so it can reveal
  // the map already populated (rather than dismissing on bare connection). We
  // signal readiness when the spots query has genuinely resolved — either it
  // streamed in some spots, or it finished loading (empty relay / offline). With
  // IndexedDB persistence this often fires on the very first frame (cache hit),
  // so returning users get an instant, already-populated reveal. The splash
  // keeps its own hard cap, so this can only ever make the reveal feel readier.
  useEffect(() => {
    const hasSpots = Array.isArray(spots) && spots.length > 0;
    if (hasSpots || !spotsLoading) {
      window.dispatchEvent(new Event('skatespots:content-ready'));
    }
  }, [spots, spotsLoading]);
  const { data: marketplaceItems, isLoading: marketplaceLoading } = useMarketplaceItems(200);
  const { data: tours, isLoading: toursLoading } = useTours(100);
  // Upcoming events for the (opt-in) Events map layer
  const { data: upcomingEvents } = useUpcomingSkateEvents(100);
  // Crews for the (opt-in) Crews map layer
  const { data: crews } = useCrews(200);

  // Check if coming with ?view=gear to focus on marketplace
  const viewParam = searchParams.get('view');
  const focusGear = viewParam === 'gear';

  const [viewMode, setViewMode] = useState<ViewMode>('map');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [selectedSpot, setSelectedSpot] = useState<SkateSpot | null>(null);
  // Directions target lives at page level (NOT inside the spot Sheet) so the
  // RouteDialog is never nested inside another modal.
  const [routeTarget, setRouteTarget] = useState<{ lat: number; lng: number; label: string } | null>(null);
  const [weatherEnabled, setWeatherEnabled] = useState(false);
  const [weatherFilter, setWeatherFilter] = useState<'all' | 'good' | 'perfect'>('all');
  // Smart WoT default:
  // - Logged out or <5 follows → 'all' (show everything, don't punish new/anon users)
  // - Logged in with ≥5 follows → 'trusted' (sort trusted first, badge unverified)
  // User can always override with the TrustFilter dropdown
  const smartDefault: TrustFilterLevel = (user && followCount >= 5) ? 'trusted' : 'all';
  const [trustFilter, setTrustFilter] = useState<TrustFilterLevel>(smartDefault);
  const [sortBy, setSortBy] = useState<SortOption>('recent');
  // Seed from the cached last-known location so the "you are here" badge and
  // proximity sorting are available instantly; a fresh fix updates it.
  // Mobile-only: Near Me is a mobile affordance, so desktop shows no location
  // pin (or proximity sort).
  const isMobile = useIsMobile();
  const [userLocation, setUserLocation] = useState<{lat: number; lon: number} | null>(() => {
    if (!isMobile) return null;
    const cached = getLastLocation();
    return cached ? { lat: cached.lat, lon: cached.lng } : null;
  });
  
  // Map entity type filters - if ?view=gear, only show gear initially
  const [showSpots, setShowSpots] = useState(!focusGear);
  const [showShops, setShowShops] = useState(!focusGear);
  const [showGear, setShowGear] = useState(true);
  const [showTours, setShowTours] = useState(!focusGear);
  // Events layer — off by default; users opt in via the Layers control
  const [showEvents, setShowEvents] = useState(false);
  // Crews layer — off by default; users opt in via the Layers control
  const [showCrews, setShowCrews] = useState(false);
  const [showBtcMap, setShowBtcMap] = useState(false);
  
  // Mobile filters sheet
  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
  
  // Welcome banner — show once to new/logged-out visitors, dismissible
  const [welcomeDismissed, setWelcomeDismissed] = useLocalStorage('skatespots_welcome_dismissed', false);
  const showWelcomeBanner = !user && !welcomeDismissed;

  // Track Sasquatch panel open state so the Add Spot FAB can step aside
  const [, setSasquatchPanelOpen] = useState(false);
  useEffect(() => {
    const handler = (e: Event) => {
      setSasquatchPanelOpen((e as CustomEvent<{ open: boolean }>).detail.open);
    };
    window.addEventListener('sasquatch:panelchange', handler);
    return () => window.removeEventListener('sasquatch:panelchange', handler);
  }, []);
  
  // Mobile "Add" speed-dial (fans out Add Spot / Shop / Event / Gear / Tour)
  const [addDialOpen, setAddDialOpen] = useState(false);
  // Mobile layers popover
  const [layersOpen, setLayersOpen] = useState(false);

  const { toast } = useToast();

  // Optimistic initial view: if we have a cached last-known location, open the
  // map ALREADY centered on the user's area (and zoomed to city level) instead
  // of the default world view. Resolved once at mount — a fresh fix or a manual
  // pan supersedes it. Makes the map feel "already yours" the moment it opens.
  const [initialView] = useState(() => {
    const cached = getLastLocation();
    return cached
      ? { center: [cached.lat, cached.lng] as [number, number], zoom: 12, lat: cached.lat, lon: cached.lng }
      : { center: [40.7128, -74.006] as [number, number], zoom: 3, lat: 40.7128, lon: -74.006 };
  });
  const initialCenter = initialView.center;
  const initialZoom = initialView.zoom;

  // BTC Map center for fetching places — seeded from the cached location so
  // location-aware layers (BTC Map, weather) query the right area immediately.
  const [mapCenter, setMapCenter] = useState<{ lat: number; lon: number }>({
    lat: initialView.lat,
    lon: initialView.lon,
  });

  // Near Me fly-to state
  const [flyTo, setFlyTo] = useState<{ lat: number; lng: number; zoom?: number } | null>(null);
  const [nearMeLoading, setNearMeLoading] = useState(false);
  const [nearMeError, setNearMeError] = useState<'denied' | 'unavailable' | 'timeout' | null>(null);
  const [showLocationHelp, setShowLocationHelp] = useState(false);



  const handleNearMe = async () => {
    // Clear previous error
    setNearMeError(null);
    setNearMeLoading(true);
    // "Near Me" should also MEAN "show me what's near" — surface the closest
    // spots first instead of leaving the list on Most Recent.
    setSortBy('proximity');

    // OPTIMISTIC: if we already know roughly where they are, fly there IMMEDIATELY
    // so the map reacts on tap. The fresh fix below refines the exact position.
    const cached = getLastLocation();
    if (cached) {
      setFlyTo({ lat: cached.lat, lng: cached.lng, zoom: 13 });
    }

    // Getting a GPS lock (especially first-time / on ROMs without Google's
    // fused provider) can take a while — let the user know it's working.
    const locatingToast = toast({
      title: cached ? 'Refining your location…' : 'Locating you…',
      description: cached
        ? 'Centered on your last spot — dialing in a fresh GPS fix.'
        : 'Getting a GPS fix. This can take up to a minute the first time.',
      duration: 60000,
    });

    try {
      const { lat, lng } = await getCurrentPosition();
      locatingToast.dismiss();
      setFlyTo({ lat, lng, zoom: 14 });
      setUserLocation({ lat, lon: lng });
      setNearMeLoading(false);
      setNearMeError(null);
      toast({
        title: 'Found you',
        description: 'Centered the map on your location.',
        duration: 3000,
      });
    } catch (err) {
      locatingToast.dismiss();
      setNearMeLoading(false);
      const kind = err instanceof GeolocationError ? err.kind : 'unavailable';

      // Raw diagnostic text so we can see exactly what failed on-device
      // (no adb needed). Shown appended to the toast + logged.
      const rawMsg = err instanceof Error ? err.message : String(err);
      console.warn('[NearMe] geolocation failed:', kind, rawMsg, err);
      const diag = rawMsg ? ` [${rawMsg}]` : '';

      if (kind === 'denied') {
        setNearMeError('denied');
        if (isNativeGeolocation()) {
          // Native app: it's an OS permission, not a browser setting.
          toast({
            title: 'Location permission needed',
            description:
              'Allow location for SkateSpots in your device Settings → Apps → SkateSpots → Permissions, then tap Near Me again.' +
              diag,
            variant: 'destructive',
            duration: 12000,
          });
        } else {
          // Web: show the browser re-enable help sheet.
          setShowLocationHelp(true);
        }
      } else if (kind === 'timeout') {
        setNearMeError('timeout');
        toast({
          title: 'Location timed out',
          description:
            (isNativeGeolocation()
              ? "Couldn't get a location fix in time. If you're indoors, GPS can't see satellites — enable Network Location (Settings → Location) or step outside, then try again."
              : 'Could not get your location in time. Check your signal and try again.') + diag,
          variant: 'destructive',
          duration: 12000,
        });
      } else if (kind === 'no_provider') {
        setNearMeError('unavailable');
        toast({
          title: 'No location provider',
          description:
            (isNativeGeolocation()
              ? "Your phone isn't providing a location. On privacy-focused ROMs (e.g. GrapheneOS) enable Network Location under Settings → Location, or make sure GPS is on and try outdoors."
              : 'No location provider is available. Enable location services and try again.') +
            diag,
          variant: 'destructive',
          duration: 14000,
        });
      } else {
        setNearMeError('unavailable');
        toast({
          title: 'Location unavailable',
          description:
            (isNativeGeolocation()
              ? 'Turn on Location/GPS in your phone settings, allow location for SkateSpots (Settings → Apps → SkateSpots → Permissions), then try again.'
              : 'Your location could not be determined. Make sure location services are enabled.') +
            diag,
          variant: 'destructive',
          duration: 12000,
        });
      }
    }
  };
  

  // Fetch BTC Map places when enabled
  const { data: btcMapPlaces, isLoading: btcMapLoading } = useBtcMapPlaces({
    lat: mapCenter.lat,
    lon: mapCenter.lon,
    radiusKm: 50, // 50km radius
    enabled: showBtcMap,
  });

  const isLoading = spotsLoading || shopsLoading || marketplaceLoading || toursLoading;

  // Get user's location for proximity sorting
  useEffect(() => {
    if (sortBy === 'proximity' && !userLocation) {
      getCurrentPosition()
        .then(({ lat, lng }) => setUserLocation({ lat, lon: lng }))
        .catch((error) => console.warn('[MapPage] Geolocation error:', error));
    }
  }, [sortBy, userLocation]);

  // Silent background warm-up (once, on mount): quietly refresh the location fix
  // so it's cached and ready the instant the user taps "Near Me". This never
  // moves the map or shows a prompt-driven toast — it just updates the badge /
  // cache in the background. Skipped on native, where it would surface an OS
  // permission prompt out of context (native users trigger it via "Near Me").
  useEffect(() => {
    if (isNativeGeolocation()) return;
    let cancelled = false;

    const warm = () =>
      getCurrentPosition()
        .then(({ lat, lng }) => {
          if (!cancelled) setUserLocation({ lat, lon: lng });
        })
        .catch(() => {
          // Silent — user hasn't asked to be located yet.
        });

    // Only warm up when permission is ALREADY granted — otherwise this fires the
    // browser's "Allow location?" prompt the moment someone opens /map.
    if (typeof navigator !== 'undefined' && navigator.permissions?.query) {
      navigator.permissions
        .query({ name: 'geolocation' as PermissionName })
        .then((status) => {
          if (!cancelled && status.state === 'granted') warm();
        })
        .catch(() => {
          /* permissions API unavailable — don't prompt */
        });
    }

    return () => {
      cancelled = true;
    };
  }, []);

  // Combine spots and shops into unified list for map display
  const allLocations = useMemo(() => {
    const spotList = (spots || [])
      .filter((spot) => !autoHiddenIds.has(spot.id))
      .map(spot => ({ ...spot, isShop: false }));
    const shopList = (shops || []).map(shop => ({
      ...shop,
      title: shop.name,
      // SkateSpot-shaped fields so shops can share the unified spot list/map.
      tags: [] as string[],
      category: 'shop',
      types: ['shop' as const],
      isShop: true,
      accessType: undefined,
      contactInfo: undefined,
    }));
    return [...spotList, ...shopList];
  }, [spots, shops, autoHiddenIds]);

  // Fetch trust scores for all creators
  const locationPubkeys = useMemo(() => allLocations.map((l) => l.pubkey), [allLocations]);
  const { data: trustScores } = useBatchTrustScores(locationPubkeys);

  const getTrustScore = useCallback((pubkey: string) => trustScores?.get(pubkey), [trustScores]);

  // Fetch community status reports for all spots (not shops), batched in one query.
  const statusSpotRefs = useMemo(
    () => (spots || []).map((s) => ({ pubkey: s.pubkey, identifier: s.identifier })),
    [spots],
  );
  const { getStatus: getSpotStatus } = useBatchSpotStatus(statusSpotRefs);

  // Fetch comments for popularity sorting
  const spotIds = useMemo(() => allLocations.map((l) => l.event.id), [allLocations]);
  const { data: commentCounts } = useCommentCounts(spotIds);

  const getCommentCount = useCallback((eventId: string) => {
    return commentCounts?.get(eventId) ?? 0;
  }, [commentCounts]);

  // Batched zap totals for "Most Zapped" sorting (ONE query for every location).
  const locationEvents = useMemo(() => allLocations.map((l) => l.event), [allLocations]);
  const { data: zapTotals } = useZapTotals(locationEvents);
  const getZapTotal = useCallback(
    (event: (typeof locationEvents)[number]) => zapTotals?.get(zapTargetKey(event))?.totalSats ?? 0,
    [zapTotals],
  );

  // Get geohashes for weather fetching (only non-shop spots)
  const spotGeohashes = useMemo(() => {
    const geohashes = allLocations
      .filter(spot => !spot.isShop && spot.geohash)
      .map(spot => spot.geohash);

    return geohashes;
  }, [allLocations]);

  // Fetch weather data for all spots
  const { data: weatherData } = useMultipleSpotWeather(
    spotGeohashes,
    weatherEnabled
  );

  const handleMapClick = (lat: number, lng: number) => {
    if (!user) return;
    // Navigate to create spot with coordinates pre-filled
    navigate(`/create-spot?lat=${lat.toFixed(6)}&lng=${lng.toFixed(6)}`);
  };

  // Filter combined spots and shops
  const filteredSpots = useMemo(() => {
    let filtered = allLocations.filter((item) => {
      // Entity type filter (showSpots/showShops toggles)
      if (item.isShop && !showShops) return false;
      if (!item.isShop && !showSpots) return false;

      // Search filter
      if (searchQuery) {
        const query = searchQuery.toLowerCase();
        const matchesTitle = item.title.toLowerCase().includes(query);
        const matchesLocation = item.location?.toLowerCase().includes(query);
        const matchesDescription = item.description?.toLowerCase().includes(query);
        if (!matchesTitle && !matchesLocation && !matchesDescription) {
          return false;
        }
      }

      // Category filter
      if (selectedCategories.length > 0) {
        const hasMatchingCategory = item.types.some((type) =>
          selectedCategories.includes(type)
        );
        if (!hasMatchingCategory) return false;
      }
      
      // Weather filter (only applies when weather is enabled AND filter is not 'all')
      if (weatherEnabled && weatherFilter !== 'all' && weatherData && !item.isShop && item.geohash) {
        const spotWeather = weatherData.get(item.geohash);
        if (spotWeather) {
          if (weatherFilter === 'perfect' && spotWeather.skateability.score < 85) {
            return false;
          }
          if (weatherFilter === 'good' && spotWeather.skateability.score < 70) {
            return false;
          }
        }
      }

      return true;
    });

    // Apply trust filter.
    //   • 'trusted' (soft): keep everything visible but float trusted content to
    //     the top. This must be folded into the MAIN sort below as its primary
    //     key — running it as a separate .sort() first is pointless because the
    //     sort() that follows would immediately re-order everything and wipe it
    //     out (which it silently did for the default trusted+recent combo).
    //   • 'verified'/'following' (strict): actually hide low-trust content.
    const softTrust = trustFilter === 'trusted';
    if (trustScores && trustFilter !== 'all' && !softTrust) {
      filtered = filterByTrustLevel(filtered, trustFilter, getTrustScore);
    }

    // Trust tier (1 = trusted, 0 = not) used as the primary sort key in soft mode.
    const trustTier = (pubkey: string) => ((getTrustScore(pubkey) ?? -1) >= 60 ? 1 : 0);

    // Apply sorting. In soft-trust mode, trusted content sorts first and the
    // chosen `sortBy` becomes the tiebreaker WITHIN each trust tier.
    filtered.sort((a, b) => {
      if (softTrust && trustScores) {
        const tierDiff = trustTier(b.pubkey) - trustTier(a.pubkey);
        if (tierDiff !== 0) return tierDiff;
      }
      switch (sortBy) {
        case 'trust': {
          const scoreA = getTrustScore(a.pubkey) || 0;
          const scoreB = getTrustScore(b.pubkey) || 0;
          if (scoreB !== scoreA) return scoreB - scoreA; // Highest trust first
          return b.event.created_at - a.event.created_at; // Then newest
        }
        case 'proximity': {
          if (!userLocation || !a.geohash || !b.geohash) return 0;
          const posA = ngeohash.decode(a.geohash);
          const posB = ngeohash.decode(b.geohash);
          const distA = calculateDistance(userLocation.lat, userLocation.lon, posA.latitude, posA.longitude);
          const distB = calculateDistance(userLocation.lat, userLocation.lon, posB.latitude, posB.longitude);
          return distA - distB; // Closest first
        }
        case 'popular': {
          const commentsA = getCommentCount(a.event.id);
          const commentsB = getCommentCount(b.event.id);
          if (commentsB !== commentsA) return commentsB - commentsA; // Most comments first
          return b.event.created_at - a.event.created_at;
        }
        case 'zaps': {
          const zapsA = getZapTotal(a.event);
          const zapsB = getZapTotal(b.event);
          if (zapsB !== zapsA) return zapsB - zapsA; // Most zapped first
          return b.event.created_at - a.event.created_at;
        }
        case 'recent':
        default:
          return b.event.created_at - a.event.created_at; // Newest first
      }
    });

    return filtered;
  }, [allLocations, searchQuery, selectedCategories, weatherEnabled, weatherData, weatherFilter, showSpots, showShops, trustFilter, getTrustScore, trustScores, sortBy, userLocation, getCommentCount, getZapTotal]);

  // Spots shown as MAP MARKERS. Hide spots the community has confirmed as
  // "gone" (demolished) so they don't clutter the map — they still appear
  // (dimmed, with a badge) in the card list below so the record isn't lost.
  const mapSpots = useMemo(() => {
    return filteredSpots.filter((item) => {
      if (item.isShop) return true;
      const status = getSpotStatus(item.pubkey, item.identifier);
      return status?.status !== 'gone';
    });
  }, [filteredSpots, getSpotStatus]);

  const toggleCategory = (category: string) => {
    setSelectedCategories((prev) =>
      prev.includes(category)
        ? prev.filter((c) => c !== category)
        : [...prev, category]
    );
  };

  const clearFilters = () => {
    setSearchQuery('');
    setSelectedCategories([]);
    setWeatherFilter('all');
    setTrustFilter('all');
    setSortBy('recent');
  };

  const hasActiveFilters = searchQuery || selectedCategories.length > 0 || weatherFilter !== 'all' || trustFilter !== 'all' || sortBy !== 'recent';

  // Count active layer filters for mobile badge
  // Count of the primary layers active — shown as a badge on the Layers button
  const mobileLayerCount = [showSpots, showShops, showGear, showTours, showEvents, showCrews].filter(Boolean).length;
  const totalPrimaryLayers = 6;
  const activeCategoryCount = selectedCategories.length;
  const totalActiveFilters = activeCategoryCount + (trustFilter !== 'all' ? 1 : 0) + (sortBy !== 'recent' ? 1 : 0);

  return (
    <>
      {/* Full-height map container: subtract header + bottom nav on mobile, header only on desktop */}
      {/* 100dvh handles iOS Safari URL bar shrink correctly */}
      <div className="relative h-[calc(100dvh-var(--header-mobile)-var(--bottom-nav))] md:h-[calc(100vh-4rem)] flex flex-col">
        {/* Welcome Banner — shown once to logged-out visitors. It lives ABOVE
            the toolbar (both in flow) because the toolbar floats over the map:
            as a later sibling the banner would sit at the container's top and
            the floating toolbar would paint over it. */}
        {showWelcomeBanner && (
          <div className="relative z-10 bg-gradient-to-r from-[#ff0040]/90 via-black/95 to-[#ccff00]/20 border-b border-[#ff0040]/40 backdrop-blur">
            <div className="container px-4 py-2.5 flex items-center gap-3">
              <span className="text-xl flex-shrink-0">🛹</span>
              <div className="flex-1 min-w-0">
                <p className="text-sm font-black text-white uppercase tracking-wide leading-tight">New here?</p>
                <p className="text-xs text-white/70 leading-tight">Discover skate spots, events &amp; the community.</p>
              </div>
              {/* Desktop-only: grab the mobile app via Zapstore */}
              <a
                href="https://zapstore.dev/apps/org.skatespots.app"
                target="_blank"
                rel="noopener noreferrer"
                className="hidden md:inline-flex flex-shrink-0 items-center gap-1.5 px-3 py-1.5 rounded-full border-2 border-[#ccff00]/50 text-[#ccff00] text-xs font-black uppercase tracking-wide hover:bg-[#ccff00]/10 active:scale-95 transition-all"
              >
                <Smartphone className="h-3.5 w-3.5" />
                Get on Zapstore
              </a>
              <Link
                to="/onboarding"
                className="flex-shrink-0 px-3 py-1.5 rounded-full bg-[#ccff00] text-black text-xs font-black uppercase tracking-wide hover:bg-[#ccff00]/90 active:scale-95 transition-transform"
              >
                Get Started
              </Link>
              <button
                onClick={() => setWelcomeDismissed(true)}
                className="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-full hover:bg-white/10 text-white/40 hover:text-white transition-colors"
                aria-label="Dismiss"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            </div>
          </div>
        )}

        {/* ── Toolbar ──
            Mobile: floats OVER the map (absolute) so the map fills the whole
            screen; the gradient fades into the map and the transparent wrapper
            passes touches through to it. Desktop keeps the in-flow bar. With the
            welcome banner present it drops into flow so it can't cover it. */}
        <div className={cn(
          'pointer-events-none inset-x-0 top-0 z-[1000]',
          showWelcomeBanner
            ? 'relative border-b border-white/8 bg-black/95'
            : 'absolute bg-gradient-to-b from-black/85 via-black/55 to-transparent pb-5',
          'md:static md:z-auto md:border-b md:border-white/8 md:bg-black/95 md:pb-0 md:backdrop-blur',
        )}>
          <div className="pointer-events-auto px-3 py-2">
            {/* Single row: search pill + view toggle + filter button */}
            <div className="flex items-center gap-2">
              {/* Search pill */}
              <div className="relative flex-1 min-w-0">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-500 pointer-events-none" />
                <Input
                  placeholder={t('mapPage.searchPlaceholder')}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9 h-9 bg-black/50 backdrop-blur-md border-white/15 md:bg-white/5 md:border-white/10 text-white placeholder:text-gray-500 rounded-full text-sm focus:border-[#ff0040]/50 focus-visible:ring-0 focus-visible:ring-offset-0 transition-all"
                />
                {searchQuery && (
                  <button onClick={() => setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white">
                    <X className="h-3.5 w-3.5" />
                  </button>
                )}
              </div>

              {/* View toggle — compact pill */}
              <div className="flex items-center rounded-full border border-white/15 bg-black/50 backdrop-blur-md md:bg-white/4 md:border-white/10 p-0.5 flex-shrink-0">
                <button
                  className={cn('h-8 w-8 rounded-full flex items-center justify-center transition-all touch-manipulation active:scale-90',
                    viewMode === 'map' ? 'bg-[#ff0040] shadow-lg shadow-[#ff0040]/30' : 'text-gray-500 hover:text-gray-300')}
                  onClick={() => setViewMode('map')}
                  aria-label="Map view"
                >
                  <Map className="h-3.5 w-3.5" />
                </button>
                <button
                  className={cn('h-8 w-8 rounded-full flex items-center justify-center transition-all touch-manipulation active:scale-90',
                    viewMode === 'list' ? 'bg-[#ff0040] shadow-lg shadow-[#ff0040]/30' : 'text-gray-500 hover:text-gray-300')}
                  onClick={() => setViewMode('list')}
                  aria-label="List view"
                >
                  <List className="h-3.5 w-3.5" />
                </button>
              </div>

              {/* Filter button — mobile */}
              <Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
                <SheetTrigger asChild>
                  <button
                    className={cn(
                      'relative h-9 w-9 rounded-full flex items-center justify-center flex-shrink-0 border transition-all touch-manipulation active:scale-90 md:hidden',
                      totalActiveFilters > 0
                        ? 'bg-[#ff0040]/25 border-[#ff0040]/60 text-[#ff0040]'
                        : 'bg-black/50 backdrop-blur-md border-white/15 text-gray-300 md:bg-white/5 md:border-white/10 md:text-gray-400 hover:text-gray-200 hover:border-white/20'
                    )}
                    aria-label="Filters"
                  >
                    <SlidersHorizontal className="h-3.5 w-3.5" />
                    {totalActiveFilters > 0 && (
                      <span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1 text-[9px] font-black bg-[#ff0040] text-white rounded-full flex items-center justify-center leading-none">
                        {totalActiveFilters}
                      </span>
                    )}
                  </button>
                </SheetTrigger>
                <SheetContent side="bottom" className="h-[82vh] max-h-[680px] rounded-t-2xl px-4 flex flex-col">
                  <SheetHeader className="pb-2 flex-shrink-0">
                    <SheetTitle className="flex items-center justify-between text-base">
                      <span>Filters</span>
                      {hasActiveFilters && (
                        <Button
                          variant="ghost"
                          size="sm"
                          className="text-red-400 hover:text-red-300 h-8 px-2"
                          onClick={() => {
                            clearFilters();
                          }}
                        >
                          <X className="h-3 w-3 mr-1" />
                          Clear
                        </Button>
                      )}
                    </SheetTitle>
                  </SheetHeader>
                  
                  <div className="space-y-4 overflow-y-auto flex-1 min-h-0 -mx-4 px-4 pb-2 scroll-container">
                    {/* Layer toggles */}
                    <div>
                      <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Show on Map</h3>
                      <div className="grid grid-cols-3 gap-1.5">
                        <Button
                          variant={showSpots ? 'default' : 'outline'}
                          size="sm"
                          className={cn(
                            'justify-center gap-1 h-9 text-xs px-2',
                            showSpots ? 'bg-red-500 hover:bg-red-600' : ''
                          )}
                          onClick={() => setShowSpots(!showSpots)}
                        >
                          🛹 Spots
                        </Button>
                        <Button
                          variant={showShops ? 'default' : 'outline'}
                          size="sm"
                          className={cn(
                            'justify-center gap-1 h-9 text-xs px-2',
                            showShops ? 'bg-purple-600 hover:bg-purple-700' : ''
                          )}
                          onClick={() => setShowShops(!showShops)}
                        >
                          🏪 Shops
                        </Button>
                        <Button
                          variant={showGear ? 'default' : 'outline'}
                          size="sm"
                          className={cn(
                            'justify-center gap-1 h-9 text-xs px-2',
                            showGear ? 'bg-orange-500 hover:bg-orange-600' : ''
                          )}
                          onClick={() => setShowGear(!showGear)}
                        >
                          🛒 Gear
                        </Button>
                        <Button
                          variant={showTours ? 'default' : 'outline'}
                          size="sm"
                          className={cn(
                            'justify-center gap-1 h-9 text-xs px-2',
                            showTours ? 'bg-cyan-500 hover:bg-cyan-600' : ''
                          )}
                          onClick={() => setShowTours(!showTours)}
                        >
                          🗺️ Tours
                        </Button>
                        <Button
                          variant={showEvents ? 'default' : 'outline'}
                          size="sm"
                          className={cn(
                            'justify-center gap-1 h-9 text-xs px-2',
                            showEvents ? 'bg-[#ccff00] text-black hover:bg-[#ccff00]/90' : ''
                          )}
                          onClick={() => setShowEvents(!showEvents)}
                        >
                          📅 Events
                        </Button>
                        <Button
                          variant={showCrews ? 'default' : 'outline'}
                          size="sm"
                          className={cn(
                            'justify-center gap-1 h-9 text-xs px-2',
                            showCrews ? 'bg-teal-500 hover:bg-teal-600' : ''
                          )}
                          onClick={() => setShowCrews(!showCrews)}
                        >
                          🤘 Crews
                        </Button>
                        <Button
                          variant={showBtcMap ? 'default' : 'outline'}
                          size="sm"
                          className={cn(
                            'justify-center gap-1 h-9 text-xs px-2 col-span-2',
                            showBtcMap ? 'bg-[#f7931a] hover:bg-[#f7931a]/90' : 'border-[#f7931a]/50 text-[#f7931a]'
                          )}
                          onClick={() => setShowBtcMap(!showBtcMap)}
                        >
                          <Bitcoin className="h-3 w-3" /> Spedn
                        </Button>
                      </div>
                    </div>

                    {/* Spot categories */}
                    <div>
                      <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Spot Type</h3>
                      <div className="flex flex-wrap gap-1.5">
                        {Object.entries(SPOT_CATEGORIES).map(([key, cat]) => (
                          <Button
                            key={key}
                            variant={selectedCategories.includes(key) ? 'default' : 'outline'}
                            size="sm"
                            className={cn(
                              'gap-1 h-8 text-xs px-2',
                              selectedCategories.includes(key) 
                                ? 'bg-[#ff0040] hover:bg-[#ff0040]/90' 
                                : ''
                            )}
                            onClick={() => toggleCategory(key)}
                          >
                            {cat.emoji} {cat.label}
                          </Button>
                        ))}
                      </div>
                    </div>

                    {/* Sort & Trust */}
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Sort By</h3>
                        <SortDropdown
                          value={sortBy}
                          onChange={setSortBy}
                          contentType="spots"
                          showProximity={!!userLocation}
                        />
                      </div>
                      <div>
                        <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Trust Level</h3>
                        <TrustFilter
                          value={trustFilter}
                          onChange={setTrustFilter}
                          compact
                        />
                      </div>
                    </div>

                    {/* Weather toggle */}
                    <div>
                      <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Weather</h3>
                      <WeatherToggle
                        enabled={weatherEnabled}
                        onToggle={() => {
                          const newWeatherEnabled = !weatherEnabled;
                          setWeatherEnabled(newWeatherEnabled);
                          if (!newWeatherEnabled) {
                            setWeatherFilter('all');
                          }
                        }}
                      />
                    </div>

                    {/* Quick actions for logged in users.
                        Note: Add Spot / Shop / Event / Gear / Tour live in the
                        map's "Add" speed-dial FAB — here we only surface the
                        shortcuts that aren't already on the map (Marketplace,
                        Stash) to avoid duplication. */}
                    {user && (
                      <div>
                        <h3 className="text-xs font-bold text-muted-foreground mb-2 uppercase tracking-wide">Quick Actions</h3>
                        <div className="grid grid-cols-2 gap-1.5">
                           <Link to="/marketplace" onClick={() => setMobileFiltersOpen(false)}>
                             <Button size="sm" variant="outline" className="w-full gap-1 border-orange-500/50 text-orange-400 font-bold h-9 text-xs">
                               <ArrowRightLeft className="h-3 w-3" />
                               Buy/Sell Gear
                             </Button>
                           </Link>
                          <Link to="/stash" onClick={() => setMobileFiltersOpen(false)}>
                            <Button size="sm" variant="outline" className="w-full gap-1 border-[#ff6600]/50 text-[#ff6600] font-bold h-9 text-xs">
                              <Backpack className="h-3 w-3" />
                              Stash
                            </Button>
                          </Link>
                        </div>
                      </div>
                    )}
                  </div>

                  {/* Show Results button — sticks to bottom, never overlaps content */}
                  <div className="flex-shrink-0 pt-3 pb-2 border-t safe-area-bottom bg-background">
                    <Button 
                      className="w-full h-12 font-bold text-base"
                      onClick={() => setMobileFiltersOpen(false)}
                    >
                      Show Results
                    </Button>
                  </div>
                </SheetContent>
              </Sheet>

              {/* Desktop: Weather toggle */}
              <div className="hidden md:block">
                <WeatherToggle
                  enabled={weatherEnabled}
                  onToggle={() => {
                    const newWeatherEnabled = !weatherEnabled;
                    setWeatherEnabled(newWeatherEnabled);
                    if (!newWeatherEnabled) {
                      setWeatherFilter('all');
                    }
                  }}
                />
              </div>
            </div>

            {/* Row 2: Entity toggles + Sort/Filter + Add buttons (DESKTOP ONLY) */}
            <div className="hidden md:flex items-center gap-2 mt-2 overflow-x-auto scrollbar-hide -mx-3 px-3 sm:mx-0 sm:px-0">
              {/* Layers — grouped popover (matches the mobile Layers control).
                  Replaces four separate entity-toggle buttons to declutter the
                  desktop toolbar while keeping the entity color language. */}
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    size="sm"
                    className="gap-1.5 font-bold text-xs px-2.5 h-8 flex-shrink-0 border-gray-700 hover:border-white/30 touch-manipulation active:scale-95"
                  >
                    <Layers className="h-3.5 w-3.5" />
                    <span>Layers</span>
                    <span className="ml-0.5 min-w-[18px] h-[18px] px-1 text-[10px] font-black bg-[#ccff00] text-black rounded-full flex items-center justify-center leading-none">
                      {mobileLayerCount}
                    </span>
                  </Button>
                </PopoverTrigger>
                <PopoverContent align="start" className="w-52 p-2 bg-black/95 border-white/15 backdrop-blur-xl">
                  <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-1.5 pb-1.5">Show on Map</p>
                  <div className="space-y-0.5">
                    {[
                      { key: 'spots',  label: 'Spots',  dot: '#ff0040', active: showSpots,  toggle: () => setShowSpots(v => !v) },
                      { key: 'shops',  label: 'Shops',  dot: '#9333ea', active: showShops,  toggle: () => setShowShops(v => !v) },
                      { key: 'gear',   label: 'Gear',   dot: '#f97316', active: showGear,   toggle: () => setShowGear(v => !v) },
                      { key: 'tours',  label: 'Tours',  dot: '#06b6d4', active: showTours,  toggle: () => setShowTours(v => !v) },
                      { key: 'events', label: 'Events', dot: '#ccff00', active: showEvents, toggle: () => setShowEvents(v => !v) },
                      { key: 'crews',  label: 'Crews',  dot: '#14b8a6', active: showCrews,  toggle: () => setShowCrews(v => !v) },
                    ].map(({ key, label, dot, active, toggle }) => (
                      <button
                        key={key}
                        onClick={toggle}
                        className={cn(
                          'w-full flex items-center gap-2.5 px-1.5 py-2 rounded-lg text-sm font-semibold transition-colors',
                          active ? 'text-white hover:bg-white/5' : 'text-gray-500 hover:bg-white/5'
                        )}
                      >
                        <span
                          className={cn('w-2.5 h-2.5 rounded-full flex-shrink-0 transition-opacity', active ? 'opacity-100' : 'opacity-30')}
                          style={{ backgroundColor: dot }}
                        />
                        <span className="flex-1 text-left">{label}</span>
                        <span
                          className={cn(
                            'w-4 h-4 rounded flex items-center justify-center flex-shrink-0 border transition-colors',
                            active ? 'bg-[#ccff00] border-[#ccff00]' : 'border-white/20'
                          )}
                        >
                          {active && <Check className="h-3 w-3 text-black" strokeWidth={3} />}
                        </span>
                      </button>
                    ))}
                  </div>
                </PopoverContent>
              </Popover>
              
              {/* BTC Map toggle */}
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant={showBtcMap ? 'default' : 'outline'}
                    size="sm"
                    className={cn(
                      'gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95',
                      showBtcMap ? 'bg-[#f7931a] hover:bg-[#f7931a]/90 text-white' : 'border-[#f7931a]/50 text-[#f7931a] hover:bg-[#f7931a]/10'
                    )}
                    onClick={() => setShowBtcMap(!showBtcMap)}
                  >
                    <Bitcoin className="h-3.5 w-3.5" />
                    <span className="hidden xs:inline">SPEDN ✊</span>
                    {btcMapLoading && showBtcMap && (
                      <span className="ml-1 h-3 w-3 rounded-full border-2 border-white/30 border-t-white animate-spin" />
                    )}
                  </Button>
                </TooltipTrigger>
                <TooltipContent side="bottom" className="max-w-[200px]">
                  <p className="text-xs">
                    {showBtcMap 
                      ? `Showing ${btcMapPlaces?.length || 0} places where you can Spedn your sats nearby`
                      : 'Show places where you can Spedn your sats (via BTC Map)'
                    }
                  </p>
                </TooltipContent>
              </Tooltip>

              {/* Stash drawer */}
              <Sheet>
                <SheetTrigger asChild>
                  <Button
                    variant="outline"
                    size="sm"
                    className="gap-1 font-bold text-xs px-2.5 h-8 flex-shrink-0 touch-manipulation active:scale-95 border-[#ff6600]/50 text-[#ff6600] hover:bg-[#ff6600]/10 hover:border-[#ff6600]"
                  >
                    <Backpack className="h-3.5 w-3.5" />
                    <span className="hidden xs:inline">Stash</span>
                  </Button>
                </SheetTrigger>
                <SheetContent side="right" className="w-[340px] sm:w-[400px] p-0 bg-black/95 border-l-2 border-[#ff6600]/30">
                  <SheetHeader className="p-4 pb-0">
                    <SheetTitle className="flex items-center gap-2 text-white">
                      <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#ff6600] to-[#ff0040] flex items-center justify-center">
                        <Backpack className="h-4 w-4 text-white" />
                      </div>
                      My Stash
                      <Badge variant="outline" className="ml-auto border-green-500/50 text-green-400 text-[10px]">
                        <Shield className="h-2.5 w-2.5 mr-1" />
                        Encrypted
                      </Badge>
                    </SheetTitle>
                  </SheetHeader>
                  <StashDrawer />
                </SheetContent>
              </Sheet>

              {/* Separator */}
              <div className="w-px h-6 bg-gray-700 flex-shrink-0 hidden sm:block" />

              {/* Sort and Filter */}
              <SortDropdown
                value={sortBy}
                onChange={setSortBy}
                contentType="spots"
                showProximity={!!userLocation}
              />
              <TrustFilter
                value={trustFilter}
                onChange={setTrustFilter}
                compact
              />

              {/* Clear filters */}
              {hasActiveFilters && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-red-400 hover:text-red-300 hover:bg-red-500/10 h-8 w-8 p-0 flex-shrink-0 touch-manipulation active:scale-95"
                  onClick={clearFilters}
                >
                  <X className="h-4 w-4" />
                </Button>
              )}

              {/* Spacer */}
              <div className="flex-1 min-w-2" />

              {/* Local Chat - live geohash channel for wherever the map is centered.
                  Mobile only: on desktop the toolbar is dense and DMs/crew chat cover
                  messaging, so we hide the standalone Local Chat trigger at md+. */}
              <Sheet>
                <SheetTrigger asChild>
                  <Button
                    size="sm"
                    variant="outline"
                    className="md:hidden gap-1.5 border-2 border-purple-500/50 hover:bg-purple-500/10 text-purple-400 font-bold h-8 px-2 flex-shrink-0"
                  >
                    <MessageCircle className="h-4 w-4" />
                  </Button>
                </SheetTrigger>
                <SheetContent
                  side="right"
                  className="w-full sm:w-[420px] p-0 flex flex-col"
                >
                  <SheetHeader className="p-4 pb-2">
                    <SheetTitle className="flex items-center gap-2">
                      <MessageCircle className="h-5 w-5 text-purple-400" />
                      Local Chat
                    </SheetTitle>
                    <p className="text-xs text-muted-foreground text-left">
                      Live chat for wherever the map is centered. Pick how wide the channel reaches.
                    </p>
                  </SheetHeader>
                  <div className="flex-1 min-h-0 p-4 pt-0">
                    <SpotChat
                      key={ngeohash.encode(mapCenter.lat, mapCenter.lon, 8)}
                      geohash={ngeohash.encode(mapCenter.lat, mapCenter.lon, 8)}
                      showPrecisionToggle
                      defaultPrecision="neighborhood"
                      className="h-full"
                    />
                  </div>
                </SheetContent>
              </Sheet>

              {/* Add buttons - icons only on mobile */}
              {user ? (
                <>
                  {/* Primary action: add a spot (this is a map, after all) */}
                  <Link to="/create-spot" className="flex-shrink-0">
                    <Button size="sm" className="gap-1.5 bg-[#ff0040] hover:bg-[#ff0040]/90 border-2 border-[#ff0040] font-bold h-8 px-2 sm:px-3">
                      <Plus className="h-4 w-4" />
                      <span className="hidden md:inline">{t('home.addSpot')}</span>
                    </Button>
                  </Link>
                  {/* Secondary add actions consolidated into one menu to de-clutter */}
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        size="sm"
                        variant="outline"
                        className="flex-shrink-0 gap-1 border-2 border-gray-700 hover:border-[#ccff00]/50 font-bold h-8 px-2 sm:px-3"
                      >
                        <Plus className="h-4 w-4" />
                        <span className="hidden md:inline">More</span>
                        <ChevronDown className="h-3.5 w-3.5 opacity-70" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent align="end" className="w-52 p-1.5">
                      <Link to="/create-shop" className="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium hover:bg-[#ccff00]/10 text-[#ccff00] transition-colors">
                        <Store className="h-4 w-4" /> {t('shops.addShop')}
                      </Link>
                      <Link to="/marketplace" className="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium hover:bg-orange-500/10 text-orange-400 transition-colors">
                        <ShoppingBag className="h-4 w-4" /> Buy/Sell Gear
                      </Link>
                      <Link to="/create-tour" className="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium hover:bg-cyan-500/10 text-cyan-400 transition-colors">
                        <Route className="h-4 w-4" /> Offer Tour
                      </Link>
                    </PopoverContent>
                  </Popover>
                </>
              ) : (
                <Badge variant="outline" className="border-yellow-500/50 text-yellow-400 text-[10px] px-2 flex-shrink-0">
                  🔒 {t('errors.loginRequired')}
                </Badge>
              )}
            </div>

            {/* Row 3: Category filters (DESKTOP ONLY) */}
            <div className="hidden md:flex items-center gap-1.5 mt-2 overflow-x-auto scrollbar-hide -mx-3 px-3 sm:mx-0 sm:px-0 pb-0.5">
              {Object.entries(SPOT_CATEGORIES).map(([key, cat]) => (
                <Button
                  key={key}
                  variant={selectedCategories.includes(key) ? 'default' : 'outline'}
                  size="sm"
                  className={cn(
                    'gap-1 font-bold text-xs flex-shrink-0 px-2.5 h-8 touch-manipulation active:scale-95',
                    selectedCategories.includes(key) 
                      ? 'bg-[#ff0040] hover:bg-[#ff0040]/90' 
                      : 'border-gray-700 hover:border-[#ff0040]/50'
                  )}
                  onClick={() => toggleCategory(key)}
                >
                  {cat.emoji} {cat.label}
                </Button>
              ))}
            </div>
          </div>
        </div>

        {/* Main Content */}
        {/* `isolate` creates a stacking context so the map's internal z-indexes
            (Leaflet panes, our overlays up to z-[2000]) stay INSIDE the map. Without
            it they competed with the root and the © OpenStreetMap attribution
            (z-999) painted on top of the Sasquatch panel (z-40). */}
        <div className="relative isolate flex-1">
          {viewMode === 'map' ? (
            <>
              <Suspense fallback={
                <div className="h-full bg-black/20 flex items-center justify-center">
                  <div className="flex items-center gap-3">
                    <div className="w-6 h-6 border-2 border-[#ff0040] border-t-transparent rounded-full animate-spin" />
                    <span className="text-sm text-white font-bold">Loading map...</span>
                  </div>
                </div>
              }>
                <SpotMap
                  spots={mapSpots}
                  center={initialCenter}
                  zoom={initialZoom}
                  marketplaceItems={marketplaceItems || []}
                  tours={tours || []}
                  btcMapPlaces={btcMapPlaces || []}
                  selectedSpot={selectedSpot}
                  onSpotClick={setSelectedSpot}
                  onMapClick={handleMapClick}
                  onMapMove={setMapCenter}
                  enableClickToAdd={!!user}
                  className="h-full ss-map-floating-toolbar"
                  weatherEnabled={weatherEnabled}
                  weatherData={weatherData}
                  events={upcomingEvents || []}
                  crews={crews || []}
                  showSpots={showSpots}
                  showShops={showShops}
                  showGear={showGear}
                  showTours={showTours}
                  showEvents={showEvents}
                  showCrews={showCrews}
                  showBtcMap={showBtcMap}
                  flyTo={flyTo}
                  userLocation={isMobile && userLocation ? { lat: userLocation.lat, lng: userLocation.lon } : null}
                />
              </Suspense>
              {/* Loading indicator — a slim, honest top bar. The map stays
                  visible underneath and spots stream in; we NEVER cover the map
                  with fake placeholder pins. An animated sweep sits on top of a
                  faint track so it reads as "working", plus a small labeled pill
                  during a genuine cold start (no markers yet) so the user knows
                  we're talking to the relays. */}
              {isLoading && (
                <>
                  <div className="absolute top-0 left-0 right-0 z-[1001] h-[3px] overflow-hidden bg-white/5">
                    <div className="ss-loadbar h-full w-1/3 bg-gradient-to-r from-[#ff0040] via-[#ff6600] to-[#ccff00]" />
                  </div>
                  {mapSpots.length === 0 && (
                    <div className="absolute top-[4.5rem] left-1/2 -translate-x-1/2 z-[1001] md:top-3">
                      <div className="flex items-center gap-2 rounded-full bg-black/60 px-3.5 py-1.5 backdrop-blur-md ring-1 ring-white/10 shadow-lg">
                        <span className="h-3.5 w-3.5 rounded-full border-2 border-[#ccff00]/30 border-t-[#ccff00] animate-spin" />
                        <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70">
                          Loading spots
                        </span>
                      </div>
                    </div>
                  )}
                </>
              )}



              {/* Offline / relay-down banner. The map keeps showing the
                  last-known spots from the local cache — this just says so
                  honestly, and offers a retry. Shown only once we know the relay
                  is unreachable, so a slow cold start never flashes it. */}
              {!isLoading && deviceOffline && !offlineBannerDismissed && allLocations.length > 0 && (
                <div className="absolute top-[4.5rem] left-1/2 z-[1002] -translate-x-1/2 md:top-3">
                  <div className="pointer-events-auto flex items-center gap-2 rounded-full border border-amber-400/30 bg-black/75 px-3 py-1.5 shadow-lg backdrop-blur-md">
                    <WifiOff className="h-3.5 w-3.5 text-amber-400" />
                    <span className="font-mono text-[10px] uppercase tracking-[0.16em] text-amber-200/90">
                      Offline · showing saved spots
                    </span>
                    <button
                      type="button"
                      onClick={() => {
                        refetchSpots();
                        relay.recheck();
                      }}
                      className="ml-0.5 rounded-full p-1 text-amber-200/80 transition-colors hover:bg-white/10 hover:text-white"
                      aria-label="Try again"
                    >
                      <RefreshCw className="h-3.5 w-3.5" />
                    </button>
                    <button
                      type="button"
                      onClick={() => setOfflineBannerDismissed(true)}
                      className="rounded-full p-1 text-amber-200/60 transition-colors hover:bg-white/10 hover:text-white"
                      aria-label="Dismiss"
                    >
                      <X className="h-3.5 w-3.5" />
                    </button>
                  </div>
                </div>
              )}

              {/* Empty state — the active filters hid everything. Without this
                  the map just looks blank/unloaded. Only shown when the
                  spot/shop layers are on (other layers have their own markers). */}
              {!isLoading && (showSpots || showShops) && filteredSpots.length === 0 && allLocations.length > 0 && (
                <div className="pointer-events-none absolute inset-0 z-[1001] flex items-center justify-center px-4">
                  <div className="pointer-events-auto max-w-xs rounded-2xl border border-white/10 bg-black/85 p-5 text-center shadow-2xl backdrop-blur-md">
                    <p className="font-black uppercase tracking-wide text-white">No spots match</p>
                    <p className="mt-1 text-xs text-gray-400">Try a different search or clear your filters.</p>
                    <Button size="sm" className="mt-3" onClick={clearFilters}>
                      Clear filters
                    </Button>
                  </div>
                </div>
              )}

              {/* Offline with nothing cached yet — don't pretend the map is
                  empty ("be the first to map your park"): say what's actually
                  wrong and offer a retry. */}
              {!isLoading && relayUnreachable && (showSpots || showShops) && allLocations.length === 0 && (
                <div className="pointer-events-none absolute inset-0 z-[1001] flex items-center justify-center px-4">
                  <div className="pointer-events-auto max-w-sm rounded-2xl border border-amber-400/25 bg-black/85 p-6 text-center shadow-2xl backdrop-blur-md">
                    <WifiOff className="mx-auto h-7 w-7 text-amber-400" />
                    <p className="mt-2 font-black uppercase tracking-wide text-white">
                      Can't reach the relays
                    </p>
                    <p className="mt-1 text-xs leading-relaxed text-gray-400">
                      {online
                        ? "You're online, but the community relay isn't answering right now."
                        : "You're offline."}{' '}
                      Spots you've already seen are saved on this device and will show here.
                    </p>
                    <Button
                      size="sm"
                      variant="outline"
                      className="mt-4 gap-2 border-white/20"
                      onClick={() => {
                        refetchSpots();
                        relay.recheck();
                      }}
                    >
                      <RefreshCw className="h-4 w-4" />
                      Try again
                    </Button>
                  </div>
                </div>
              )}

              {/* Nothing mapped here AT ALL — the honest empty map. This is the
                  density problem, not a filter problem, so the fix on offer is
                  "add the first one" rather than "clear your filters". */}
              {!isLoading && !relayUnreachable && (showSpots || showShops) && allLocations.length === 0 && (
                <div className="pointer-events-none absolute inset-0 z-[1001] flex items-center justify-center px-4">
                  <div className="pointer-events-auto max-w-sm rounded-2xl border-2 border-[#ccff00]/25 bg-black/85 p-6 text-center shadow-2xl backdrop-blur-md">
                    <p className="text-2xl">🛹</p>
                    <p className="mt-2 font-black uppercase tracking-wide text-white">
                      No spots mapped yet
                    </p>
                    <p className="mt-1 text-xs leading-relaxed text-gray-400">
                      Be the first to map your park — it takes a minute, it's yours, and the next
                      skater who rolls through will thank you.
                    </p>
                    <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-center">
                      <Link to="/create-spot">
                        <Button
                          size="sm"
                          className="w-full gap-2 bg-[#ccff00] font-black uppercase text-black hover:bg-[#ccff00]/90"
                        >
                          <Plus className="h-4 w-4" />
                          Add the first spot
                        </Button>
                      </Link>
                      <Button size="sm" variant="outline" className="gap-2 border-white/20" onClick={handleNearMe} disabled={nearMeLoading}>
                        <LocateFixed className="h-4 w-4" />
                        {nearMeLoading ? 'Locating…' : 'Find spots near me'}
                      </Button>
                    </div>
                  </div>
                </div>
              )}

              {/* Map attribution — bottom-left, sits ABOVE the mobile bottom
                  nav so it never covers the Shops & Spots buttons. Tiny + subtle. */}
              <div
                className="absolute left-1.5 z-[999] pointer-events-none bottom-[calc(5rem+env(safe-area-inset-bottom,0px)+0.25rem)] md:bottom-1.5"
              >
                <div className="bg-black/55 backdrop-blur-sm px-1.5 py-0.5 rounded text-[9px] font-medium text-gray-200/90 leading-none pointer-events-auto">
                  <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">© OpenStreetMap</a>
                  {showBtcMap && (
                    <>{' · '}<a href="https://btcmap.org" target="_blank" rel="noopener noreferrer" className="text-[#f7931a] hover:text-[#ffb04d] transition-colors">BTC Map</a></>
                  )}
                </div>
              </div>

              {/* Location permission help dialog */}
              {showLocationHelp && (
                <div className="absolute inset-0 z-[2000] flex items-end justify-center pb-[calc(5rem+env(safe-area-inset-bottom,0px))] md:items-center md:pb-0 px-4">
                  <div
                    className="absolute inset-0 bg-black/60 backdrop-blur-sm"
                    onClick={() => setShowLocationHelp(false)}
                  />
                  <div className="relative w-full max-w-sm rounded-2xl bg-[#111] border border-red-500/30 shadow-2xl p-5 space-y-4">
                    <div className="flex items-start gap-3">
                      <div className="w-10 h-10 rounded-xl bg-red-500/15 flex items-center justify-center flex-shrink-0">
                        <LocateOff className="h-5 w-5 text-red-400" />
                      </div>
                      <div>
                        <p className="text-sm font-black text-white uppercase tracking-wide">Location Blocked</p>
                        <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
                          Your browser has blocked location access for this site. Here's how to re-enable it:
                        </p>
                      </div>
                    </div>
                    <div className="rounded-xl border border-white/8 bg-white/[0.03] divide-y divide-white/5 overflow-hidden">
                      {[
                        { platform: '📱 Android Chrome', steps: 'Tap the lock icon in the address bar → Site settings → Location → Allow' },
                        { platform: '🍎 iOS Safari', steps: 'Settings app → Safari → Location → Allow (or tap the "AA" button in Safari\'s address bar)' },
                        { platform: '💻 Desktop Chrome', steps: 'Click the lock icon → Site settings → Location → Allow' },
                        { platform: '🦊 Firefox', steps: 'Click the lock icon → Connection secure → More info → Permissions → Access your location → Allow' },
                      ].map(({ platform, steps }) => (
                        <div key={platform} className="px-3 py-2.5">
                          <p className="text-xs font-bold text-white mb-0.5">{platform}</p>
                          <p className="text-[11px] text-muted-foreground leading-snug">{steps}</p>
                        </div>
                      ))}
                    </div>
                    <button
                      onClick={() => {
                        setShowLocationHelp(false);
                        setNearMeError(null);
                      }}
                      className="w-full py-3 rounded-xl bg-white/8 hover:bg-white/12 border border-white/10 text-sm font-bold text-white transition-all active:scale-[0.98]"
                    >
                      Got it
                    </button>
                  </div>
                </div>
              )}

              {/* ── Mobile map controls (redesigned) ──────────────────────────
                  Right edge holds just TWO small controls: Near Me + Layers.
                  Primary "Add" action is a speed-dial FAB (bottom-right). This
                  replaces the old 12-item vertical strip. */}
              <div
                className={cn(
                  "fixed right-3 z-[1000] md:hidden flex flex-col items-center gap-2 transition-all duration-200",
                  mobileFiltersOpen || selectedSpot || addDialOpen ? "opacity-0 pointer-events-none translate-x-2" : "opacity-100 translate-x-0"
                )}
                style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 6.5rem)' }}
              >
                {/* Near Me */}
                <button
                  onClick={() => {
                    // On native a denial is an OS permission the user can grant
                    // and retry; only the web needs the browser re-enable sheet.
                    if (nearMeError === 'denied' && !isNativeGeolocation()) {
                      setShowLocationHelp(true);
                      return;
                    }
                    handleNearMe();
                  }}
                  disabled={nearMeLoading}
                  className={cn(
                    'h-11 w-11 rounded-full flex items-center justify-center shadow-lg border backdrop-blur transition-all touch-manipulation active:scale-90',
                    nearMeError === 'denied'
                      ? 'bg-red-900/80 border-red-500/30'
                      : 'bg-black/70 border-white/15 hover:border-white/30'
                  )}
                  aria-label="Find spots near me"
                >
                  {nearMeLoading ? (
                    <span className="h-4 w-4 rounded-full border-2 border-white/20 border-t-white animate-spin" />
                  ) : nearMeError === 'denied' ? (
                    <LocateOff className="h-4 w-4 text-red-400" />
                  ) : (
                    <LocateFixed className="h-4 w-4 text-[#ccff00]" />
                  )}
                </button>

                {/* Layers popover — labelled toggles with color dots */}
                <Popover open={layersOpen} onOpenChange={setLayersOpen}>
                  <PopoverTrigger asChild>
                    <button
                      className={cn(
                        'relative h-11 w-11 rounded-full flex items-center justify-center shadow-lg border backdrop-blur transition-all touch-manipulation active:scale-90',
                        layersOpen
                          ? 'bg-[#ff0040]/20 border-[#ff0040]/60'
                          : 'bg-black/70 border-white/15 hover:border-white/30'
                      )}
                      aria-label="Map layers"
                    >
                      <Layers className={cn('h-4 w-4', layersOpen ? 'text-[#ff0040]' : 'text-gray-200')} />
                      {mobileLayerCount < totalPrimaryLayers && (
                        <span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 text-[9px] font-black bg-[#ccff00] text-black rounded-full flex items-center justify-center leading-none border-2 border-black">
                          {mobileLayerCount}
                        </span>
                      )}
                    </button>
                  </PopoverTrigger>
                  <PopoverContent
                    side="left"
                    align="end"
                    className="w-52 p-2 bg-black/95 border-white/15 backdrop-blur-xl"
                  >
                    <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-1.5 pb-1.5">Show on Map</p>
                    <div className="space-y-0.5">
                      {[
                        { key: 'spots',  label: 'Spots',  dot: '#ff0040', active: showSpots,  toggle: () => setShowSpots(v => !v) },
                        { key: 'shops',  label: 'Shops',  dot: '#9333ea', active: showShops,  toggle: () => setShowShops(v => !v) },
                        { key: 'gear',   label: 'Gear',   dot: '#f97316', active: showGear,   toggle: () => setShowGear(v => !v) },
                        { key: 'tours',  label: 'Tours',  dot: '#06b6d4', active: showTours,  toggle: () => setShowTours(v => !v) },
                        { key: 'events', label: 'Events', dot: '#ccff00', active: showEvents, toggle: () => setShowEvents(v => !v) },
                        { key: 'crews',  label: 'Crews',  dot: '#14b8a6', active: showCrews,  toggle: () => setShowCrews(v => !v) },
                      ].map(({ key, label, dot, active, toggle }) => (
                        <button
                          key={key}
                          onClick={toggle}
                          className={cn(
                            'w-full flex items-center gap-2.5 px-1.5 py-2 rounded-lg text-sm font-semibold transition-colors touch-manipulation',
                            active ? 'text-white hover:bg-white/5' : 'text-gray-500 hover:bg-white/5'
                          )}
                        >
                          <span
                            className={cn('w-2.5 h-2.5 rounded-full flex-shrink-0 transition-opacity', active ? 'opacity-100' : 'opacity-30')}
                            style={{ backgroundColor: dot }}
                          />
                          <span className="flex-1 text-left">{label}</span>
                          <span
                            className={cn(
                              'w-4 h-4 rounded flex items-center justify-center flex-shrink-0 border transition-colors',
                              active ? 'bg-[#ccff00] border-[#ccff00]' : 'border-white/20'
                            )}
                          >
                            {active && <Check className="h-3 w-3 text-black" strokeWidth={3} />}
                          </span>
                        </button>
                      ))}
                    </div>
                  </PopoverContent>
                </Popover>
              </div>

              {/* ── Add speed-dial FAB (mobile, logged in) ──────────────────── */}
              {user && (
                <div
                  className={cn(
                    'fixed right-4 z-[1001] md:hidden flex flex-col items-end gap-2.5 transition-all duration-200',
                    mobileFiltersOpen || selectedSpot ? 'opacity-0 pointer-events-none' : 'opacity-100'
                  )}
                  style={{ bottom: 'calc(3.5rem + env(safe-area-inset-bottom, 0px) + 1rem)' }}
                >
                  {/* Fan-out actions */}
                  {addDialOpen && (
                    <>
                      {[
                        { label: 'Add Spot',   to: '/create-spot',    bg: 'bg-[#ff0040]', icon: <MapPin className="h-4 w-4 text-white" /> },
                        { label: 'Add Shop',   to: '/create-shop',    bg: 'bg-[#9333ea]', icon: <Store className="h-4 w-4 text-white" /> },
                        { label: 'Add Event',  to: '/create-event',   bg: 'bg-[#ccff00]', icon: <Calendar className="h-4 w-4 text-black" /> },
                        { label: 'Sell Gear',  to: '/create-listing', bg: 'bg-[#f97316]', icon: <ShoppingBag className="h-4 w-4 text-white" /> },
                        { label: 'Offer Tour', to: '/create-tour',    bg: 'bg-[#06b6d4]', icon: <Route className="h-4 w-4 text-white" /> },
                      ].map((a, i) => (
                        <Link
                          key={a.to}
                          to={a.to}
                          onClick={() => setAddDialOpen(false)}
                          className="flex items-center gap-2.5 animate-in fade-in slide-in-from-bottom-2 duration-200"
                          style={{ animationDelay: `${i * 40}ms` }}
                        >
                          <span className="px-2.5 py-1 rounded-lg bg-black/85 backdrop-blur text-white text-xs font-bold shadow-lg border border-white/10">
                            {a.label}
                          </span>
                          <span className={cn('h-11 w-11 rounded-full flex items-center justify-center shadow-lg', a.bg)}>
                            {a.icon}
                          </span>
                        </Link>
                      ))}
                    </>
                  )}

                  {/* Main FAB */}
                  <button
                    onClick={() => setAddDialOpen(v => !v)}
                    className={cn(
                      'h-14 w-14 rounded-full flex items-center justify-center shadow-2xl transition-all duration-300 touch-manipulation active:scale-90',
                      addDialOpen
                        ? 'bg-white rotate-45'
                        : 'bg-[#ff0040] shadow-[#ff0040]/40 hover:bg-[#ff0040]/90'
                    )}
                    aria-label={addDialOpen ? 'Close add menu' : 'Add spot, shop, event, gear, or tour'}
                  >
                    <Plus className={cn('h-7 w-7 transition-colors', addDialOpen ? 'text-black' : 'text-white')} strokeWidth={2.5} />
                  </button>
                </div>
              )}

              {/* Tap-catcher to close the speed-dial */}
              {addDialOpen && (
                <div
                  className="fixed inset-0 z-[1000] md:hidden"
                  onClick={() => setAddDialOpen(false)}
                />
              )}
            </>
          ) : (
            <div className="h-full overflow-auto">
              <div className="container px-4 py-6">
                {isLoading ? (
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    {Array.from({ length: 8 }).map((_, i) => (
                      <SpotCardSkeleton key={i} />
                    ))}
                  </div>
                ) : filteredSpots.length > 0 ? (
                  <>
                    <p className="text-sm text-muted-foreground mb-4">
                      {t('mapPage.locationsFound', { count: filteredSpots.length })}
                      {showSpots && !showShops && ` (${t('mapPage.spotsOnly')})`}
                      {!showSpots && showShops && ` (${t('mapPage.shopsOnly')})`}
                      {showSpots && showShops && ` (${t('mapPage.spotsAndShops')})`}
                    </p>
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 stagger-children">
                      {filteredSpots.map((spot) => (
                        <SpotCard
                          key={spot.id}
                          spot={spot}
                          status={spot.isShop ? null : getSpotStatus(spot.pubkey, spot.identifier)}
                        />
                      ))}
                    </div>
                  </>
                ) : (
                  <div className="text-center py-12">
                    <Map className="h-12 w-12 mx-auto mb-4 text-muted-foreground/50" />
                    <p className="text-muted-foreground mb-4">
                      {hasActiveFilters
                        ? t('mapPage.noSpotsMatch')
                        : t('mapPage.noSpotsYet')}
                    </p>
                    {hasActiveFilters ? (
                      <Button variant="outline" onClick={clearFilters}>
                        {t('common.clearFilters')}
                      </Button>
                    ) : (
                      user && (
                        <Link to="/create-spot">
                          <Button className="gap-2">
                            <Plus className="h-4 w-4" />
                            {t('mapPage.addFirstSpot')}
                          </Button>
                        </Link>
                      )
                    )}
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Spot Bottom Sheet — slides up when a marker is tapped, map stays visible */}
      <Sheet open={!!selectedSpot} onOpenChange={(open) => { if (!open) setSelectedSpot(null); }}>
        <SheetContent
          side="bottom"
          hideClose
          className="h-auto max-h-[55vh] rounded-t-2xl px-0 pb-0 bg-black/95 border-t border-white/10"
        >
          <SheetTitle className="sr-only">{selectedSpot?.title ?? 'Spot details'}</SheetTitle>
          {selectedSpot && (
            <SpotBottomSheet
              spot={selectedSpot}
              onClose={() => setSelectedSpot(null)}
              onDirections={(target) => {
                // Close the sheet first — the route dialog takes over.
                setSelectedSpot(null);
                setRouteTarget(target);
              }}
            />
          )}
        </SheetContent>
      </Sheet>

      {/* In-app route — page-level so it never stacks inside the spot Sheet. */}
      <RouteDialog
        open={!!routeTarget}
        onOpenChange={(open) => { if (!open) setRouteTarget(null); }}
        destination={routeTarget ? { lat: routeTarget.lat, lng: routeTarget.lng } : null}
        destinationLabel={routeTarget?.label ?? 'Spot'}
        onDestinationChange={(pick) => setRouteTarget({ lat: pick.lat, lng: pick.lng, label: pick.label })}
      />
    </>
  );
}