viberoom-web/src/widgets/space-focus-hud/ui/SpaceFocusHudWidget.tsx

import { useEffect, useRef, useState } from 'react';
import { copy } from '@/shared/i18n';
import { cn } from '@/shared/lib/cn';
import type { HudStatusLinePayload } from '@/shared/lib/useHudStatusLine';
import { ExitHoldButton } from '@/features/exit-hold';
import { GoalCompleteSheet } from './GoalCompleteSheet';
import { InlineMicrostep } from './InlineMicrostep';
import { ThoughtOrb } from './ThoughtOrb';

interface SpaceFocusHudWidgetProps {
  sessionId?: string | null;
  goal: string;
  microStep?: string | null;
  remainingSeconds?: number | null;
  phaseStartedAt?: string | null;
  timeDisplay?: string;
  hasActiveSession?: boolean;
  playbackState?: 'running' | 'paused';
  sessionPhase?: 'focus' | 'break' | null;
  onIntentUpdate: (payload: { goal?: string; microStep?: string | null }) => boolean | Promise<boolean>;
  onGoalUpdate: (nextGoal: string) => boolean | Promise<boolean>;
  onGoalFinish: () => boolean | Promise<boolean>;
  onTimerFinish: () => boolean | Promise<boolean>;
  onAddTenMinutes: () => boolean | Promise<boolean>;
  onStatusMessage: (payload: HudStatusLinePayload) => void;
  onCaptureThought: (note: string) => void;
  onExitRequested: () => void;
}

