import * as React from "react";

import {
  applyReducedMotionToDocument,
  readMotionPreference,
  resolveReducedMotion,
  subscribeMotionPreference,
  type MotionPreference,
  writeMotionPreference,
} from "../../utils/motionPreference";

export interface MotionPreferenceControlProps {
  compact?: boolean;
  className?: string;
}

const OPTIONS: readonly { value: MotionPreference; label: string; help: string }[] = [
  {
    value: "system",
    label: "System",
    help: "Follow the operating system reduced-motion setting.",
  },
  {
    value: "reduce",
    label: "Reduced",
    help: "Pause autoplay and minimize interface transitions.",
  },
  {
    value: "no-preference",
    label: "Full",
    help: "Allow smooth camera transitions and procedural animation.",
  },
];

function useMotionPreferenceSnapshot(): {
  preference: MotionPreference;
  reducedMotion: boolean;
  setPreference: (preference: MotionPreference) => void;
} {
  const subscribe = React.useCallback((listener: () => void) => subscribeMotionPreference(listener), []);
  const getSnapshot = React.useCallback(() => readMotionPreference(), []);
  const preference = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
  const reducedMotion = resolveReducedMotion(preference);

  React.useEffect(() => {
    applyReducedMotionToDocument(reducedMotion);
  }, [reducedMotion]);

  const setPreference = React.useCallback((nextPreference: MotionPreference) => {
    writeMotionPreference(nextPreference);
  }, []);

  return { preference, reducedMotion, setPreference };
}

export function MotionPreferenceControl({
  compact = false,
  className = "",
}: MotionPreferenceControlProps): JSX.Element {
  const { preference, reducedMotion, setPreference } = useMotionPreferenceSnapshot();

  if (compact) {
    return (
      <label className={`flex items-center gap-2 text-xs text-[var(--color-text-muted)] ${className}`}>
        <span className="sr-only">Motion preference</span>
        <span aria-hidden="true">Motion</span>
        <select
          className="input-field h-9 rounded-xl px-2 text-xs"
          value={preference}
          aria-label="Motion preference"
          onChange={(event) => setPreference(event.currentTarget.value as MotionPreference)}
        >
          {OPTIONS.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </label>
    );
  }

  return (
    <section
      className={`rounded-2xl border border-[var(--color-border)] bg-black/10 p-3 ${className}`}
      aria-labelledby="motion-preference-title"
    >
      <div className="flex items-start justify-between gap-3">
        <div>
          <h3 id="motion-preference-title" className="text-sm font-semibold text-white">
            Motion preference
          </h3>
          <p className="mt-1 text-xs leading-5 text-[var(--color-text-muted)]">
            {reducedMotion
              ? "Reduced motion is active; autoplay is paused and camera transitions are minimized."
              : "Full motion is active; animations and smooth camera moves are enabled."}
          </p>
        </div>
        <span
          className="rounded-full border border-[var(--color-border)] px-2 py-1 text-[0.68rem] uppercase tracking-[0.2em] text-[var(--color-text-subtle)]"
          aria-live="polite"
        >
          {reducedMotion ? "Reduced" : "Full"}
        </span>
      </div>

      <div className="mt-3 grid grid-cols-3 gap-2" role="group" aria-label="Motion preference">
        {OPTIONS.map((option) => (
          <button
            key={option.value}
            className="control-button px-2 py-2 text-xs"
            type="button"
            aria-pressed={preference === option.value}
            title={option.help}
            onClick={() => setPreference(option.value)}
          >
            {option.label}
          </button>
        ))}
      </div>
    </section>
  );
}