import { Link } from "react-router-dom";
import type { ApiSettings } from "../../types";
import Button from "../../components/Button";
import PageTitle from "../../components/PageTitle";
import LoadingFrame from "../../components/LoadingFrame";
import Card from "../../components/Card";
import MetricCard from "../../components/MetricCard";
import { useCampaignWorkspaceData } from "./hooks/useCampaignWorkspaceData";
import { asRecord, formatDateTime, getDeliverySection, getNestedString } from "./utils/campaignView";

export default function SendDataPage({ 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;
  const delivery = getDeliverySection(version);
  const rateLimit = asRecord(delivery.rate_limit);
  const imapAppend = asRecord(delivery.imap_append_sent);
  const retry = asRecord(delivery.retry);

  return (
    <div className="content-pad workspace-data-page">
      <div className="page-heading split workspace-heading">
        <div>
          <PageTitle loading={loading}>Send</PageTitle>
          <p className="mono-small">Version {version ? `#${version.version_number}` : "—"} · Loaded {formatDateTime(version?.updated_at)}</p>
        </div>
        <div className="button-row compact-actions">
          <Button onClick={reload} disabled={loading}>Reload</Button>
          <Link to="../wizard/send"><Button variant="primary">Open Send Wizard</Button></Link>
        </div>
      </div>

      {error && <div className="alert danger">{error}</div>}

      <LoadingFrame loading={loading} label="Loading send data…">
      <div className="metric-grid">
        <MetricCard label="Queueable" value={cards?.queueable ?? "—"} tone="good" detail="Ready or warning" />
        <MetricCard label="Needs attention" value={cards?.needs_attention ?? "—"} tone="warning" detail="Review first" />
        <MetricCard label="Sent" value={cards?.sent ?? "—"} tone="info" detail="SMTP success" />
        <MetricCard label="Failed" value={cards?.failed ?? "—"} tone="danger" detail="SMTP failures" />
      </div>

      <div className="dashboard-grid">
        <Card title="Delivery rate limit">
          <dl className="detail-list">
            <div><dt>Messages/minute</dt><dd>{String(rateLimit.messages_per_minute ?? "—")}</dd></div>
            <div><dt>Concurrency</dt><dd>{String(rateLimit.concurrency ?? "—")}</dd></div>
            <div><dt>Max attempts</dt><dd>{String(retry.max_attempts ?? "—")}</dd></div>
            <div><dt>Backoff</dt><dd>{getNestedString(delivery, ["retry", "backoff_seconds"])}</dd></div>
          </dl>
        </Card>

        <Card title="Sent-folder append">
          <dl className="detail-list">
            <div><dt>Enabled</dt><dd>{String(Boolean(imapAppend.enabled))}</dd></div>
            <div><dt>Folder</dt><dd>{String(imapAppend.folder || "auto")}</dd></div>
            <div><dt>Appended</dt><dd>{cards?.imap_appended ?? "—"}</dd></div>
            <div><dt>Append failed</dt><dd>{cards?.imap_failed ?? "—"}</dd></div>
          </dl>
        </Card>
      </div>

      <Card title="Sending rule">
        <p className="muted">
          SMTP sending and IMAP append-to-Sent remain separate states. A successful SMTP send is still successful even if appending to Sent fails.
        </p>
      </Card>
      </LoadingFrame>
    </div>
  );
}