import { useEffect } from 'react';
import { Check, Mic, Video } from 'lucide-react';
import { OnboardingStep, SUCCESS_DWELL_MS } from './onboarding-step';
import { useTapGesture } from './use-tap-gesture';
import { VideoAudioToggle } from '@/components/video-audio-toggle';
import { useMediaSettingsStore } from '@/stores/media-settings-store';

export function ToggleStep({ onAdvance }: { onAdvance: () => void }) {
  const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
  const setRecordingMode = useMediaSettingsStore((s) => s.setRecordingMode);

  const { satisfied } = useTapGesture({
    targetKey: 'v',
    onTap: () => {
      const current = useMediaSettingsStore.getState().recordingMode;
      setRecordingMode(current === 'video' ? 'audio' : 'video');
    },
  });

  useEffect(() => {
    if (!satisfied) return;
    const t = setTimeout(onAdvance, SUCCESS_DWELL_MS);
    return () => clearTimeout(t);
  }, [satisfied, onAdvance]);

  // Teaching the toggle shouldn't permanently change the user's default mode.
  useEffect(() => {
    const original = useMediaSettingsStore.getState().recordingMode;
    return () => setRecordingMode(original);
  }, [setRecordingMode]);

  const isVideo = recordingMode === 'video';

  return (
    <OnboardingStep
      title={satisfied ? 'Audio or video, your call' : 'Switch audio and video'}
      subtitle={
        satisfied
          ? 'Tap V before recording to choose how you show up.'
          : 'Tap the V key to switch between video and audio.'
      }
      status={
        satisfied ? (
          <span className="inline-flex items-center gap-1.5 text-emerald-600 dark:text-emerald-300">
            <Check className="size-4" />{' '}
            {isVideo ? 'Back to video.' : 'Audio it is.'}
          </span>
        ) : null
      }
    >
      <div className="flex size-32 flex-col items-center justify-center gap-2 rounded-2xl border border-border bg-muted text-foreground">
        {isVideo ? <Video className="size-9" /> : <Mic className="size-9" />}
        <span className="text-sm text-muted-foreground">
          {isVideo ? 'Video' : 'Audio'}
        </span>
      </div>
      <VideoAudioToggle />
    </OnboardingStep>
  );
}