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

import { copy } from "@/shared/i18n";
import { cn } from "@/shared/lib/cn";
import type { HudStatusLinePayload } from "@/shared/lib/useHudStatusLine";
import { useEffect, useRef, useState } from "react";
import { EndSessionConfirmModal } from "./EndSessionConfirmModal";
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>;
  onGoalCompleteFinish: () => boolean | Promise<boolean>;
  onTimerFinish: () => boolean | Promise<boolean>;
  onAddTenMinutes: () => boolean | Promise<boolean>;
  onStatusMessage: (payload: HudStatusLinePayload) => void;
  onCaptureThought: (note: string) => void;
  onExitRequested: () => boolean | Promise<boolean>;
}

export const SpaceFocusHudWidget = ({
  sessionId = null,
  goal,
  microStep,
  remainingSeconds = null,
  phaseStartedAt = null,
  timeDisplay,
  hasActiveSession = false,
  playbackState = "paused",
  sessionPhase = "focus",
  onIntentUpdate,
  onGoalUpdate,
  onGoalCompleteFinish,
  onTimerFinish,
  onAddTenMinutes,
  onStatusMessage,
  onCaptureThought,
  onExitRequested,
}: SpaceFocusHudWidgetProps) => {
  const [overlay, setOverlay] = useState<"none" | "end-session" | "timer-complete">("none");
  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 isTimerCompleteOpen = overlay === "timer-complete";
  const timerCompletionSignature =
    hasActiveSession &&
    sessionPhase === "focus" &&
    remainingSeconds === 0 &&
    phaseStartedAt
      ? `${sessionId ?? "session"}:${phaseStartedAt}`
      : null;

  useEffect(() => {
    if (!hasActiveSession) {
      setOverlay("none");
      setSavingIntent(false);
      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 (overlay !== "timer-complete" || timerCompletionSignature) {
      return;
    }

    setOverlay("none");
  }, [overlay, timerCompletionSignature]);

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

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

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

  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)]",
            overlay !== "none"
              ? "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") && (
                <div className="mt-8 flex items-center gap-4">
                  <button
                    type="button"
                    onClick={() => setOverlay("end-session")}
                    className="text-[11px] font-bold uppercase tracking-[0.25em] text-white/34 transition hover:text-white/76"
                  >
                    {copy.space.endSession.trigger}
                  </button>
                </div>
              )}
          </div>
        </div>
      </div>
      <div className="pointer-events-none fixed inset-0 z-30">
        <GoalCompleteSheet
          open={isTimerCompleteOpen}
          currentGoal={goal}
          onClose={() => setOverlay("none")}
          onFinish={() => Promise.resolve(onTimerFinish())}
          onExtendTenMinutes={() => Promise.resolve(onAddTenMinutes())}
        />
      </div>
      <EndSessionConfirmModal
        open={overlay === "end-session"}
        currentGoal={goal}
        onClose={() => setOverlay("none")}
        onAdvanceGoal={(nextGoal) => Promise.resolve(onGoalUpdate(nextGoal))}
        onFinishHere={() => Promise.resolve(onGoalCompleteFinish())}
        onEndSession={() => Promise.resolve(onExitRequested())}
      />
    </>
  );
};