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 LocationTracker from '@/components/LocationTracker';
import { getAssignedCollections, isAuthenticated } from '@/lib/pocketbase';
import { cn } 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-[#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();
  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/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]">
      <LocationTracker />

      <header className="bg-[#e6e5e0] text-[#26251e] safe-top z-40 border-b border-[rgba(38,37,30,0.1)] flex-shrink-0">
        <div className="px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 bg-[#ebeae5] rounded-xl flex items-center justify-center">
              <MapPin size={18} className="text-[#26251e]" />
            </div>
            <div>
              <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' : ''}</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"
          >
            <RefreshCw size={18} className={cn('text-[#26251e]', isRefreshing && 'animate-spin')} />
          </button>
        </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>
  );
}