'use client';

import type { Participant } from '@/types';

interface C3NavEmbedProps {
  /** Event identifier (e.g., '39c3', 'eh2025') */
  eventId?: string;
  /** Participants to show on the map overlay */
  participants?: Participant[];
  /** Current user ID */
  currentUserId?: string;
  /** Show the indoor/outdoor toggle */
  showToggle?: boolean;
  /** Callback when toggling to outdoor mode */
  onToggleOutdoor?: () => void;
}

// c3nav event URLs
const C3NAV_EVENTS: Record<string, string> = {
  '39c3': 'https://39c3.c3nav.de',
  '38c3': 'https://38c3.c3nav.de',
  '37c3': 'https://37c3.c3nav.de',
  'eh2025': 'https://eh2025.c3nav.de',
  'eh22': 'https://eh22.c3nav.de',
  'camp2023': 'https://camp2023.c3nav.de',
};

export default function C3NavEmbed({
  eventId = '39c3',
  participants = [],
  currentUserId,
  showToggle = true,
  onToggleOutdoor,
}: C3NavEmbedProps) {
  // Get the c3nav base URL for the event
  const baseUrl = C3NAV_EVENTS[eventId] || C3NAV_EVENTS['39c3'];

  // c3nav blocks iframes, so show fallback UI with link to open in new tab
  return (
    <div className="relative w-full h-full bg-rmaps-dark">
      {/* Fallback UI since c3nav blocks iframe embedding */}
      <div className="absolute inset-0 flex flex-col items-center justify-center p-6 text-center">
        <div className="text-6xl mb-4">🏢</div>
        <h3 className="text-xl font-semibold text-white mb-2">Indoor Navigation</h3>
        <p className="text-white/60 text-sm mb-6 max-w-xs">
          Open c3nav to view the indoor map and navigate the venue
        </p>
        <button
          onClick={() => window.open(baseUrl, '_blank')}
          className="btn-primary flex items-center gap-2"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
          Open c3nav
        </button>
        <p className="text-white/40 text-xs mt-4">
          {eventId.toUpperCase()} venue map
        </p>
      </div>

      {/* Friend markers overlay */}
      {participants.length > 0 && (
        <div className="absolute top-2 left-2 right-2 pointer-events-none">
          <div className="flex flex-wrap gap-1 pointer-events-auto">
            {participants
              .filter((p) => p.location?.indoor && p.id !== currentUserId)
              .map((p) => (
                <div
                  key={p.id}
                  className="flex items-center gap-1 bg-rmaps-dark/90 rounded-full px-2 py-1 text-xs"
                  style={{ borderColor: p.color, borderWidth: 2 }}
                >
                  <span>{p.emoji}</span>
                  <span className="text-white/80">{p.name}</span>
                  {p.location?.indoor?.spaceName && (
                    <span className="text-white/50">@ {p.location.indoor.spaceName}</span>
                  )}
                </div>
              ))}
          </div>
        </div>
      )}

      {/* Toggle to outdoor */}
      {showToggle && onToggleOutdoor && (
        <button
          onClick={onToggleOutdoor}
          className="absolute bottom-4 left-4 bg-rmaps-dark/90 text-white px-3 py-2 rounded-lg text-sm hover:bg-rmaps-dark transition-colors flex items-center gap-2"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          Outdoor Map
        </button>
      )}

      {/* c3nav attribution */}
      <div className="absolute bottom-4 right-4 text-xs text-white/40">
        <a
          href={baseUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="hover:text-white/60"
        >
          Powered by c3nav
        </a>
      </div>
    </div>
  );
}
