import { useVoxtral } from "./VoxtralContext";
import { THEME } from "../constants";
import {
  AppGridBackground,
  ErrorMessageBox,
  useMountedTransition,
} from "./SharedUI";

export const LoadingPage = () => {
  const { loadingProgress, loadingMessage, error } = useVoxtral();
  const mounted = useMountedTransition();
  const progressClamped = Math.min(100, Math.max(0, loadingProgress));
  const isError = !!error;

  return (
    <AppGridBackground className="min-h-screen flex items-center justify-center p-8">
      <div
        className={`max-w-md w-full backdrop-blur-sm rounded-sm border shadow-xl transition-all duration-700 transform ${mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
        style={{
          backgroundColor: `${THEME.beigeLight}F2`,
          borderColor: THEME.beigeDark,
        }}
      >
        <div
          className={`h-1 w-full transition-colors duration-300 ${isError ? "bg-[var(--mistral-red)]" : "bg-[var(--mistral-orange)]"}`}
        />

        <div className="p-8 space-y-8">
          <div className="flex justify-center">
            {isError ? (
              <div
                className="w-20 h-20 rounded-full flex items-center justify-center border"
                style={{
                  backgroundColor: `${THEME.errorRed}1A`,
                  borderColor: `${THEME.errorRed}33`,
                }}
              >
                <svg
                  className="w-10 h-10"
                  style={{ color: THEME.errorRed }}
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={2}
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
                  />
                </svg>
              </div>
            ) : (
              <div className="relative">
                <div
                  className="w-20 h-20 border-4 rounded-full animate-spin"
                  style={{
                    borderColor: THEME.beigeDark,
                    borderTopColor: THEME.mistralOrange,
                  }}
                />
                <div className="absolute inset-0 flex items-center justify-center">
                  <div
                    className="w-2 h-2 rounded-full animate-pulse"
                    style={{ backgroundColor: THEME.mistralOrange }}
                  />
                </div>
              </div>
            )}
          </div>

          <div className="text-center space-y-2">
            <h2
              className="text-2xl font-bold tracking-tight"
              style={{ color: THEME.textBlack }}
            >
              {isError ? "Initialization Failed" : "Loading Model"}
            </h2>
            <p className="text-sm text-gray-500 font-mono uppercase tracking-widest">
              {isError ? "Voxtral-Mini-4B-Realtime" : loadingMessage}
            </p>
          </div>

          {!isError && (
            <div className="space-y-4">
              <div className="flex justify-between text-xs font-mono font-bold text-gray-500">
                <span>PROGRESS</span>
                <span>{Math.round(progressClamped)}%</span>
              </div>

              <div
                className="w-full rounded-full h-4 overflow-hidden border"
                style={{
                  backgroundColor: `${THEME.beigeDark}80`,
                  borderColor: THEME.beigeDark,
                }}
              >
                <div
                  className="h-full progress-stripe transition-all duration-500 ease-out"
                  style={{
                    width: `${progressClamped}%`,
                    backgroundColor: THEME.mistralOrange,
                  }}
                />
              </div>

              <div
                className="bg-white border p-3 rounded-sm"
                style={{ borderColor: THEME.beigeDark }}
              >
                <div className="flex items-center space-x-2">
                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                  <p className="font-mono text-xs text-gray-600 truncate">
                    {`> ${loadingMessage}`}
                  </p>
                </div>
              </div>
            </div>
          )}

          {isError && (
            <div className="space-y-4">
              <ErrorMessageBox
                className="border p-4 rounded text-left"
                message={error}
              />
              <button
                onClick={() => window.location.reload()}
                className="w-full py-3 text-white font-bold transition-colors shadow-lg hover:bg-black cursor-pointer"
                style={{ backgroundColor: THEME.textBlack }}
              >
                RELOAD APPLICATION
              </button>
            </div>
          )}
        </div>
      </div>
    </AppGridBackground>
  );
};