'use client';

import { useRoomStore } from '@/stores/room';
import type { Participant, Waypoint, ParticipantLocation } from '@/types';

interface NavigationPanelProps {
  selectedParticipant?: Participant | null;
  selectedWaypoint?: Waypoint | null;
  currentLocation?: ParticipantLocation | null;
  allParticipants: Participant[];
  waypoints: Waypoint[];
  currentUserId?: string;
  onClose: () => void;
}

export default function NavigationPanel({
  selectedParticipant,
  selectedWaypoint,
  currentLocation,
  allParticipants,
  waypoints,
  currentUserId,
  onClose,
}: NavigationPanelProps) {
  const { navigateTo, activeRoute, clearRoute } = useRoomStore();

  const target = selectedParticipant || selectedWaypoint;
  if (!target) return null;

  const isParticipant = !!selectedParticipant;
  const isSelf = isParticipant && selectedParticipant.id === currentUserId;
  const hasLocation = isParticipant
    ? !!selectedParticipant.location
    : !!selectedWaypoint?.location;

  const handleNavigate = () => {
    if (isParticipant && selectedParticipant) {
      navigateTo(
        { type: 'participant', id: selectedParticipant.id },
        currentLocation || undefined,
        allParticipants,
        waypoints
      );
    } else if (selectedWaypoint) {
      navigateTo(
        { type: 'waypoint', id: selectedWaypoint.id },
        currentLocation || undefined,
        allParticipants,
        waypoints
      );
    }
  };

  const isNavigatingToThis =
    activeRoute &&
    !activeRoute.isLoading &&
    !activeRoute.error &&
    activeRoute.to.id === (isParticipant ? selectedParticipant?.id : selectedWaypoint?.id);

  return (
    <div className="absolute top-16 left-4 right-4 sm:left-auto sm:right-4 sm:w-72 z-40">
      <div className="bg-rmaps-dark/95 backdrop-blur-sm rounded-lg shadow-xl border border-white/10 overflow-hidden">
        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-white/10">
          <div className="flex items-center gap-3">
            {isParticipant ? (
              <>
                <div
                  className="w-10 h-10 rounded-full flex items-center justify-center text-lg"
                  style={{ backgroundColor: selectedParticipant.color }}
                >
                  {selectedParticipant.emoji}
                </div>
                <div>
                  <p className="font-medium text-white">
                    {selectedParticipant.name}
                    {isSelf && <span className="text-rmaps-primary ml-1">(you)</span>}
                  </p>
                  <p className="text-xs text-white/60">
                    {selectedParticipant.status === 'online' && 'Sharing location'}
                    {selectedParticipant.status === 'away' && 'Away'}
                    {selectedParticipant.status === 'ghost' && 'Hidden'}
                    {selectedParticipant.status === 'offline' && 'Offline'}
                  </p>
                </div>
              </>
            ) : (
              <>
                <div className="w-10 h-10 rounded-full bg-rmaps-secondary flex items-center justify-center text-lg">
                  {selectedWaypoint?.emoji || '📍'}
                </div>
                <div>
                  <p className="font-medium text-white">{selectedWaypoint?.name}</p>
                  <p className="text-xs text-white/60 capitalize">{selectedWaypoint?.type}</p>
                </div>
              </>
            )}
          </div>
          <button
            onClick={onClose}
            className="text-white/60 hover:text-white transition-colors p-1"
            aria-label="Close"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Actions */}
        <div className="p-3 space-y-2">
          {!isSelf && hasLocation && (
            <>
              {isNavigatingToThis ? (
                <button
                  onClick={() => {
                    clearRoute();
                    onClose();
                  }}
                  className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-red-500/20 text-red-400 rounded-lg hover:bg-red-500/30 transition-colors"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                  Stop navigating
                </button>
              ) : (
                <button
                  onClick={handleNavigate}
                  disabled={activeRoute?.isLoading}
                  className="w-full flex items-center justify-center gap-2 px-4 py-2.5 bg-rmaps-primary text-white rounded-lg hover:bg-rmaps-primary/80 transition-colors disabled:opacity-50"
                >
                  {activeRoute?.isLoading ? (
                    <>
                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                      Calculating...
                    </>
                  ) : (
                    <>
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                      </svg>
                      Navigate here
                    </>
                  )}
                </button>
              )}
            </>
          )}

          {!hasLocation && !isSelf && (
            <div className="flex items-center gap-2 px-4 py-2.5 bg-white/5 rounded-lg text-white/60 text-sm">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3" />
              </svg>
              Location not available
            </div>
          )}

          {isSelf && (
            <div className="flex items-center gap-2 px-4 py-2.5 bg-rmaps-primary/10 rounded-lg text-rmaps-primary text-sm">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
              This is your location
            </div>
          )}
        </div>

        {/* Location info if available */}
        {hasLocation && (
          <div className="px-4 pb-3 text-xs text-white/50">
            {isParticipant && selectedParticipant.location?.indoor ? (
              <span>Indoor: Level {selectedParticipant.location.indoor.level}</span>
            ) : (
              <span>Outdoor location</span>
            )}
          </div>
        )}
      </div>
    </div>
  );
}
