import { useTranslation } from 'react-i18next';

import { useModalA11y } from '../../hooks/useModalA11y';
import { SpinnerIcon } from '../ui/icons/SpinnerIcon';

interface DemoLocationPromptProps {
  /** True while a geolocation request is in flight. */
  locating: boolean;
  /** Error message to show (e.g. permission denied), or null. */
  error: string | null;
  onUseLocation: () => void;
  onUseDefault: () => void;
}

/**
 * First-visit demo prompt: offers to centre the map on the visitor's GPS location
 * (with consent) or start at the Canary Wharf default. Rendered over the map (which
 * is already showing Canary Wharf), so declining is just a dismiss.
 */
export default function DemoLocationPrompt({
  locating,
  error,
  onUseLocation,
  onUseDefault,
}: DemoLocationPromptProps) {
  const { t } = useTranslation();
  const dialogRef = useModalA11y();

  return (
    <div
      className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/50"
      role="presentation"
    >
      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="demo-location-title"
        tabIndex={-1}
        className="relative w-full max-w-sm mx-4 bg-white dark:bg-warm-800 rounded-2xl shadow-2xl border border-warm-200 dark:border-warm-700 overflow-hidden outline-none"
      >
        <div className="bg-gradient-to-br from-navy-950 to-teal-900 px-6 py-7 text-center">
          <h2 id="demo-location-title" className="text-xl font-bold text-white mb-2">
            {t('demoLocation.title')}
          </h2>
          <p className="text-warm-300 text-sm">{t('demoLocation.body')}</p>
        </div>

        <div className="px-6 py-6 flex flex-col gap-3">
          <button
            type="button"
            onClick={onUseLocation}
            disabled={locating}
            className="w-full px-6 py-3 border border-[#d27a11] bg-[#f09a22] text-navy-950 rounded-lg font-semibold hover:bg-[#df8614] transition-colors shadow-lg shadow-[#7a3905]/25 disabled:opacity-50 disabled:cursor-wait flex items-center justify-center gap-2"
          >
            {locating && <SpinnerIcon className="w-5 h-5 animate-spin" />}
            {locating ? t('demoLocation.locating') : t('demoLocation.useLocation')}
          </button>
          <button
            type="button"
            onClick={onUseDefault}
            className="w-full px-4 py-2 text-sm text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300"
          >
            {t('demoLocation.useDefault')}
          </button>
          {error && <p className="text-center text-sm text-red-600 dark:text-red-400">{error}</p>}
        </div>
      </div>
    </div>
  );
}
