import classNames from 'classnames';
import type { CSSProperties, ReactNode } from 'react';

export type ProgressVariant = 'default' | 'info' | 'danger';

export interface ProgressBarProps {
  /** 現在値。null / 未指定で indeterminate（進捗不明）状態になる */
  value?: number | null;
  /** 上限値（既定 100）。value / max で割合を算出する */
  max?: number;
  /** 色バリアント */
  variant?: ProgressVariant;
  /** ストライプ表示 */
  striped?: boolean;
  /** ストライプのアニメーション。value が 100%（max）に達すると自動的に停止する（ストライプ模様は残す） */
  animated?: boolean;
  /** ラベル。バー内（'bar'）またはバー中央への重ね置き（'overlay'）で表示する */
  label?: ReactNode;
  /** ラベルの表示位置（既定 'bar'）。長いラベルや width に追従させたくない場合は 'overlay' */
  labelPosition?: 'bar' | 'overlay';
  /** スクリーンリーダー向けの値ラベル（aria-valuetext） */
  getValueLabel?: (value: number, max: number) => string;
  /** ラッパーへの追加クラス */
  className?: string;
}

const OVERLAY_STYLE: CSSProperties = {
  position: 'absolute',
  inset: 0,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  margin: 0,
  whiteSpace: 'nowrap',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};

/**
 * 管理画面共通のプログレスバー（acms-admin-progress）。
 *
 * スタイルガイド（styleguide/include/parts/progressbar.html）の構造に準拠しつつ、
 * value / max・indeterminate・variant・ARIA を備えた汎用コンポーネント。
 */
const ProgressBar = ({
  value = null,
  max = 100,
  variant = 'default',
  striped = false,
  animated = false,
  label,
  labelPosition = 'bar',
  getValueLabel,
  className,
}: ProgressBarProps) => {
  const isIndeterminate = value === null || value === undefined || !Number.isFinite(value);
  const ratio = !isIndeterminate && max > 0 ? ((value as number) / max) * 100 : 0;
  // indeterminate は専用スタイルが無いため、フル幅＋ストライプアニメーションで「進行中」を示す
  const percent = isIndeterminate ? 100 : Math.max(0, Math.min(100, ratio));
  // 完了（100%）したら流れるアニメーションは自動的に止める（ストライプ模様は残す）
  const isComplete = !isIndeterminate && percent >= 100;
  const withStripe = striped || isIndeterminate;
  const withAnimation = (animated || isIndeterminate) && !isComplete;
  const hasLabel = label !== undefined && label !== null && label !== '';

  return (
    <div
      className={classNames(
        'acms-admin-progress',
        {
          'acms-admin-progress-striped': withStripe,
          'acms-admin-active': withAnimation,
        },
        className
      )}
      style={labelPosition === 'overlay' ? { position: 'relative' } : undefined}
      role="progressbar"
      aria-valuemin={0}
      aria-valuemax={max}
      aria-valuenow={isIndeterminate ? undefined : (value as number)}
      aria-valuetext={!isIndeterminate && getValueLabel ? getValueLabel(value as number, max) : undefined}
    >
      <div
        className={classNames('acms-admin-progress-bar', {
          [`acms-admin-progress-bar-${variant}`]: variant !== 'default',
        })}
        style={{ width: `${percent}%` }}
      >
        {hasLabel && labelPosition === 'bar' && <span>{label}</span>}
      </div>
      {hasLabel && labelPosition === 'overlay' && <span style={OVERLAY_STYLE}>{label}</span>}
    </div>
  );
};

export default ProgressBar;
