'use client';

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

interface WaypointModalProps {
  waypoint: Waypoint;
  canDelete: boolean;
  onClose: () => void;
  onDelete: () => void;
  onNavigate: () => void;
}

export default function WaypointModal({
  waypoint,
  canDelete,
  onClose,
  onDelete,
  onNavigate,
}: WaypointModalProps) {
  const handleDelete = () => {
    if (confirm(`Delete "${waypoint.name}"?`)) {
      onDelete();
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-end md:items-center justify-center">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/60" onClick={onClose} />

      {/* Modal */}
      <div className="relative w-full md:max-w-sm bg-rmaps-card rounded-t-2xl md:rounded-2xl p-4 animate-slide-up">
        {/* Header */}
        <div className="flex items-center gap-3 mb-4">
          <div className="w-12 h-12 rounded-full bg-emerald-500/20 flex items-center justify-center text-2xl">
            {waypoint.emoji || '📍'}
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="font-semibold text-white truncate">{waypoint.name}</h3>
            <p className="text-white/50 text-sm">
              {waypoint.type === 'meetup' ? 'Meeting Point' : 'Waypoint'}
            </p>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-white/10 rounded-full transition-colors"
          >
            <svg className="w-5 h-5 text-white/60" 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>

        {/* Location info */}
        <div className="text-white/60 text-sm mb-4">
          {waypoint.location.indoor ? (
            <span>Level {waypoint.location.indoor.level}</span>
          ) : (
            <span>
              {waypoint.location.latitude.toFixed(5)}, {waypoint.location.longitude.toFixed(5)}
            </span>
          )}
        </div>

        {/* Actions */}
        <div className="flex gap-2">
          <button
            onClick={onNavigate}
            className="flex-1 btn-primary flex items-center justify-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="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>
            Navigate
          </button>

          {canDelete && (
            <button
              onClick={handleDelete}
              className="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
              </svg>
              Delete
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
