"use client";

import type { GenerationJob } from "@/lib/types";
import { generationErrorMessage, providerErrorDiagnostic } from "@/lib/client/provider-error";

export function GenerationError({ job, isAdmin, providerName }: {
  job: GenerationJob;
  isAdmin: boolean;
  providerName: string;
}) {
  if (!job.error) return null;
  const diagnostic = isAdmin ? providerErrorDiagnostic(job) : null;
  const isFailed = job.status === "failed" || job.status === "expired";
  const entries = diagnostic ? [
    ["服务商", providerName],
    ["HTTP 状态", diagnostic.status],
    ["错误码", diagnostic.code],
    ["请求 ID", diagnostic.requestId],
    ["阶段", diagnostic.phase === "submit" ? "提交" : diagnostic.phase === "query" ? "查询" : undefined],
    ["错误类型", diagnostic.kind],
    ["服务商说明", diagnostic.detail]
  ].filter((entry): entry is [string, string | number] => entry[1] !== undefined && entry[1] !== "") : [];

  return (
    <section className={`generation-error ${isFailed ? "generation-error-failed" : "generation-error-info"}`} role={isFailed ? "alert" : "status"}>
      <strong>{isFailed ? "失败原因" : "任务提示"}</strong>
      <p>{generationErrorMessage(job)}</p>
      {isAdmin && entries.length > 0 ? (
        <details className="generation-error-details">
          <summary>错误详情</summary>
          <dl>
            {entries.map(([label, value]) => <div key={label}><dt>{label}</dt><dd>{value}</dd></div>)}
          </dl>
        </details>
      ) : null}
    </section>
  );
}