import { useProgress } from '@react-three/drei';

import { useViewerStore } from '../../store/viewerStore';

export function LoadingProgressOverlay() {
  const loading = useViewerStore((state) => state.loading);
  const { active, progress, item, errors } = useProgress();

  const isError = loading.phase === 'error' || errors.length > 0;
  const visible = active || loading.phase === 'loading' || loading.phase === 'preparing' || isError;

  if (!visible) {
    return null;
  }

  const progressValue = isError
    ? 100
    : Math.max(
        loading.progress,
        Number.isFinite(progress) ? Math.round(progress) : 0
      );

  return (
    <div
      className="absolute inset-0 z-30 flex items-center justify-center rounded-2xl bg-[#0B0E14]/82 backdrop-blur-xl"
      role="status"
      aria-live="polite"
      aria-label={isError ? 'Viewer asset failed to load' : 'Loading viewer asset'}
    >
      <div className="w-[min(420px,calc(100%-2rem))] rounded-2xl border border-white/10 bg-[#121721]/90 p-5 shadow-2xl shadow-black/30">
        <div className="mb-4 flex items-center gap-3">
          <div className="h-11 w-11 animate-pulse rounded-xl border border-sky-300/30 bg-sky-400/10 shadow-[0_0_32px_rgba(76,141,255,0.25)]" />
          <div className="min-w-0">
            <p className="text-sm font-semibold text-white">
              {isError ? 'Unable to load machine asset' : 'Preparing 3D machine'}
            </p>
            <p className="truncate text-xs text-slate-400">
              {isError
                ? loading.error ?? String(errors[0] ?? 'Unknown loader error')
                : item || loading.label || 'Building scene graph'}
            </p>
          </div>
        </div>

        <div className="h-2 overflow-hidden rounded-full bg-white/8">
          <div
            className={`h-full rounded-full ${
              isError
                ? 'bg-red-400'
                : 'bg-gradient-to-r from-sky-400 via-blue-400 to-amber-300'
            } transition-[width] duration-300 ease-out`}
            style={{ width: `${progressValue}%` }}
          />
        </div>

        <div className="mt-3 flex justify-between text-[11px] uppercase tracking-[0.18em] text-slate-500">
          <span>{isError ? 'Check registry' : 'Streaming geometry'}</span>
          <span>{progressValue}%</span>
        </div>
      </div>
    </div>
  );
}