type EightAnchorProgressBarProps = {
  currentTurn: number;
  progressPercent: number;
  disabled: boolean;
  onSummaryClick: () => void;
  onQuickFill: () => void;
  onGenerateDraft: () => void;
};

function clampProgress(progressPercent: number) {
  if (!Number.isFinite(progressPercent)) {
    return 0;
  }

  return Math.max(0, Math.min(100, Math.round(progressPercent)));
}

function resolveProgressHint(progressPercent: number) {
  if (progressPercent >= 100) {
    return '当前设定已经收束完成，可以进入草稿生成';
  }

  if (progressPercent >= 75) {
    return '正在收束成一版可进入草稿的世界底子';
  }

  if (progressPercent >= 45) {
    return '世界方向已经成形，继续补关键骨架';
  }

  if (progressPercent >= 15) {
    return '先把玩家视角、开局和冲突线钉稳';
  }

  return '先抓住这个世界最关键的方向';
}

export function EightAnchorProgressBar({
  currentTurn,
  progressPercent,
  disabled,
  onSummaryClick,
  onQuickFill,
  onGenerateDraft,
}: EightAnchorProgressBarProps) {
  const normalizedProgress = clampProgress(progressPercent);
  const isCompleted = normalizedProgress >= 100;
  const canQuickFill = currentTurn >= 2;
  const progressFillStyle = isCompleted
    ? { background: 'linear-gradient(90deg, #86efac 0%, #34d399 100%)' }
    : { background: 'var(--platform-button-primary-fill)' };

  return (
    <div className="platform-remap-surface platform-subpanel rounded-[1.75rem] p-4">
      <div className="flex flex-col gap-3">
        <div className="flex items-start justify-between gap-3">
          <div>
            <div className="text-xs font-semibold tracking-[0.14em] text-[var(--platform-text-base)]">
              创作进度
            </div>
            <div className="mt-1 text-sm text-[var(--platform-text-soft)]">
              {resolveProgressHint(normalizedProgress)}
            </div>
          </div>
          <div className="text-lg font-semibold text-[var(--platform-text-strong)]">
            {normalizedProgress}%
          </div>
        </div>

        <div className="platform-progress-track h-3 overflow-hidden rounded-full">
          <div
            className="h-full rounded-full transition-[width] duration-500"
            style={{
              width: `${Math.max(6, normalizedProgress)}%`,
              ...progressFillStyle,
            }}
          />
        </div>
        <div className="flex flex-wrap items-center justify-between gap-3">
          <button
            type="button"
            onClick={onSummaryClick}
            disabled={disabled}
            className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-45"
          >
            总结当前设定
          </button>
          {isCompleted ? (
            <button
              type="button"
              onClick={onGenerateDraft}
              disabled={disabled}
              className="platform-button platform-button--primary min-h-[3rem] rounded-[1.1rem] px-4 py-3 text-sm disabled:cursor-not-allowed disabled:opacity-45"
            >
              生成游戏设定草稿
            </button>
          ) : canQuickFill ? (
            <button
              type="button"
              onClick={onQuickFill}
              disabled={disabled}
              className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs disabled:cursor-not-allowed disabled:opacity-45"
            >
              补全剩余设定
            </button>
          ) : null}
        </div>
      </div>
    </div>
  );
}