"use client";

import { useEffect, useState } from "react";

import { Button, ProgressBar, Spinner } from "@/components/ui";
import type { HomeworkProgress } from "@/lib/client-api";
import { useI18n } from "@/lib/i18n";
import type { HomeworkMode } from "@/lib/schemas";

/** Staged loading state while the assignment is read and answered. */
export function HomeworkLoading({
  progress,
  mode,
  onCancel,
}: {
  progress: HomeworkProgress;
  mode: HomeworkMode;
  onCancel: () => void;
}) {
  const { t } = useI18n();
  const vision = progress.stage === "vision";
  const keys = vision
    ? ["homework.loading.reading", "homework.loading.vision2"]
    : mode === "make"
      ? ["homework.loading.writing", "homework.loading.gen2", "homework.loading.gen3"]
      : ["homework.loading.planning", "homework.loading.gen2", "homework.loading.gen3"];
  const [tick, setTick] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => setTick((value) => value + 1), 2400);
    return () => window.clearInterval(id);
  }, []);

  const message = progress.message && tick === 0 ? progress.message : t(keys[tick % keys.length]);

  return (
    <div className="animate-rise flex flex-col items-center gap-5 py-16 text-center sm:py-24">
      <Spinner className="size-8 text-accent-500" />
      <h1 className="text-[20px] font-semibold tracking-[-0.01em] text-[var(--text)]">{t("homework.loading.title")}</h1>
      <div className="w-full max-w-sm space-y-2">
        <ProgressBar value={vision ? 1 : 2} max={2} label={message} />
        <p className="text-[13.5px] font-medium text-[var(--text-muted)]" role="status" aria-live="polite">
          {message}
        </p>
      </div>
      <Button variant="ghost" size="sm" className="touch-target" onClick={onCancel}>
        {t("common.cancel")}
      </Button>
    </div>
  );
}