// Atlas · Step 6 — Final delivery (real export files from /api/export)
function StepDelivery({ state, reportId, files, user, goBack, goRestart, goHome }) {
  const formatId = state.format || "pdf";

  const allFiles = (files && files.length > 0)
    ? files.map((f) => ({
        ext: f.format,
        name: f.filename,
        size: f.size,
        primary: f.format === formatId,
        downloadUrl: f.downloadUrl,
        error: f.error,
      })).sort((a, b) => b.primary - a.primary)
    : [{ ext: formatId, name: `${reportId || "report"}.${formatId}`, size: "—", primary: true }];

  const today = new Date().toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });

  return (
    <div className="canvas-inner">
      <div className="delivery">
        {/* Files + summary */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Generated files</div>
          <div className="delivery-files">
            {allFiles.map((f) => (
              <div key={f.ext} className="file-row">
                <div className={`ic ${f.ext}`}>{f.ext.toUpperCase()}</div>
                <div className="meta">
                  <div className="nm">
                    {f.name}
                    {f.primary && <span className="pill green">primary</span>}
                    {f.error && <span className="pill amber">error</span>}
                  </div>
                  <div className="sz">{f.error || f.size}</div>
                </div>
                {f.downloadUrl && !f.error && (
                  <a
                    href={f.downloadUrl}
                    className="btn primary sm"
                    download={f.name}
                    style={{ textDecoration: "none" }}
                  >
                    <Icon name="download" size={12} /> Download
                  </a>
                )}
              </div>
            ))}
          </div>

          <div className="summary-card">
            <h3>Run summary</h3>
            <div className="summary-row"><span className="k">Report ID</span><span className="v" style={{ fontFamily: "var(--mono)", fontSize: 11 }}>{reportId || "—"}</span></div>
            <div className="summary-row"><span className="k">Completed</span><span className="v">{today}</span></div>
            <div className="summary-row"><span className="k">Files generated</span><span className="v">{allFiles.filter((f) => !f.error).length}</span></div>
            <div className="summary-row">
              <span className="k">Saved to</span>
              <span className="v" style={{ fontFamily: "var(--mono)", fontSize: 11 }}>
                output/{user?.email ? user.email.split("@")[0] : "user"}/{reportId}/
              </span>
            </div>
          </div>
        </div>
      </div>

      <div className="actionbar">
        <div className="left">Report saved to your Atlas workspace.</div>
        <div className="right">
          <button className="btn ghost" onClick={goBack}><Icon name="arrowLeft" size={14} /> Back to draft</button>
          <button className="btn ghost" onClick={goHome}>Home</button>
          <button className="btn primary lg" onClick={goRestart}>
            <Icon name="plus" size={14} /> Start a new report
          </button>
        </div>
      </div>
    </div>
  );
}

window.StepDelivery = StepDelivery;