WFDASHDRIVER-APP/app/map/page.tsx

'use client';

import { useState, useEffect, useCallback, Suspense, Component } from 'react';
import { useRouter } from 'next/navigation';
import dynamic from 'next/dynamic';
import { OrderItem } from '@/lib/types';
import { useAuth } from '@/components/AuthProvider';
import BottomNav from '@/components/BottomNav';
import { getMyAssignedItems, getPoolItems, getProblemItems, isAuthenticated } from '@/lib/pocketbase';
import { getCached, setCached } from '@/lib/itemsCache';
import { cn } from '@/lib/utils';
import { RefreshCw, MapPin, AlertCircle, Package, Inbox, AlertTriangle } from 'lucide-react';

// Sync the map's dataset with the list page's selected tab via
// localStorage so a driver who flips to "Pool" on the list and then
// taps Map sees the same pool stops, not just their assigned list.
const MAP_TAB_KEY = '1driver_map_tab';
type MapTab = 'assigned' | 'collection_pool' | 'problem';

const CollectionMap = dynamic(() => import('@/components/CollectionMap'), {
  ssr: false,
  loading: () => (
    <div className="h-full flex items-center justify-center bg-[#f2f1ed]">
      <div className="flex flex-col items-center gap-3">
        <div className="w-8 h-8 border-[3px] border-[#f54e00] border-t-transparent rounded-full animate-spin" />
        <p className="text-sm text-[rgba(38,37,30,0.55)]">Loading map...</p>
      </div>
    </div>
  ),
});

