// @design-system: a11y/AccessibilityTrigger
/**
 * AccessibilityTrigger - IS 5568 compliant floating accessibility panel.
 *
 * Fixed position, bottom-end (bottom-right in LTR, bottom-left in RTL).
 * Opens a native <dialog> (no overlay dependency) with:
 *  - Text size radio group: S / M / L / XL / XXL / XXXL (up to 200% — IS 5568 §3)
 *  - High contrast toggle switch
 *  - Reset button
 *
 * All strings from the `a11y` i18n namespace.
 */

'use client';

import { useRef, useEffect, useCallback, useState } from 'react';
import { cn } from '@/lib/cn';
import { getT } from '@/lib/i18n';
import { usePrefs } from '@/lib/i18n/react';
import { usePrefsStore } from '@/lib/i18n/store';
import type { FontScale, ContrastMode, PrefsState } from '@/lib/i18n/store';
import type { Locale } from '@/lib/i18n';

const FONT_SCALES: FontScale[] = ['S', 'M', 'L', 'XL', 'XXL', 'XXXL'];

export function AccessibilityTrigger({ initialLocale = 'he' }: { initialLocale?: Locale }) {
  const [locale, setLocale] = useState<Locale>(initialLocale);

  useEffect(() => {
    return usePrefsStore.subscribe((state: PrefsState) => setLocale(state.locale));
  }, []);

  const t = getT(locale, 'a11y');
  const { fontScale, setFontScale, contrast, setContrast } = usePrefs();
  const dialogRef = useRef<HTMLDialogElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  const openPanel = useCallback(() => {
    dialogRef.current?.showModal();
  }, []);

  const closePanel = useCallback(() => {
    dialogRef.current?.close();
    triggerRef.current?.focus();
  }, []);

  const handleReset = useCallback(() => {
    setFontScale('M');
    setContrast('normal');
  }, [setFontScale, setContrast]);

  // Close on Escape is handled natively by <dialog>; re-focus trigger
  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    const handleClose = () => triggerRef.current?.focus();
    dialog.addEventListener('close', handleClose);
    return () => dialog.removeEventListener('close', handleClose);
  }, []);

  return (
    <>
      {/* Floating trigger button */}
      <button
        ref={triggerRef}
        type="button"
        aria-label={t('trigger_label')}
        aria-haspopup="dialog"
        onClick={openPanel}
        className={cn(
          'fixed end-[var(--spacing-4)] bottom-20',
          'z-[var(--z-a11y-trigger)]',
          'flex size-[var(--spacing-10)] items-center justify-center',
          'rounded-full',
          'bg-brand-primary-700 text-brand-on-primary',
          'shadow-[var(--shadow-lg)]',
          'transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out)]',
          'hover:scale-105',
          'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
          // Reduced motion: skip transform
          'motion-reduce:transition-none motion-reduce:hover:scale-100',
        )}
      >
        {/* Accessibility icon - simple SVG */}
        <svg
          aria-hidden="true"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <circle cx="12" cy="5" r="1" />
          <path d="M9 20l3-7 3 7" />
          <path d="M9 10.5c.667.333 1.333.5 3 .5s2.333-.167 3-.5" />
          <path d="M7 7l5 3 5-3" />
        </svg>
      </button>

      {/* Native dialog panel */}
      <dialog
        ref={dialogRef}
        aria-labelledby="a11y-panel-title"
        aria-describedby="a11y-panel-body"
        className={cn(
          'fixed end-[var(--spacing-16)] bottom-20',
          'z-[var(--z-a11y-trigger)]',
          'w-72 max-w-[calc(100vw-var(--spacing-8))]',
          'rounded-xl',
          'bg-surface-base',
          'shadow-[var(--shadow-xl)]',
          'p-4',
          'border-border-default border',
          // Remove default dialog backdrop styling - we style ::backdrop via CSS
          '[&::backdrop]:bg-surface-overlay',
        )}
      >
        <div id="a11y-panel-body" className="flex flex-col gap-4">
          {/* Header */}
          <div className="flex items-center justify-between">
            <h2 id="a11y-panel-title" className="text-text-primary text-base font-bold">
              {t('trigger_label')}
            </h2>
            <button
              type="button"
              aria-label={t('close_label')}
              onClick={closePanel}
              className={cn(
                'flex size-[var(--spacing-7)] items-center justify-center',
                'rounded-md',
                'text-text-muted hover:text-text-primary',
                'hover:bg-surface-inset',
                'transition-colors duration-[var(--duration-fast)]',
                'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
              )}
            >
              <svg
                aria-hidden="true"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M18 6L6 18M6 6l12 12" />
              </svg>
            </button>
          </div>

          {/* Text size radio group */}
          <fieldset className="m-0 flex flex-col gap-2 border-none p-0">
            <legend className="text-text-secondary mb-1 text-sm font-medium">
              {t('text_size')}
            </legend>
            <div role="radiogroup" className="grid grid-cols-3 gap-2">
              {FONT_SCALES.map((scale) => {
                const labelKey = `text_size_${scale.toLowerCase()}` as
                  | 'text_size_s'
                  | 'text_size_m'
                  | 'text_size_l'
                  | 'text_size_xl'
                  | 'text_size_xxl'
                  | 'text_size_xxxl';
                const isSelected = fontScale === scale;
                return (
                  <button
                    key={scale}
                    type="button"
                    role="radio"
                    aria-checked={isSelected}
                    onClick={() => setFontScale(scale)}
                    className={cn(
                      'flex flex-1 items-center justify-center',
                      'rounded-md',
                      'px-2 py-2',
                      'text-sm font-medium',
                      'border transition-colors duration-[var(--duration-fast)]',
                      'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
                      isSelected
                        ? 'border-brand-primary-600 bg-brand-primary-50 text-brand-primary-700'
                        : 'bg-surface-base text-text-secondary hover:bg-surface-inset border-border-default',
                    )}
                  >
                    {t(labelKey)}
                  </button>
                );
              })}
            </div>
          </fieldset>

          {/* High contrast switch */}
          <div className="flex items-center justify-between gap-3">
            <span
              id="a11y-contrast-label"
              className="text-text-primary cursor-pointer text-sm font-medium select-none"
            >
              {t('high_contrast')}
            </span>
            <button
              type="button"
              role="switch"
              aria-labelledby="a11y-contrast-label"
              aria-checked={contrast === 'high'}
              onClick={() => setContrast((contrast === 'high' ? 'normal' : 'high') as ContrastMode)}
              className={cn(
                'relative inline-flex h-[var(--spacing-6)] w-[var(--spacing-10)] shrink-0',
                'cursor-pointer rounded-full border-2 border-transparent',
                'transition-colors duration-[var(--duration-base)] ease-[var(--ease-in-out)]',
                'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
                'motion-reduce:transition-none',
                contrast === 'high' ? 'bg-brand-primary-600' : 'bg-neutral-300',
              )}
            >
              <span
                aria-hidden="true"
                className={cn(
                  'pointer-events-none inline-block size-[var(--spacing-5)]',
                  'bg-neutral-0 rounded-full shadow-[var(--shadow-sm)]',
                  'transition-transform duration-[var(--duration-base)] ease-[var(--ease-in-out)]',
                  'motion-reduce:transition-none',
                  contrast === 'high'
                    ? 'translate-x-[var(--spacing-4)] rtl:-translate-x-[var(--spacing-4)]'
                    : 'translate-x-0',
                )}
              />
            </button>
          </div>

          {/* Reset button */}
          <button
            type="button"
            onClick={handleReset}
            className={cn(
              'w-full',
              'rounded-md',
              'px-4 py-2',
              'text-sm font-medium',
              'border-border-default border',
              'text-text-secondary hover:text-text-primary',
              'hover:bg-surface-inset',
              'transition-colors duration-[var(--duration-fast)]',
              'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
            )}
          >
            {t('reset')}
          </button>
        </div>
      </dialog>
    </>
  );
}