"use client";

import {
  formatElapsedSeconds,
  getElapsedNotice,
  getProgressStages,
  type ProgressAction,
} from "../lib/progress/progress";

interface TimingStep {
  label: string;
  duration_ms: number;
}

interface TimingSummary {
  total_ms: number;
  steps: TimingStep[];
}

interface ProgressStep {
  label: string;
  status: "running" | "completed" | "failed";
  duration_ms?: number;
}

interface WorkflowProgress {
  current_step: string | null;
  status: "idle" | "running" | "completed" | "failed";
  steps: ProgressStep[];
}

interface ProgressPanelProps {
  action: ProgressAction | null;
  elapsedSeconds: number;
  lastTiming: TimingSummary | null;
  liveProgress: WorkflowProgress | null;
}

export function ProgressPanel({
  action,
  elapsedSeconds,
  lastTiming,
  liveProgress,
}: ProgressPanelProps) {
  if (!action && !lastTiming) return null;
  const completedTiming = lastTiming;
  const liveSteps =
    action === "optimize" && liveProgress?.steps.length
      ? liveProgress.steps
      : null;

  return (
    <section className="progress-panel" aria-live="polite">
      {action ? (
        <>
          <div className="progress-summary">
            <strong>{getActionLabel(action)}</strong>
            <span>已用时 {formatElapsedSeconds(elapsedSeconds)}</span>
          </div>
          <p>{getElapsedNotice(elapsedSeconds)}</p>
          <ol className="progress-steps">
            {liveSteps
              ? liveSteps.map((step) => (
                  <li key={step.label}>
                    {formatStepStatus(step.status)} {step.label}
                    {typeof step.duration_ms === "number"
                      ? `: ${formatMilliseconds(step.duration_ms)}`
                      : ""}
                  </li>
                ))
              : getProgressStages(action).map((stage) => (
                  <li key={stage.label}>{stage.label}</li>
                ))}
          </ol>
        </>
      ) : completedTiming ? (
        <>
          <div className="progress-summary">
            <strong>最近一次耗时</strong>
            <span>{formatMilliseconds(completedTiming.total_ms)}</span>
          </div>
          {completedTiming.steps.length > 0 && (
            <ol className="progress-steps">
              {completedTiming.steps.map((step) => (
                <li key={`${step.label}-${step.duration_ms}`}>
                  {step.label}: {formatMilliseconds(step.duration_ms)}
                </li>
              ))}
            </ol>
          )}
        </>
      ) : null}
    </section>
  );
}

function getActionLabel(action: ProgressAction) {
  if (action === "analyze") return "正在分析文章";
  if (action === "confirm") return "正在确认事实卡";
  return "正在优化文章";
}

function formatStepStatus(status: ProgressStep["status"]) {
  if (status === "running") return "进行中";
  if (status === "failed") return "失败";
  return "完成";
}

function formatMilliseconds(milliseconds: number) {
  const seconds = Math.round(milliseconds / 1000);
  if (seconds < 60) return `${seconds} 秒`;
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${minutes} 分 ${remainingSeconds} 秒`;
}
