"use client";

import { DocDoeMascot } from "@/components/student-os/DocDoeMascot";

/**
 * App boot surface — branded DocDoe, honest status, no fake completion percent.
 */
function AppLoadingSurface() {
  return (
    <div
      className="fixed inset-0 z-[100] grid place-items-center bg-[#fcfcfa] px-6"
      role="status"
      aria-live="polite"
      aria-label="Preparing your DocDoe learning workspace"
      data-testid="app-loading-screen"
    >
      <div className="relative w-full max-w-[320px] text-center">
        <div
          aria-hidden="true"
          className="mx-auto"
        >
          <DocDoeMascot pose="idle" alt="" size="lg" priority />
        </div>
        <div className="mt-4">
          <p className="text-[17px] font-semibold tracking-[-0.035em] text-[#111827]">
            DocDoe
          </p>
          <p className="mt-0.5 text-[12px] font-medium text-[#6b7280]">
            AI Tuition Partner
          </p>
        </div>

        <div className="mt-7 border-y border-[#e3e1da] py-4 text-left">
          <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-[#77756f]">
            Opening your workspace
          </p>
          <p
            className="mt-1.5 min-h-[1.25rem] text-[14px] font-medium text-[#30302e]"
            data-testid="app-loading-status"
          >
            Checking your saved study state…
          </p>
        </div>

        <div
          className="mt-4 h-[3px] w-full overflow-hidden rounded-full bg-[#e3e1da]"
          data-testid="app-loading-indicator"
          aria-hidden="true"
        >
          <div className="dd-app-loading-bar h-full w-2/5 rounded-full bg-[#171716]" />
        </div>
      </div>
    </div>
  );
}

export function AppLoadingScreen({ isVisible = true }: { isVisible?: boolean }) {
  return isVisible ? <AppLoadingSurface /> : null;
}