class MapErrorBoundary extends Component<{ children: React.ReactNode }, { hasError: boolean; error: string }> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: '' };
  }
  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error: error.message };
  }
  render() {
    if (this.state.hasError) {
      return (
        <div className="h-full flex flex-col items-center justify-center bg-[#f2f1ed] p-4">
          <div className="w-16 h-16 bg-[#fbeaef] rounded-2xl flex items-center justify-center mb-4">
            <AlertCircle size={32} className="text-[#b3224a]" />
          </div>
          <p className="text-[#26251e] text-sm mb-4 text-center">Map failed to load.</p>
          <button onClick={() => this.setState({ hasError: false })} className="px-5 py-2.5 bg-[#f54e00] text-white rounded-xl text-sm font-medium active:bg-[#d44200]">
            Try Again
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

export default function MapPage() {
  const router = useRouter();
  const { isLoggedIn, isLoading: authLoading } = useAuth();
  // Seed from cache so bottom-nav → Map renders last-known stops
  // instantly. The re-fetch in the useEffect below updates the map
  // with fresh data when it lands, but the driver never sees an
  // empty map flash.
  const [items, setItems] = useState<OrderItem[]>(() => {
    if (typeof window === 'undefined') return [];
    return getCached('assigned') ?? [];
  });
  const [isLoading, setIsLoading] = useState<boolean>(items.length === 0);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [error, setError] = useState('');
  const [tab, setTab] = useState<MapTab>('assigned');

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const saved = window.localStorage.getItem(MAP_TAB_KEY);
      if (saved === 'assigned' || saved === 'collection_pool' || saved === 'problem') {
        setTab(saved);
      }
    }
  }, []);

  useEffect(() => {
    if (!authLoading && !isLoggedIn) router.push('/login/');
  }, [isLoggedIn, authLoading, router]);

  const loadItems = useCallback(async (showLoading = true) => {
    if (!isAuthenticated()) return;
    // Only show the loading skeleton on the first-ever load. After
    // that the cache guarantees we have something on screen, so
    // the re-fetch is silent.
    if (showLoading && items.length === 0) setIsLoading(true);
    setError('');
    try {
      let data: OrderItem[] = [];
      if (tab === 'assigned') data = await getMyAssignedItems();
      else if (tab === 'collection_pool') data = await getPoolItems();
      else data = await getProblemItems();
      setItems(data);
      setCached(tab, data);
    } catch (err) {
      console.error('Failed to load collections:', err);
      setError('Failed to load collections');
    } finally {
      setIsLoading(false);
      setIsRefreshing(false);
    }
  }, [tab, items.length]);

  useEffect(() => {
    if (typeof window !== 'undefined') window.localStorage.setItem(MAP_TAB_KEY, tab);
    // Seed from cache BEFORE the re-fetch lands — same pattern as
    // the list page, so tab/filter switches show last-known data
    // instantly instead of an empty map.
    const cached = getCached(tab);
    if (cached) setItems(cached);
    loadItems();
  }, [tab, loadItems]);

  const handleTabChange = (next: MapTab) => {
    setTab(next);
  };

  const handleNavigate = (lat: number, lng: number, name: string) => {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    const url = isIOS
      ? `maps://maps.apple.com/?q=${encodeURIComponent(name)}&ll=${lat},${lng}`
      : `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
    window.open(url, '_blank');
  };

  if (authLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#f2f1ed]">
        <div className="flex flex-col items-center gap-3">
          <div className="w-10 h-10 border-[3px] border-[#f54e00] border-t-transparent rounded-full animate-spin" />
          <p className="text-sm text-[rgba(38,37,30,0.55)]">Loading...</p>
        </div>
      </div>
    );
  }

  if (!isLoggedIn) return null;

  return (
    <div className="h-screen flex flex-col bg-[#f2f1ed]">
      <header className="bg-[#e6e5e0] text-[#26251e] safe-top z-40 border-b border-[rgba(38,37,30,0.1)] flex-shrink-0">
        <div className="brand-accent-top" aria-hidden="true" />
        <div className="px-4 pt-2 pb-3">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2.5 min-w-0">
              <div className="w-8 h-8 bg-[#ebeae5] rounded-xl flex items-center justify-center flex-shrink-0">
                <MapPin size={18} className="text-[#26251e]" />
              </div>
              <div className="min-w-0">
                <h1 className="text-lg font-bold leading-tight text-[#26251e]">Map</h1>
                <p className="text-[11px] text-[rgba(38,37,30,0.55)]">{items.length} stop{items.length !== 1 ? 's' : ''} on map</p>
              </div>
            </div>
            <button
              onClick={() => { setIsRefreshing(true); loadItems(false); }}
              disabled={isRefreshing}
              aria-label={isRefreshing ? 'Refreshing map' : 'Refresh map'}
              className="p-2.5 rounded-xl bg-[#ebeae5] active:bg-[#e1e0db] transition-all touch-manipulation flex-shrink-0"
            >
              <RefreshCw size={18} className={cn('text-[#26251e]', isRefreshing && 'animate-spin')} />
            </button>
          </div>

          {/* Tab switcher — same semantics as the list page so the map
              shows whatever scope the driver is currently working on. */}
          <div className="mt-2.5 flex items-center gap-1.5 overflow-x-auto no-scrollbar -mx-1" role="tablist" aria-label="Map scope">
            {([
              { key: 'assigned', label: 'My stops', Icon: Package },
              { key: 'collection_pool', label: 'Pool', Icon: Inbox },
              { key: 'problem', label: 'Problems', Icon: AlertTriangle },
            ] as const).map(({ key, label, Icon }) => {
              const active = tab === key;
              return (
                <button
                  key={key}
                  role="tab"
                  aria-selected={active}
                  onClick={() => handleTabChange(key)}
                  className={cn(
                    'inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-semibold transition-all touch-manipulation flex-shrink-0',
                    active ? 'bg-[#26251e] text-[#f2f1ed]' : 'bg-[rgba(38,37,30,0.06)] text-[rgba(38,37,30,0.7)]'
                  )}
                >
                  <Icon size={11} aria-hidden="true" />
                  {label}
                </button>
              );
            })}
          </div>
        </div>
      </header>

      <main className="flex-1 relative">
        {isLoading ? (
          <div className="h-full flex items-center justify-center bg-[#f2f1ed]">
            <div className="flex flex-col items-center gap-3">
              <div className="w-8 h-8 border-[3px] border-[#f54e00] border-t-transparent rounded-full animate-spin" />
              <p className="text-sm text-[rgba(38,37,30,0.55)]">Loading map...</p>
            </div>
          </div>
        ) : error ? (
          <div className="h-full flex flex-col items-center justify-center bg-[#f2f1ed] p-4">
            <div className="w-16 h-16 bg-[#fbeaef] rounded-2xl flex items-center justify-center mb-4">
              <AlertCircle size={32} className="text-[#b3224a]" />
            </div>
            <p className="text-[#26251e] text-sm mb-4 text-center">{error}</p>
            <button onClick={() => loadItems()} className="px-5 py-2.5 bg-[#f54e00] text-white rounded-xl text-sm font-medium active:bg-[#d44200] touch-manipulation press-feedback">
              Try Again
            </button>
          </div>
        ) : items.length === 0 ? (
          <div className="h-full flex flex-col items-center justify-center bg-[#f2f1ed] p-4">
            <div className="w-16 h-16 bg-[#ebeae5] rounded-2xl flex items-center justify-center mb-4">
              <MapPin size={32} className="text-[rgba(38,37,30,0.4)]" />
            </div>
            <p className="text-[#26251e] font-semibold">No collections to show</p>
            <p className="text-[rgba(38,37,30,0.55)] text-sm mt-1">All collections completed!</p>
          </div>
        ) : (
          <Suspense fallback={
            <div className="h-full flex items-center justify-center bg-[#f2f1ed]">
              <div className="w-8 h-8 border-[3px] border-[#f54e00] border-t-transparent rounded-full animate-spin" />
            </div>
          }>
            <MapErrorBoundary>
              <CollectionMap items={items} onNavigate={handleNavigate} />
            </MapErrorBoundary>
          </Suspense>
        )}
      </main>

      <BottomNav />
    </div>
  );
}