src/components/states/StudyLoadingShell.tsx

"use client";

import Image from "next/image";
import { useEffect, useState } from "react";

/**
 * In-app full-surface loading — light Student OS brand (not the old carbon shell).
 * Prefer StudentOsPageSkeleton for route-level loading; this remains for any
 * full-viewport study wait that needs branded feedback.
 */
const CALM_LOGS = [
  "Preparing your study space…",
  "Checking your session…",
  "Reading your textbook…",
  "Mapping board-important concepts…",
  "Building exam-grounded answers…",
];

export function StudyLoadingShell() {
  const [logIndex, setLogIndex] = useState(0);

  useEffect(() => {
    const interval = window.setInterval(() => {
      setLogIndex((prev) => (prev + 1) % CALM_LOGS.length);
    }, 1800);
    return () => window.clearInterval(interval);
  }, []);

  return (
    <div
      className="fixed inset-0 z-50 flex flex-col items-center justify-center bg-[#f8f9fb] text-[#16171c]"
      role="status"
      aria-live="polite"
      aria-label="Preparing your study space"
      data-testid="study-loading-shell"
    >
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_40%,rgba(108,67,243,0.07),transparent_24rem)]" />
      <div className="relative flex flex-col items-center gap-5">
        <div className="relative">
          <div className="absolute inset-x-5 bottom-1 h-3 rounded-[50%] bg-[rgba(108,67,243,0.14)] blur-md" />
          <Image
            src="/student-os/docdoe-mascot-v2.png"
            alt=""
            width={88}
            height={88}
            className="relative drop-shadow-[0_12px_24px_rgba(108,67,243,0.16)]"
            priority
          />
        </div>

        <div className="h-1.5 w-44 overflow-hidden rounded-full bg-[#ececf3]">
          <div className="h-full w-2/3 animate-pulse rounded-full bg-[linear-gradient(90deg,#6c43f3,#9d82ff)]" />
        </div>

        <div className="flex h-8 items-center justify-center">
          <p
            className="text-[13px] font-medium tracking-wide text-[#7d808b] transition-all duration-300"
            key={logIndex}
          >
            {CALM_LOGS[logIndex]}
          </p>
        </div>
      </div>
    </div>
  );
}