import { ThinkingIndicator } from "@/components/ThinkingIndicator";
import { cn } from "@/lib/ui/variants";

interface GenerationSkeletonProps {
  // 状态文案（如「续写中」「AI 正在构思本章…」）。
  label: string;
  // 呼吸微光占位行数（默认 3）。
  lines?: number;
  // sm：面板内小占位；lg：正文区大占位（更粗行 + 稍大标签）。
  size?: "sm" | "lg";
  className?: string;
}

// 占位行宽度序列（错落感，示意即将落笔的段落）。
const LINE_WIDTHS = ["90%", "78%", "84%", "68%", "72%"];

// AI 同步/构思等待占位：三点波动标签 + `ai-breathe` 呼吸微光占位行，
// 比单三点更明显地传达「正在生成」。占位行 aria-hidden；role=status/aria-live 由
// ThinkingIndicator 提供，读屏可知在生成。ai-breathe 自带 reduced-motion 回退。
export function GenerationSkeleton({
  label,
  lines = 3,
  size = "sm",
  className,
}: GenerationSkeletonProps) {
  return (
    <div className={cn("space-y-2.5", className)}>
      <ThinkingIndicator
        label={label}
        className={cn("text-cinnabar", size === "lg" ? "text-sm" : "text-xs")}
      />
      <div className="space-y-2" aria-hidden="true">
        {Array.from({ length: lines }).map((_, i) => (
          <div
            key={i}
            className={cn(
              "ai-breathe rounded bg-line/60",
              size === "lg" ? "h-3.5" : "h-3",
            )}
            style={{
              width: LINE_WIDTHS[i % LINE_WIDTHS.length],
              animationDelay: `${i * 160}ms`,
            }}
          />
        ))}
      </div>
    </div>
  );
}