freezmo/components/LoadingState.tsx

"use client";

import { useEffect, useState } from "react";
import { motion, useReducedMotion } from "framer-motion";

import { Button, ProgressBar } from "@/components/ui";
import { useI18n } from "@/lib/i18n";

/**
 * The one loading screen for every model pipeline — deck/notes creation,
 * homework, and the route-level "preparing…" screens: the app icon, the
 * rotating stage message as the headline, the two-step progress bar, the
 * checklist of stages, an optional tip and Cancel.
 *
 * Extracted from the deck wizard (the look people already know) so the
 * homework flows and route loads read exactly the same.
 */

export type LoadingStage = {
  id: string;
  /** First line of the checklist (= the stage's first message). */
  labelKey: string;
  /** Rotating messages while this stage runs. */
  messageKeys: string[];
};

export function LoadingState({
  stages,
  activeStage,
  message,
  messageKey,
  tipKeys,
  onCancel,
}: {
  /** Pipeline stages in order. Omit for a plain "working" screen. */
  stages?: LoadingStage[];
  /** Which stage is running now (matches a stage id). */
  activeStage?: string;
  /** Live message from the server; wins until the first rotation tick. */
  message?: string;
  /** Static message for screens without stages. */
  messageKey?: string;
  /** Pick one of these at random and show it under the stages. */
  tipKeys?: string[];
  onCancel?: () => void;
}) {
  const { t } = useI18n();
  const reduceMotion = useReducedMotion();
  const [tick, setTick] = useState(0);
  const [tip, setTip] = useState<string | null>(null);

  useEffect(() => {
    if (!stages) return;
    const timer = window.setInterval(() => setTick((value) => value + 1), 3200);
    return () => window.clearInterval(timer);
  }, [stages]);

  useEffect(() => {
    if (!tipKeys || tipKeys.length === 0) return;
    setTip(tipKeys[Math.floor(Math.random() * tipKeys.length)]);
  }, [tipKeys]);

  const activeIndex = stages ? Math.max(0, stages.findIndex((stage) => stage.id === activeStage)) : 0;
  const rotation = stages?.[activeIndex]?.messageKeys ?? [];
  const shown =
    tick === 0 && message
      ? message
      : rotation.length > 0
        ? t(rotation[tick % rotation.length])
        : messageKey
          ? t(messageKey)
          : "";

  return (
    <div
      role="status"
      aria-busy="true"
      className="relative flex min-h-[70dvh] flex-col items-center justify-center gap-6 text-center"
    >
      {/* The app icon, not the bare snowflake — same logo as the header,
          sidebar and empty states. */}
      <motion.div
        aria-hidden
        animate={reduceMotion ? undefined : { rotate: [0, 8, -8, 0], scale: [1, 1.08, 1] }}
        transition={{ duration: 3.2, repeat: Infinity, ease: "easeInOut" }}
        className="relative size-28"
      >
        {/* eslint-disable-next-line @next/next/no-img-element -- static app icon, no optimisation needed */}
        <img src="/icons/icon-512.png" alt="" className="size-28 rounded-[1.75rem] shadow-lift" />
      </motion.div>

      <div className="relative w-full max-w-md space-y-3">
        <motion.p
          key={shown}
          initial={reduceMotion ? false : { opacity: 0, y: 8 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.22, ease: "easeOut" }}
          className="text-xl font-extrabold text-[var(--text)]"
          aria-live="polite"
        >
          {shown}
        </motion.p>

        {stages && stages.length > 0 ? (
          <ProgressBar value={activeIndex + 1} max={stages.length} label={t("upload.generationProgress")} />
        ) : null}

        {stages && stages.length > 1 ? (
          <ol className="space-y-1 text-left text-[14.5px] leading-relaxed text-[var(--text-muted)]">
            {stages.map((stage, index) => (
              <li key={stage.id} className="flex items-center gap-2">
                <span aria-hidden>{index < activeIndex ? "✅" : index === activeIndex ? "🌀" : "⬜"}</span>
                {t(stage.labelKey)}
              </li>
            ))}
          </ol>
        ) : null}

        {tip ? <p className="pt-2 text-[12.5px] text-[var(--text-subtle)]">{t(tip)}</p> : null}

        {onCancel ? (
          <Button variant="ghost" size="sm" className="touch-target" onClick={onCancel}>
            {t("upload.cancel")}
          </Button>
        ) : null}
      </div>
    </div>
  );
}