'use client';

import { useEffect, useState, useRef, useCallback } from 'react';
import { useParams, useRouter } from 'next/navigation';
import dynamic from 'next/dynamic';
import { useRoom } from '@/hooks/useRoom';
import { useLocationSharing } from '@/hooks/useLocationSharing';
import ParticipantList from '@/components/room/ParticipantList';
import RoomHeader from '@/components/room/RoomHeader';
import ShareModal from '@/components/room/ShareModal';
import MeetingPointModal from '@/components/room/MeetingPointModal';
import WaypointModal from '@/components/room/WaypointModal';
import type { Participant, ParticipantLocation, Waypoint } from '@/types';

// Dynamic import for map to avoid SSR issues with MapLibre
const DualMapView = dynamic(() => import('@/components/map/DualMapView'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full bg-rmaps-dark flex items-center justify-center">
      <div className="text-white/60">Loading map...</div>
    </div>
  ),
});

export default function RoomPage() {
  const params = useParams();
  const router = useRouter();
  const slug = params.slug as string;

  const [showShare, setShowShare] = useState(false);
  const [showParticipants, setShowParticipants] = useState(true);
  const [showMeetingPoint, setShowMeetingPoint] = useState(false);
  const [currentUser, setCurrentUser] = useState<{ name: string; emoji: string } | null>(null);
  const [selectedParticipant, setSelectedParticipant] = useState<Participant | null>(null);
  const [selectedWaypoint, setSelectedWaypoint] = useState<Waypoint | null>(null);
  const [shouldAutoStartSharing, setShouldAutoStartSharing] = useState(false);

  // Load user and sharing preference from localStorage
  useEffect(() => {
    const stored = localStorage.getItem('rmaps_user');
    if (stored) {
      setCurrentUser(JSON.parse(stored));
    } else {
      // Redirect to home if no user info
      router.push('/');
      return;
    }

    // Check if user had location sharing enabled for this room
    const sharingPref = localStorage.getItem(`rmaps_sharing_${slug}`);
    if (sharingPref === 'true') {
      setShouldAutoStartSharing(true);
    }
  }, [router, slug]);

  // Room hook (only initialize when we have user info)
  const {
    isConnected,
    isLoading,
    error,
    participants,
    waypoints,
    currentParticipantId,
    roomName,
    updateLocation,
    updateIndoorPosition,
    clearLocation,
    setStatus,
    addWaypoint,
    removeWaypoint,
    leave,
  } = useRoom({
    slug,
    userName: currentUser?.name || '',
    userEmoji: currentUser?.emoji || '👤',
  });

  // Use refs to avoid stale closures in callbacks
  const isConnectedRef = useRef(isConnected);
  const updateLocationRef = useRef(updateLocation);

  useEffect(() => {
    isConnectedRef.current = isConnected;
  }, [isConnected]);

  useEffect(() => {
    updateLocationRef.current = updateLocation;
  }, [updateLocation]);

  // Stable callback that always uses latest refs - also persists location
  const handleLocationUpdate = useCallback((location: ParticipantLocation) => {
    console.log('Location update received:', location.latitude, location.longitude, 'connected:', isConnectedRef.current);
    if (isConnectedRef.current) {
      updateLocationRef.current(location);
      // Persist last known location for faster reload
      try {
        localStorage.setItem(`rmaps_last_location_${slug}`, JSON.stringify({
          latitude: location.latitude,
          longitude: location.longitude,
          accuracy: location.accuracy,
          timestamp: location.timestamp.toISOString(),
        }));
      } catch {
        // Ignore storage errors
      }
    }
  }, [slug]);

  // Location sharing hook
  const {
    isSharing,
    currentLocation,
    startSharing,
    stopSharing,
  } = useLocationSharing({
    onLocationUpdate: handleLocationUpdate,
    updateInterval: 5000,
    highAccuracy: true,
  });

  // Restore last known location immediately when connected
  const hasRestoredLocationRef = useRef(false);
  useEffect(() => {
    if (isConnected && !hasRestoredLocationRef.current) {
      hasRestoredLocationRef.current = true;
      try {
        const savedLocation = localStorage.getItem(`rmaps_last_location_${slug}`);
        if (savedLocation) {
          const loc = JSON.parse(savedLocation);
          // Only restore if less than 1 hour old
          const age = Date.now() - new Date(loc.timestamp).getTime();
          if (age < 60 * 60 * 1000) {
            console.log('Restoring last known location:', loc.latitude, loc.longitude);
            updateLocation({
              latitude: loc.latitude,
              longitude: loc.longitude,
              accuracy: loc.accuracy || 100,
              timestamp: new Date(loc.timestamp),
              source: 'gps',
            });
          }
        }
      } catch {
        // Ignore restore errors
      }
    }
  }, [isConnected, slug, updateLocation]);

  // Auto-start location sharing if user had it enabled before
  useEffect(() => {
    if (shouldAutoStartSharing && isConnected && !isSharing) {
      console.log('Auto-starting location sharing from saved preference');
      startSharing();
      setShouldAutoStartSharing(false); // Only auto-start once
    }
  }, [shouldAutoStartSharing, isConnected, isSharing, startSharing]);

  // Handler for toggling location sharing - persists preference
  const handleToggleSharing = useCallback(() => {
    if (isSharing) {
      console.log('Stopping location sharing and clearing location');
      stopSharing();
      clearLocation();
      // Save preference
      localStorage.setItem(`rmaps_sharing_${slug}`, 'false');
    } else {
      console.log('Starting location sharing');
      startSharing();
      // Save preference
      localStorage.setItem(`rmaps_sharing_${slug}`, 'true');
    }
  }, [isSharing, startSharing, stopSharing, clearLocation, slug]);

  // Track if we've centered on user's location yet
  const hasCenteredRef = useRef(false);

  // Log when we get location updates
  useEffect(() => {
    if (currentLocation && !hasCenteredRef.current) {
      console.log('First location acquired:', currentLocation.latitude, currentLocation.longitude);
      hasCenteredRef.current = true;
    }
  }, [currentLocation]);

  // Update status when app goes to background
  useEffect(() => {
    const handleVisibility = () => {
      if (document.hidden) {
        setStatus('away');
      } else {
        setStatus('online');
      }
    };

    document.addEventListener('visibilitychange', handleVisibility);
    return () => document.removeEventListener('visibilitychange', handleVisibility);
  }, [setStatus]);

  // Handle leaving room
  useEffect(() => {
    const handleBeforeUnload = () => {
      leave();
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      leave();
    };
  }, [leave]);

  // Navigate to participant
  const handleNavigateTo = (participant: Participant) => {
    setSelectedParticipant(participant);
    // TODO: Implement navigation route display
    console.log('Navigate to:', participant.name);
  };

  // Loading state
  if (!currentUser || isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-rmaps-dark">
        <div className="text-center">
          <div className="w-8 h-8 border-2 border-rmaps-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
          <div className="text-white/60">Joining room...</div>
        </div>
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center p-4 bg-rmaps-dark">
        <div className="room-panel rounded-2xl p-6 max-w-md text-center">
          <h2 className="text-xl font-bold text-red-400 mb-2">Connection Error</h2>
          <p className="text-white/60 mb-4">{error}</p>
          <div className="flex gap-3 justify-center">
            <button onClick={() => window.location.reload()} className="btn-ghost">
              Retry
            </button>
            <a href="/" className="btn-primary">
              Go Home
            </a>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="h-screen w-screen flex flex-col overflow-hidden bg-rmaps-dark">
      {/* Header */}
      <RoomHeader
        roomSlug={slug}
        participantCount={participants.length}
        isSharing={isSharing}
        onToggleSharing={handleToggleSharing}
        onShare={() => setShowShare(true)}
        onToggleParticipants={() => setShowParticipants(!showParticipants)}
      />

      {/* Main Content */}
      <div className="flex-1 relative">
        {/* Map */}
        <DualMapView
          participants={participants}
          waypoints={waypoints}
          currentUserId={currentParticipantId || undefined}
          currentLocation={currentLocation}
          eventId="38c3"
          isSharing={isSharing}
          onToggleSharing={handleToggleSharing}
          onParticipantClick={(p) => {
            setSelectedParticipant(p);
            setShowParticipants(true);
          }}
          onWaypointClick={(w) => {
            setSelectedWaypoint(w);
          }}
          onIndoorPositionSet={updateIndoorPosition}
        />

        {/* Participant Panel */}
        {showParticipants && (
          <div className="absolute bottom-0 left-0 right-0 md:top-0 md:right-auto md:w-80 md:bottom-auto md:h-full z-20">
            <ParticipantList
              participants={participants}
              currentUserId={currentUser.name}
              onClose={() => setShowParticipants(false)}
              onNavigateTo={handleNavigateTo}
              onSetMeetingPoint={() => setShowMeetingPoint(true)}
            />
          </div>
        )}

        {/* Connection status indicator */}
        {!isConnected && (
          <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-yellow-500/90 text-black text-sm px-3 py-1.5 rounded-full z-30">
            Reconnecting...
          </div>
        )}
      </div>

      {/* Share Modal */}
      {showShare && (
        <ShareModal roomSlug={slug} onClose={() => setShowShare(false)} />
      )}

      {/* Meeting Point Modal */}
      {showMeetingPoint && (
        <MeetingPointModal
          currentLocation={currentLocation}
          onClose={() => setShowMeetingPoint(false)}
          onSetMeetingPoint={(waypoint) => {
            addWaypoint(waypoint);
            setShowMeetingPoint(false);
          }}
        />
      )}

      {/* Waypoint Detail Modal */}
      {selectedWaypoint && (
        <WaypointModal
          waypoint={selectedWaypoint}
          canDelete={true}
          onClose={() => setSelectedWaypoint(null)}
          onDelete={() => {
            removeWaypoint(selectedWaypoint.id);
            setSelectedWaypoint(null);
          }}
          onNavigate={() => {
            const { latitude, longitude } = selectedWaypoint.location;
            window.open(
              `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`,
              '_blank'
            );
            setSelectedWaypoint(null);
          }}
        />
      )}
    </div>
  );
}
