// Special Reports center backed by D1 templates and report rows

function Special({ go }) {
  const { snapshot } = window.useGGGSnapshot ? window.useGGGSnapshot() : { snapshot: null };
  const project = window.GGGApi?.resolveActiveProject?.(snapshot) || snapshot?.projects?.[0];
  const generated = (snapshot?.specialReports || []).filter((report) => !project?.id || report.project_id === project.id);
  const templates = snapshot?.specialTemplates || [];
  const generatedCategories = new Set(generated.map((report) => report.report_type));
  const available = templates.filter((item) => !generatedCategories.has(item.category));

  return (
    <AppShell go={go} current="special" pageBreadcrumbs={[
      { label: "项目", go: () => go("project") },
      { label: project?.name || "出海项目", go: () => project?.id ? go("project", project.id) : go("project") },
      { label: "专项报告中心" },
    ]}>
      <div className="page">
        <div className="page-header">
          <div>
            <h1 className="page-title">专项报告中心</h1>
            <p className="page-sub">主报告就绪后，可继续生成细分方向的深度报告。模板和已生成版本来自 D1。</p>
          </div>
          <div className="row-flex">
            <button className="btn btn-ghost btn-sm"><Icon name="filter" size={14} /> 筛选类型</button>
          </div>
        </div>

        <h3 className="section-label">已生成 ({generated.length})</h3>
        <div className="special-grid" style={{ marginBottom: 36 }}>
          {generated.map((report) => {
            const template = templates.find((item) => item.category === report.report_type) || {};
            return (
              <div key={report.id} className={"special-card tone-" + (template.tone || "default")} style={{ position: "relative" }} onClick={() => go("report", report.project_id || project?.id)}>
                <span className={"badge " + (report.status === "completed" ? "badge-green" : "badge-orange")} style={{ position: "absolute", top: 16, right: 16, padding: "2px 8px", fontSize: 11 }}>
                  <span className="badge-dot"></span>{report.status === "completed" ? `v${report.version}` : "草稿"}
                </span>
                <div className="ico"><Icon name={template.icon || "file-text"} size={18} /></div>
                <h3>{report.title}</h3>
                <p className="desc">{template.description || "基于当前项目上下文生成的专项报告。"}</p>
                <div className="foot">
                  <div style={{ fontSize: 11.5, color: "var(--muted)" }}>{dateOnly(report.updated_at)}</div>
                  <button className="btn-link" style={{ fontSize: 12 }}>查看 →</button>
                </div>
              </div>
            );
          })}
        </div>

        <h3 className="section-label">可生成 ({available.length})</h3>
        <div className="special-grid">
          {available.map((template) => (
            <div key={template.id} className={"special-card tone-" + template.tone}>
              <div className="ico"><Icon name={template.icon || "file-text"} size={18} /></div>
              <h3>{template.title}</h3>
              <p className="desc">{template.description}</p>
              <div className="meta">
                <span><Icon name="clock" size={11} /> {template.estimated_minutes} 分钟</span>
                <span>·</span>
                <span className={"badge badge-" + riskTone(template.risk_level)} style={{ padding: "1px 7px", fontSize: 10.5 }}>风险 {riskLabel(template.risk_level)}</span>
                {template.requires_expert ? <span style={{ color: "#B47308" }}>· 建议专家审核</span> : null}
              </div>
              <div className="foot">
                <div style={{ fontSize: 11.5, color: "var(--muted)" }}>
                  {template.missing_info_count ? <span style={{ color: "var(--warning)" }}>缺 {template.missing_info_count} 项信息</span> : <span style={{ color: "var(--success)" }}>信息齐全</span>}
                </div>
                <button className="btn btn-soft btn-sm">
                  <Icon name="sparkles" size={12} /> 立即生成
                </button>
              </div>
            </div>
          ))}
        </div>

        <div className="callout" style={{ marginTop: 40 }}>
          <div className="callout-title">关于专项报告的合规边界</div>
          标注「建议专家审核」的专项报告涉及法律、税务、移民等高风险领域。AI 输出作为整理与提示，不构成专业意见。
        </div>
      </div>
    </AppShell>
  );
}

function riskTone(risk) {
  if (risk === "high") return "red";
  if (risk === "medium") return "orange";
  return "green";
}

function riskLabel(risk) {
  if (risk === "high") return "高";
  if (risk === "medium") return "中";
  return "低";
}

window.Special = Special;