import { useEffect } from 'react';
import { Check } from 'lucide-react';
import { OnboardingKeyboard } from './onboarding-keyboard';
import { OnboardingStep, SUCCESS_DWELL_MS } from './onboarding-step';
import { useTapGesture } from './use-tap-gesture';

export function TapStep({ onAdvance }: { onAdvance: () => void }) {
  const { taps, satisfied } = useTapGesture({
    targetKey: '`',
    targetCode: 'Backquote',
    taps: 2,
  });
  const recording = taps === 1;

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

  return (
    <OnboardingStep
      title={
        satisfied
          ? 'That is tap to toggle'
          : recording
            ? 'Recording…'
            : 'Tap to start and stop'
      }
      subtitle={
        satisfied
          ? 'A quick tap starts recording, another tap finishes it.'
          : recording
            ? 'Now tap ` again to stop.'
            : 'Prefer not to hold? Tap ` once to start recording.'
      }
      status={
        satisfied ? (
          <span className="inline-flex items-center gap-1.5 text-emerald-600 dark:text-emerald-300">
            <Check className="size-4" /> Done.
          </span>
        ) : recording ? (
          <span className="inline-flex items-center gap-2 text-muted-foreground">
            <span className="size-2.5 rounded-full bg-red-500 motion-safe:animate-pulse" />
            Recording
          </span>
        ) : null
      }
    >
      <OnboardingKeyboard
        highlightKey="`"
        state={satisfied ? 'success' : recording ? 'active' : 'idle'}
      />
    </OnboardingStep>
  );
}