"use client";

import type {
  ArticleCaseInputPayload,
  ArticleResultVersionPayload,
  OptimizationResultVersion,
} from "../../lib/cases/types";

interface ArticleCaseDetailProps {
  input: unknown;
  version: OptimizationResultVersion | null;
}

const platformLabels: Record<string, string> = {
  official_site: "官网文章",
  media_article: "媒体稿",
  comparison_review: "对比评测",
  recommendation_list: "推荐榜单",
};

export function ArticleCaseDetail({ input, version }: ArticleCaseDetailProps) {
  const payload = isArticleInput(input) ? input : null;
  const result = isArticleResult(version?.payload) ? version.payload : null;

  return (
    <>
      <section className="panel stack">
        <div className="panel-heading">文章输入</div>
        {payload ? (
          <>
            <div className="case-meta-grid">
              <MetaItem label="标题" value={payload.source_title || "未填写"} />
              <MetaItem
                label="目标平台"
                value={platformLabels[payload.publish_platform] ?? payload.publish_platform}
              />
              <MetaItem
                label="补充要求"
                value={payload.user_instructions || "无"}
              />
              <MetaItem
                label="图片输入"
                value={
                  payload.image_inputs.length > 0
                    ? `${payload.image_inputs.length} 条`
                    : "无"
                }
              />
            </div>
            <pre className="copy-result">{payload.source_body}</pre>
            {payload.image_inputs.length > 0 ? (
              <div className="tag-row">
                {payload.image_inputs.map((item, index) => (
                  <span className="tag" key={`${item.content}-${index}`}>
                    {item.type === "link" ? "链接" : "描述"}：{item.content}
                  </span>
                ))}
              </div>
            ) : null}
          </>
        ) : (
          <p className="empty-panel">没有保存输入。</p>
        )}
      </section>

      {payload?.fact_card ? (
        <section className="panel stack">
          <div className="panel-heading">事实卡</div>
          <pre className="case-json-preview">
            {JSON.stringify(payload.fact_card, null, 2)}
          </pre>
        </section>
      ) : null}

      <section className="panel stack">
        <div className="panel-heading">优化稿</div>
        {result ? (
          <>
            <article className="preview">
              <h2>{result.article.title}</h2>
              <p>{result.article.summary}</p>
              <pre className="case-markdown-preview">
                {result.article.body_markdown}
              </pre>
            </article>
            <section className="stack">
              <h3>质量报告</h3>
              <div className="qa-list">
                {result.qa_report.checks.map((check) => (
                  <div className="qa-item" key={check.rule_id}>
                    <div className="qa-title-row">
                      <strong>{check.rule_id}</strong>
                      <span className={`status-pill ${check.status}`}>
                        {check.status}
                      </span>
                    </div>
                    <p>{check.reason}</p>
                    <small>{check.evidence}</small>
                  </div>
                ))}
              </div>
            </section>
            <section className="stack">
              <h3>导出文件</h3>
              <div className="export-row">
                {Object.entries(result.export_paths).map(([name, path]) => (
                  <a className="download-link" href={path} key={name}>
                    {name}
                  </a>
                ))}
              </div>
            </section>
          </>
        ) : (
          <p className="empty-panel">
            {version?.error_summary ?? "当前版本没有优化稿。"}
          </p>
        )}
      </section>
    </>
  );
}

function MetaItem({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <span>{label}</span>
      <strong>{value}</strong>
    </div>
  );
}

function isArticleInput(value: unknown): value is ArticleCaseInputPayload {
  return (
    value !== null &&
    typeof value === "object" &&
    "source_body" in value &&
    "publish_platform" in value
  );
}

function isArticleResult(value: unknown): value is ArticleResultVersionPayload {
  return (
    value !== null &&
    typeof value === "object" &&
    "article" in value &&
    "qa_report" in value
  );
}