import type { ApiSettings } from "../../types";
import Card from "../../components/Card";
import Button from "../../components/Button";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
import { formatDateTime } from "./utils/campaignView";

export default function CampaignReportPage({ settings, campaignId }: { settings: ApiSettings; campaignId: string }) {
  const { data, loading, error, reload } = useCampaignWorkspaceData(settings, campaignId, { includeSummary: true });
  const version = data.currentVersion;
  const cards = data.summary?.cards;

  return (
    <div className="content-pad workspace-data-page">
      <div className="page-heading split workspace-heading">
        <div>
          <PageTitle loading={loading}>Report</PageTitle>
          <p className="mono-small">Version {version ? `#${version.version_number}` : "—"} · Loaded {formatDateTime(version?.updated_at ?? data.summary?.generated_at)}</p>
        </div>
        <div className="button-row compact-actions">
          <Button onClick={reload} disabled={loading}>Reload</Button>
        </div>
      </div>
      {error && <div className="alert danger">{error}</div>}
      <LoadingFrame loading={loading} label="Loading report data…">
      <div className="dashboard-grid">
        <Card title="Report summary">
          <dl className="detail-list">
            <div><dt>Generated</dt><dd>{formatDateTime(data.summary?.generated_at)}</dd></div>
            <div><dt>Jobs total</dt><dd>{cards?.jobs_total ?? "—"}</dd></div>
            <div><dt>Sent</dt><dd>{cards?.sent ?? "—"}</dd></div>
            <div><dt>Failed</dt><dd>{cards?.failed ?? "—"}</dd></div>
          </dl>
        </Card>
        <Card title="Exports">
          <p className="muted">CSV export and report-emailing buttons will be added once the report section is reviewed.</p>
        </Card>
      </div>
      </LoadingFrame>
    </div>
  );
}