WFDASHDRIVER-APP/app/map/page.tsx

'use client';

import { useState, useEffect, useCallback, Suspense } 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 LocationTracker from '@/components/LocationTracker';
import { getAssignedCollections, isAuthenticated } from '@/lib/pocketbase';
import { cn, parseCoordinates } from '@/lib/utils';
import { RefreshCw, MapPin, AlertCircle } from 'lucide-react';

const CollectionMap = dynamic(() => import('@/components/CollectionMap'), {
  ssr: false,
  loading: () => (
    <div className="h-full flex items-center justify-center bg-gray-100">
      <div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
    </div>
  ),
});

export default function MapPage() {
  const router = useRouter();
  const { isLoggedIn, isLoading: authLoading } = useAuth();
  const [items, setItems] = useState<OrderItem[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [error, setError] = useState('');

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

  const loadItems = useCallback(async (showLoading = true) => {
    if (!isAuthenticated()) return;
    if (showLoading) setIsLoading(true);
    setError('');
    try {
      const data = await getAssignedCollections();
      setItems(data);
    } catch (err) {
      console.error('Failed to load collections:', err);
      setError('Failed to load collections');
    } finally {
      setIsLoading(false);
      setIsRefreshing(false);
    }
  }, []);

  useEffect(() => { loadItems(); }, [loadItems]);

  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?q=${lat},${lng}`;
    window.open(url, '_blank');
  };

  if (authLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  if (!isLoggedIn) return null;

  return (
    <div className="h-screen flex flex-col bg-gray-50">
      <LocationTracker />

      <header className="bg-orange-600 text-white safe-top z-40 shadow-md flex-shrink-0">
        <div className="px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <MapPin size={20} />
            <h1 className="text-lg font-bold">Collection Map</h1>
          </div>
          <div className="flex items-center gap-2">
            <span className="bg-orange-700/50 px-2 py-1 rounded-full text-xs">{items.length} stops</span>
            <button
              onClick={() => { setIsRefreshing(true); loadItems(false); }}
              disabled={isRefreshing}
              className="p-2 rounded-lg bg-orange-700/50 active:bg-orange-700 transition-colors"
            >
              <RefreshCw size={18} className={cn(isRefreshing && 'animate-spin')} />
            </button>
          </div>
        </div>
      </header>

      <main className="flex-1 relative">
        {isLoading ? (
          <div className="h-full flex items-center justify-center bg-gray-100">
            <div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
          </div>
        ) : error ? (
          <div className="h-full flex flex-col items-center justify-center bg-gray-100 p-4">
            <AlertCircle size={48} className="text-red-400 mb-3" />
            <p className="text-gray-600 text-sm mb-4 text-center">{error}</p>
            <button onClick={() => loadItems()} className="px-4 py-2 bg-orange-500 text-white rounded-lg text-sm font-medium">Try Again</button>
          </div>
        ) : items.length === 0 ? (
          <div className="h-full flex flex-col items-center justify-center bg-gray-100 p-4">
            <MapPin size={48} className="text-gray-300 mb-3" />
            <p className="text-gray-600 font-medium">No collections to show</p>
            <p className="text-gray-400 text-sm mt-1">All collections completed!</p>
          </div>
        ) : (
          <Suspense fallback={
            <div className="h-full flex items-center justify-center bg-gray-100">
              <div className="w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full animate-spin" />
            </div>
          }>
            <CollectionMap items={items} onNavigate={handleNavigate} />
          </Suspense>
        )}
      </main>

      <BottomNav />
    </div>
  );
}