import { type CSSProperties, type HTMLAttributes } from 'react';

import { useReducedMotion } from '../../hooks/useReducedMotion';

export interface SkeletonBlockProps extends HTMLAttributes<HTMLDivElement> {
  width?: number | string;
  height?: number | string;
  rounded?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
  animated?: boolean;
}

export interface LoadingProgressBarProps {
  progress?: number;
  label?: string;
}

export interface LoadingFallbackProps {
  label?: string;
  detail?: string;
  progress?: number;
  compact?: boolean;
}

const roundedClass = {
  sm: 'rounded',
  md: 'rounded-md',
  lg: 'rounded-lg',
  xl: 'rounded-xl',
  full: 'rounded-full',
};

export function SkeletonBlock({
  width = '100%',
  height = 16,
  rounded = 'md',
  animated = true,
  className,
  style,
  ...props
}: SkeletonBlockProps): JSX.Element {
  const reduceMotion = useReducedMotion();
  const blockStyle: CSSProperties = {
    width,
    height,
    ...style,
  };

  return (
    <div
      {...props}
      aria-hidden="true"
      style={blockStyle}
      className={cx(
        'bg-gradient-to-r from-white/[0.06] via-white/[0.12] to-white/[0.06]',
        roundedClass[rounded],
        animated && !reduceMotion ? 'animate-pulse' : '',
        className,
      )}
    />
  );
}

export function LoadingProgressBar({
  progress,
  label = 'Loading',
}: LoadingProgressBarProps): JSX.Element {
  const reduceMotion = useReducedMotion();
  const hasProgress = typeof progress === 'number' && Number.isFinite(progress);
  const safeProgress = hasProgress ? Math.min(100, Math.max(0, progress)) : 42;

  return (
    <div className="w-full" aria-label={label}>
      <div className="flex items-center justify-between text-xs text-slate-400">
        <span>{label}</span>
        {hasProgress ? <span className="tabular-nums">{Math.round(safeProgress)}%</span> : null}
      </div>
      <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-white/10">
        <div
          className={cx(
            'h-full rounded-full bg-[#4C8DFF]',
            !reduceMotion ? 'transition-[width,transform] duration-300 ease-out' : '',
            !hasProgress && !reduceMotion ? 'animate-pulse' : '',
          )}
          style={{
            width: `${safeProgress}%`,
          }}
        />
      </div>
    </div>
  );
}

export function ViewerLoadingFallback({
  label = 'Preparing 3D machine',
  detail = 'Loading geometry, materials, annotations, and animation controllers.',
  progress,
  compact = false,
}: LoadingFallbackProps): JSX.Element {
  return (
    <div
      role="status"
      aria-live="polite"
      className={cx(
        'flex h-full min-h-[320px] w-full items-center justify-center bg-[#0B0E14]',
        compact ? 'p-4' : 'p-8',
      )}
    >
      <div className="w-full max-w-md rounded-2xl border border-white/10 bg-[#121721]/90 p-5 shadow-2xl shadow-black/30 backdrop-blur">
        <div className="flex items-center gap-4">
          <SkeletonBlock width={56} height={56} rounded="xl" />
          <div className="min-w-0 flex-1">
            <p className="text-sm font-semibold text-slate-100">{label}</p>
            <p className="mt-1 text-xs leading-5 text-slate-400">{detail}</p>
          </div>
        </div>
        <div className="mt-5">
          <LoadingProgressBar progress={progress} label="Asset loading progress" />
        </div>
      </div>
    </div>
  );
}

export function RouteLoadingFallback({
  label = 'Loading Mechanica',
  detail = 'Assembling the explorer workspace.',
  progress,
}: LoadingFallbackProps): JSX.Element {
  return (
    <div role="status" aria-live="polite" className="min-h-screen bg-[#0B0E14] p-4 text-slate-100">
      <div className="mx-auto grid max-w-7xl gap-4 lg:grid-cols-[280px_minmax(0,1fr)_320px]">
        <PanelSkeleton titleWidth="55%" rows={8} />
        <div className="min-h-[520px] rounded-2xl border border-white/10 bg-[#121721]/70 p-5">
          <div className="flex items-center justify-between">
            <div>
              <SkeletonBlock width={160} height={18} rounded="full" />
              <SkeletonBlock width={260} height={12} rounded="full" className="mt-3" />
            </div>
            <SkeletonBlock width={120} height={36} rounded="full" />
          </div>
          <div className="mt-8">
            <ViewerLoadingFallback label={label} detail={detail} progress={progress} compact />
          </div>
        </div>
        <PanelSkeleton titleWidth="70%" rows={10} />
      </div>
    </div>
  );
}

export function CatalogueSkeleton({ count = 8 }: { count?: number }): JSX.Element {
  return (
    <div role="status" aria-label="Loading catalogue" className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      {Array.from({ length: count }, (_, index) => (
        <article
          key={index}
          className="rounded-2xl border border-white/10 bg-[#121721]/80 p-4 shadow-xl shadow-black/20"
        >
          <SkeletonBlock height={148} rounded="xl" />
          <SkeletonBlock width="72%" height={18} rounded="full" className="mt-5" />
          <SkeletonBlock width="44%" height={12} rounded="full" className="mt-3" />
          <div className="mt-5 flex gap-2">
            <SkeletonBlock width={76} height={24} rounded="full" />
            <SkeletonBlock width={96} height={24} rounded="full" />
          </div>
        </article>
      ))}
    </div>
  );
}

export function PanelSkeleton({
  titleWidth = '60%',
  rows = 6,
}: {
  titleWidth?: number | string;
  rows?: number;
}): JSX.Element {
  return (
    <aside className="rounded-2xl border border-white/10 bg-[#121721]/80 p-4 shadow-xl shadow-black/20">
      <SkeletonBlock width={titleWidth} height={18} rounded="full" />
      <div className="mt-6 space-y-3">
        {Array.from({ length: rows }, (_, index) => (
          <div key={index} className="rounded-xl border border-white/5 bg-white/[0.03] p-3">
            <SkeletonBlock width={`${72 - (index % 3) * 12}%`} height={14} rounded="full" />
            <SkeletonBlock width={`${46 + (index % 4) * 8}%`} height={10} rounded="full" className="mt-3" />
          </div>
        ))}
      </div>
    </aside>
  );
}

export function LoadingOverlay({
  label = 'Loading',
  progress,
}: Pick<LoadingFallbackProps, 'label' | 'progress'>): JSX.Element {
  return (
    <div
      role="status"
      aria-live="polite"
      className="absolute inset-0 z-50 flex items-center justify-center bg-[#0B0E14]/80 p-6 backdrop-blur-md"
    >
      <div className="w-full max-w-sm rounded-2xl border border-white/10 bg-[#121721]/95 p-5">
        <LoadingProgressBar label={label} progress={progress} />
      </div>
    </div>
  );
}

function cx(...classes: Array<string | undefined | false>): string {
  return classes.filter(Boolean).join(' ');
}