import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Spinner } from '@/components/ui/spinner';
import { formatElapsedTime } from '../utils';

interface TaskStatusProps {
  requestId: string | null;
  taskProgress: any;
  startTime: number | null;
  elapsedSeconds: number;
  completionProgress: number;
  currentAnalysisTask: string | null;
  analysisConfig: any;
}

export function TaskStatus({
  requestId,
  taskProgress,
  startTime,
  elapsedSeconds,
  completionProgress,
  currentAnalysisTask,
  analysisConfig,
}: TaskStatusProps) {
  return (
    <>
      <Card className="w-80">
        <CardHeader>
          <CardTitle className="text-lg">任务进度（新架构）</CardTitle>
        </CardHeader>
        <CardContent className="text-xs text-muted-foreground">
          {requestId ? (
            <pre>{JSON.stringify(taskProgress || {}, null, 2)}</pre>
          ) : (
            <div>未触发任务</div>
          )}
        </CardContent>
      </Card>

      <Card className="w-80">
        <CardHeader className="flex flex-col space-y-2 pb-2">
          <div className="flex flex-row items-center justify-between w-full">
            <CardTitle className="text-xl">任务状态</CardTitle>
            {startTime && (
              <div className="text-sm font-medium text-muted-foreground ml-auto">
                总耗时: {formatElapsedTime(elapsedSeconds)}
              </div>
            )}
          </div>
          <div className="w-full bg-muted rounded-full h-2 mt-1">
            <div
              className="bg-primary h-2 rounded-full transition-all duration-300"
              style={{ width: `${completionProgress}%` }}
            />
          </div>
        </CardHeader>
        <CardContent className="space-y-2">
          {currentAnalysisTask && analysisConfig && (
            (() => {
              const analysisName = analysisConfig.analysis_modules?.[currentAnalysisTask]?.name || currentAnalysisTask;
              const modelName = analysisConfig.analysis_modules?.[currentAnalysisTask]?.model || 'AI';
              return (
                <div className="flex items-center gap-2 text-sm">
                  <Spinner className="size-4" />
                  <div>
                    <div className="font-medium">{analysisName}（来自 {modelName}）</div>
                    <div className="text-xs text-muted-foreground">正在生成{analysisName}...</div>
                  </div>
                </div>
              );
            })()
          )}
        </CardContent>
      </Card>
    </>
  );
}