export const SpaceFocusHudWidget = ({
  sessionId = null,
  goal,
  microStep,
  remainingSeconds = null,
  phaseStartedAt = null,
  timeDisplay,
  hasActiveSession = false,
  playbackState = 'paused',
  sessionPhase = 'focus',
  onIntentUpdate,
  onGoalUpdate,
  onGoalFinish,
  onTimerFinish,
  onAddTenMinutes,
  onStatusMessage,
  onCaptureThought,
  onExitRequested,
}: SpaceFocusHudWidgetProps) => {
  const [overlay, setOverlay] = useState<'none' | 'complete' | 'timer-complete'>('none');
  const [completePreferredView, setCompletePreferredView] = useState<'choice' | 'next'>('choice');
  const [isSavingIntent, setSavingIntent] = useState(false);
  
  const visibleRef = useRef(false);
  const timerPromptSignatureRef = useRef<string | null>(null);
  const normalizedGoal = goal.trim().length > 0 ? goal.trim() : copy.space.focusHud.goalFallback;
  const isCompleteOpen = overlay === 'complete' || overlay === 'timer-complete';
  const timerCompletionSignature =
    hasActiveSession &&
    sessionPhase === 'focus' &&
    remainingSeconds === 0 &&
    phaseStartedAt
      ? `${sessionId ?? 'session'}:${phaseStartedAt}`
      : null;

  useEffect(() => {
    if (!hasActiveSession) {
      setOverlay('none');
      setSavingIntent(false);
      setCompletePreferredView('choice');
      timerPromptSignatureRef.current = null;
    }
  }, [hasActiveSession]);

  useEffect(() => {
    if (!visibleRef.current && playbackState === 'running') {
      onStatusMessage({
        message: copy.space.focusHud.goalToast(normalizedGoal),
      });
    }

    visibleRef.current = true;
  }, [normalizedGoal, onStatusMessage, playbackState]);

  useEffect(() => {
    if (!timerCompletionSignature) {
      return;
    }

    if (timerPromptSignatureRef.current === timerCompletionSignature) {
      return;
    }

    timerPromptSignatureRef.current = timerCompletionSignature;
    setOverlay('timer-complete');
  }, [timerCompletionSignature]);

  const handleOpenCompleteSheet = (preferredView: 'choice' | 'next' = 'choice') => {
    setCompletePreferredView(preferredView);
    setOverlay('complete');
  };

  const handleInlineMicrostepUpdate = async (nextStep: string | null) => {
    if (isSavingIntent) return false;
    
    setSavingIntent(true);
    try {
      const didUpdate = await onIntentUpdate({ microStep: nextStep });
      if (didUpdate) {
        if (nextStep) {
          onStatusMessage({ message: copy.space.focusHud.refocusSaved });
        } else {
          onStatusMessage({ message: copy.space.focusHud.microStepCleared });
        }
      }
      return didUpdate;
    } finally {
      setSavingIntent(false);
    }
  };

  return (
    <>
      <ThoughtOrb isFocusMode={hasActiveSession} onCaptureThought={onCaptureThought} />

      <div className="pointer-events-none fixed inset-0 z-20 flex flex-col items-center justify-center pt-10 pb-32">
        {/* The Monolith (Central Hub) */}
        <div className={cn(
          "pointer-events-auto flex flex-col items-center text-center max-w-4xl px-6 transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]",
          isCompleteOpen ? "opacity-0 scale-95 blur-md" : "opacity-100 scale-100 blur-0"
        )}>
          {/* Massive Unstoppable Timer */}
          <div className="relative group cursor-default">
            <p className={cn(
              "text-[8rem] md:text-[14rem] font-light tracking-tighter leading-none transition-colors duration-500",
              sessionPhase === 'break' ? "text-emerald-300 drop-shadow-[0_0_40px_rgba(16,185,129,0.3)]" : "text-white drop-shadow-[0_0_40px_rgba(255,255,255,0.15)]"
            )}>
              {timeDisplay}
            </p>
          </div>

          {/* Core Intent */}
          <div className="mt-8 flex flex-col items-center group w-full">
            {/* Immutable Goal */}
            <h2 className="text-2xl md:text-4xl font-light tracking-tight text-white/95">
              {normalizedGoal}
            </h2>
            
            {/* Kinetic Inline Microstep */}
            <div className="mt-8 flex flex-col items-center w-full max-w-lg min-h-[4rem]">
              <InlineMicrostep 
                microStep={microStep ?? null} 
                isBusy={isSavingIntent} 
                onUpdate={handleInlineMicrostepUpdate} 
              />
            </div>

            {hasActiveSession && (sessionPhase === 'focus' || sessionPhase === 'break') && (
              <button
                type="button"
                onClick={() => handleOpenCompleteSheet('choice')}
                className="mt-8 text-[11px] font-bold uppercase tracking-[0.25em] text-white/30 transition hover:text-white/70"
              >
                End Session
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="pointer-events-none fixed inset-0 z-30">
        <GoalCompleteSheet
          open={isCompleteOpen}
          currentGoal={goal}
          mode={overlay === 'timer-complete' ? 'timer-complete' : 'manual'}
          preferredView={completePreferredView}
          onClose={() => setOverlay('none')}
          onFinish={() =>
            overlay === 'timer-complete'
              ? Promise.resolve(onTimerFinish())
              : Promise.resolve(onGoalFinish())
          }
          onExtendTenMinutes={() => Promise.resolve(onAddTenMinutes())}
          onRest={() => {
            setOverlay('none');
            // The timer doesn't pause, they just rest within the flow.
          }}
          onConfirm={(nextGoal) => {
            return overlay === 'timer-complete'
              ? Promise.resolve(false)
              : Promise.resolve(onGoalUpdate(nextGoal));
          }}
        />
      </div>

      {/* Emergency Tether (Exit) */}
      <div className="fixed bottom-8 inset-x-0 z-40 flex justify-center pointer-events-none">
        <div className="pointer-events-auto opacity-10 hover:opacity-100 transition-opacity duration-500">
          <ExitHoldButton
            variant="bar"
            onConfirm={onExitRequested}
            className="bg-black/20 text-white/70 hover:bg-black/40 hover:text-white border border-white/5 backdrop-blur-md px-6 py-2 rounded-full"
          />
        </div>
      </div>
    </>
  );
};