import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { Megaphone, AlertTriangle, Lock } from 'lucide-react';
import { useCampaignServiceContext, type Campaign, type CampaignCtaStyle, type ConditionCatalogueRow, type CampaignCapabilities, type CampaignChannel, type CampaignCommand } from '../../../services/CampaignService';
import { selectedConditionRows, toggleConditionRow } from './campaignConditions';
import {
    EMPTY_DRAFT, buildSegment, draftFromSegment, validateDraft, describeSegment,
    GENDERS, LAST_APPT_STATUSES, ANY_STATUS_WITHIN_DAYS_STATUSES, MIN_AGE, MAX_AGE, MAX_DAYS,
    type SegmentDraft,
} from './campaignSegment';
import { CTA_PLACEHOLDER, MAX_CTA_LABEL } from './campaignCta';
import { isEditable, describeCampaign, NOT_CONFIGURED_COPY, campaignSetupDestination, CAMPAIGN_TONE_PILL as TONE_CLASS } from './campaignStatus';
import { useAudienceCount, canSend, canSendNow } from './audienceCount';
import { reasonRows } from './audienceReasons';
import CampaignConfirmDialog, { sendNowConfirmation, scheduleConfirmation, scheduledWhenLabel, resumeConfirmation } from './CampaignConfirmDialog';
import { readRefusal, type CampaignRefusal } from './campaignRefusal';
import { smsChannelAvailability } from './smsChannelAvailability';
import { useBillingContext } from '../../../services/BillingContext';
import { describeTracking, campaignReportRows } from './campaignReport';
import { type PractitionerWithRoles } from '../../../services/PractitionerService';
import { useFhirPractitioners } from '../../../hooks/useFhirPractitioners';
import { useFhirLocations } from '../../../hooks/useFhirLocations';
import { practitionerAxis } from './campaignPractitionerAxis';
import { useLocationServiceContext } from '../../../services/LocationService';
import { Input } from '../../../components/ui/input';
import { Textarea } from '../../../components/ui/textarea';
import { Label } from '../../../components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../components/ui/select';
import { Checkbox } from '../../../components/ui/checkbox';
import {
    smsSegmentsFor, smsCostPerRecipientUsd, charactersUntilNextSegment, smsWireTextFor, smsEncodingPlan,
} from './smsSegments';
import { Card, CardContent } from '../../../components/ui/card';
import { Skeleton } from '../../../components/ui/skeleton';
import { Alert, AlertDescription } from '../../../components/ui/alert';
import { useStaffPermissionServiceContext } from '../../../services';
import { useSaveScope, isSaveRetired, outcomeUnknown } from '../../../utils/saveOperation';
import { onViewerChange, viewerEpoch } from '../../../utils/writeThroughHold';
import { settingsWriteHolder, useUnresolvedSettingsWrite, unresolvedSettingsWrite, holdSettingsWrite, newSettingsOperationId } from '../../../utils/unresolvedSettingsWrite';
import { environment } from '../../../environments/environment';
import { DismissibleAlert } from '../../../components/ui/dismissible-alert';
import { Badge } from '../../../components/ui/badge';

//
// S4d Phase 2 - the composer's CONTENT and SEGMENT halves and read-only path (task 6), plus
// the audience-count panel and the Send/Schedule actions (task 7).
//
// THE COUNT IS A PRECONDITION FOR SENDING, NOT A PREVIEW. `POST /send` and `POST /schedule` both
// refuse without a server-stored preview for THIS EXACT segment - complete, fresh, untruncated -
// plus an `acknowledgedCount`. `canSend` (audienceCount.ts) is the client-side mirror of that gate;
// any change to the segment draft calls `reset()` so a stale count can never be read as current.
//
// Diagnoses are chosen as whole rows of the server's condition catalogue. A campaign whose
// `segment.conditionCodes` are not whole rows cannot be shown as choices, and editing it would change
// its audience unseen, so it renders read-only with an explanation instead.
//

type Phase = 'loading' | 'loaded' | 'loadFailed';


// Sentinel for Radix Select's "nothing chosen" state - Radix refuses a `SelectItem value=""`, so an
// unset optional axis is represented by this string on the wire between the Select and the draft,
// never sent anywhere: `buildSegment` only ever sees the draft's own `''` convention.
const ANY_VALUE = '__any__';

/** Cosmetic only - capitalises a raw segment value for display. NOT a value-space list: the actual
 * legal options for each select still come from that select's own imported constant array. */
const humanizeSegmentValue = (value: string): string => {
    if (value === 'checked-in') return 'Checked in';
    if (value === 'noshow') return 'No-show';
    return value.charAt(0).toUpperCase() + value.slice(1);
};

const practitionerLabel = (entry: PractitionerWithRoles): string => {
    const id = entry.practitioner.id;
    const name = entry.practitioner.name?.[0];
    if (!name) return id ?? 'Unnamed practitioner';
    if (name.text) return name.text;
    const parts = [name.given?.join(' '), name.family].filter(Boolean);
    return parts.length > 0 ? parts.join(' ') : (id ?? 'Unnamed practitioner');
};

/**
 * WHY AN AXIS IS GREYED OUT, said where the reader is looking.
 *
 * THE EXPLANATION WAS ALREADY WRITTEN AND COULD NEVER RENDER. Both pickers pass
 * `placeholder="Could not load practitioners"` to `SelectValue`, and a placeholder only appears when
 * the select has NO value - while these always carry one, because "any" is a real choice rather than
 * an empty one. So the control greys out reading "Any practitioner" and the sentence explaining it is
 * unreachable code. Measured in the browser: the words "Could not load" appear nowhere on the page.
 *
 * A greyed control with no reason reads as a broken product to the person looking at it, and the
 * person looking at it here may be an outside agency with no way to find out. It also says what the
 * consequence is - the rest of the audience still works - because "something failed" without "and
 * here is what you can still do" is half an answer.
 */
const axisUnavailableNote = (axis: string) =>
    `We could not load the ${axis} list, so this filter is unavailable. `
    + 'Everything else about the audience still works, and this campaign will simply not be narrowed '
    + `by ${axis}.`;

// The saved campaign in the shape the composer would save, so the two compare field by field.
const savedSendFields = (campaign: Campaign) => {
    const sms = campaign.channels.includes('sms');
    return {
        name: campaign.name,
        channels: campaign.channels.filter((channel) => channel === 'email' || channel === 'sms'),
        subject: campaign.subject,
        body: campaign.body,
        smsBody: sms ? (campaign.smsBody ?? '') : null,
        cta: campaign.cta ? { label: campaign.cta.label, style: campaign.cta.style } : null,
        segment: buildSegment(draftFromSegment(campaign.segment)),
    };
};

export default function CampaignComposer() {
    const { id } = useParams<{ id?: string }>();
    const navigate = useNavigate();
    const {
        getCampaign, createCampaign, updateCampaign, previewAudience, sendCampaign, scheduleCampaign, resumeCampaign, listCampaigns,
    } = useCampaignServiceContext();

    const { permissionsSettled, canManage } = useStaffPermissionServiceContext();
    const mayManage = permissionsSettled && canManage('campaigns');
    const authority = useRef(mayManage);
    authority.current = mayManage;
    const epoch = useSyncExternalStore(onViewerChange, viewerEpoch);
    const ownerKey = `${epoch}|${id ?? 'new'}`;
    const saves = useSaveScope(mayManage ? ownerKey : undefined);
    const actionHolder = settingsWriteHolder(`campaign:${id ?? 'new'}`);
    const heldAction = useUnresolvedSettingsWrite(actionHolder);
    const [capabilities, setCapabilities] = useState<CampaignCapabilities>();
    const previewId = useRef<string>();
    const countedChannels = useRef<string>();
    const previewRead = useRef(0);

    // Practitioner and location options
    // Read-only from the two app-wide providers (mounted unconditionally in App.tsx) - never a
    // fetch call here. Both lists initialise empty and are populated by whichever surface fetched
    // them first, so an empty list is normal and expected, not a fault.
    //
    // Called UNCONDITIONALLY and UNGUARDED, deliberately. Both context hooks throw on purpose
    // when their provider is missing - that is a fail-fast signal, not a bug to route around. An
    // unset practitioner/location filter does not narrow the audience, it WIDENS it, so silencing
    // a missing provider here would risk a campaign silently reaching a materially larger
    // population than intended, with nothing red on screen. Tests mock both services directly
    // (see campaignTestHelpers.tsx) rather than this component tolerating their absence.
    // THROUGH THE HOOK, BECAUSE THE CONTEXT ALONE IS NEVER FILLED HERE. Reading `practitionersList`
    // straight off the service gives whatever some OTHER screen happened to load, and in the Marketing
    // workspace nothing does - the network panel on a clean load of this page shows a Location search
    // and no Practitioner search at all. So the axis was not refused, it was never asked for, and it
    // was permanently dead for the one workspace that owns campaigns.
    //
    // `useFhirPractitioners` auto-loads once and reuses the bundle, so a screen that already loaded
    // them pays nothing. Everything else on this page reads the same list it always did.
    const {
        practitionersList,
        practitionersBundle,
        loading: practitionersLoading,
        error: practitionersError,
        errorIsPermissionDenial: practitionersDenied,
    } = useFhirPractitioners();
    // WHO THIS AXIS MEANS, asked once. It reads "patients who saw this clinician", so it offers
    // the people a patient could have been seen by rather than everyone holding a `Practitioner`
    // resource - which at this practice was the office manager, the platform manager and the
    // marketer alongside the four clinicians. See `campaignPractitionerAxis.ts` for why the
    // predicate is the one the booking chain already reads and not a filter written for this screen.
    const axis = practitionerAxis(practitionersList, {
        loading: practitionersLoading || (!practitionersBundle && !practitionersError),
        denied: practitionersDenied,
    });
    const practitionerOptions = axis.kind === 'ready' ? axis.options : [];
    const { locationsList } = useLocationServiceContext();
    // Location reads answer three ways, and only a failed one is "could not load".
    const { loading: locationsLoading, error: locationsError, locationsBundle } = useFhirLocations();
    const locationsState: 'ready' | 'loading' | 'failed' | 'none' = locationsList.length > 0
        ? 'ready'
        : locationsError ? 'failed' : (locationsLoading || !locationsBundle) ? 'loading' : 'none';

    const mountedRef = useRef(true);
    useEffect(() => { mountedRef.current = true; return () => { mountedRef.current = false; }; }, []);

    const [loadedOwner, setLoadedOwner] = useState(ownerKey);
    const [phase, setPhase] = useState<Phase>(id === undefined ? 'loaded' : 'loading');
    const [campaign, setCampaign] = useState<Campaign | null>(null);

    const [name, setName] = useState('');
    const [subject, setSubject] = useState('');
    const [body, setBody] = useState('');
    const [draft, setDraft] = useState<SegmentDraft>(EMPTY_DRAFT);
    const [catalogue, setCatalogue] = useState<
        { kind: 'loading' } | { kind: 'ready'; rows: ConditionCatalogueRow[] } | { kind: 'failed' } | { kind: 'missing' }
    >({ kind: 'loading' });

    // CTA (login link) - S4e-2
    // Label + style ONLY. There is no destination field anywhere in this state: the target is
    // always the practice's own portal login, computed server-side from the organization.
    const [ctaEnabled, setCtaEnabled] = useState(false);
    const [emailSelected, setEmailSelected] = useState(true);
    const [smsSelected, setSmsSelected] = useState(false);
    const selectedChannels: CampaignChannel[] = [...(emailSelected ? ['email' as const] : []), ...(smsSelected ? ['sms' as const] : [])];
    const previewChannels: CampaignChannel[] = campaign?.execution?.legacyResumeRequired ? ['sms'] : selectedChannels;
    const channelKey = previewChannels.join('|');

    // WHETHER A TEXT CAN BE SENT AT ALL, asked before the control is offered rather than after the
    // message is written. The old comment here called offering the checkbox "the honest intermediate
    // state" - it is honest about the intent and silent about the outcome, and silence is what let a
    // practice price a channel it does not have.
    const billing = useBillingContext();
    const smsChannel = smsChannelAvailability({
        // `entitlements` is null until the first fetch resolves, and null must read as NOT KNOWN
        // rather than as unavailable - which is why this passes undefined and never false.
        smsPromotionsEnabled: billing.entitlements?.smsPromotionsEnabled,
        smsPromotionsHeld: billing.addOns?.smsPromotions ?? billing.addOns?.smsReminders,
        smsRegistrationApproved: billing.smsRegistrationApproved,
        capabilities,
    });
    // ITS OWN TEXT, never derived from `body`. A text message differs from an email in length,
    // formatting, delivery-speed expectation and cost, so the server refuses an 'sms' channel that
    // arrives without one rather than reusing the email body.
    const [smsBody, setSmsBody] = useState('');
    const [ctaLabel, setCtaLabel] = useState('');
    const [ctaStyle, setCtaStyle] = useState<CampaignCtaStyle>('button');
    const bodyTextareaRef = useRef<HTMLTextAreaElement>(null);
    const smsTextareaRef = useRef<HTMLTextAreaElement>(null);

    const [saving, setSaving] = useState(false);
    // A field's error shows once somebody has left it, never on first paint.
    const [touched, setTouched] = useState<{ name?: boolean; subject?: boolean; body?: boolean }>({});
    const leave = (field: 'name' | 'subject' | 'body') => () => setTouched((held) => ({ ...held, [field]: true }));
    const [saveError, setSaveError] = useState<string | null>(null);

    // Audience count + send/schedule
    // `useAudienceCount` is a HOOK - called here, unconditionally, alongside every other hook in
    // this component, before any early return below. Calling it later (e.g. inside the `!readOnly`
    // JSX branch) would violate rules-of-hooks the instant a campaign goes read-only.
    const ownedPreview = useCallback(async (segment: Parameters<typeof previewAudience>[0], cursor?: string | null) => {
        const read = saves.start();
        const generation = previewRead.current;
        try {
            const result = await read.step(() => previewAudience(segment, cursor, channelKey.split('|').filter(Boolean) as CampaignChannel[], read.transport));
            read.admit();
            if (generation !== previewRead.current) throw new Error('The audience changed. Count it again.');
            previewId.current = result.previewId;
            countedChannels.current = channelKey;
            return result;
        } finally { read.retire(); }
    }, [previewAudience, saves, channelKey, ownerKey]);
    const { state, count, reset } = useAudienceCount(ownedPreview);
    useEffect(() => { previewRead.current += 1; previewId.current = undefined; countedChannels.current = undefined; reset(); }, [channelKey, ownerKey, reset]);
    const [actionBusy, setActionBusy] = useState<'send' | 'schedule' | 'resume' | null>(null);
    const [lastAction, setLastAction] = useState<'send' | 'schedule' | 'resume' | null>(null);
    const [actionRefusal, setActionRefusal] = useState<CampaignRefusal | null>(null);
    const commandInFlight = useRef<symbol | null>(null);
    const [scheduledForInput, setScheduledForInput] = useState('');
    const [confirming, setConfirming] = useState<'send' | 'schedule' | 'resume' | null>(null);

    useEffect(() => {
        setSaving(false); setActionBusy(null); setActionRefusal(null); setConfirming(null); commandInFlight.current = null;
        if (!id) { setCampaign(null); setName(''); setSubject(''); setBody(''); setSmsBody(''); setEmailSelected(true); setSmsSelected(false); setCtaEnabled(false); setCtaLabel(''); setCtaStyle('button'); setDraft(EMPTY_DRAFT); setLoadedOwner(ownerKey); setPhase('loaded'); return; }
        const read = saves.start();
        setPhase('loading');
        void (async () => {
            try {
                const loaded = await read.step(() => getCampaign(id, read.transport));
                read.admit();
                setCampaign(loaded);
                setName(loaded.name);
                setSubject(loaded.subject);
                setBody(loaded.body);
                // - reopening a saved campaign must show the channels it actually has, or
                // the next save would silently strip SMS back off it.
                setEmailSelected(loaded.channels.includes('email'));
                setSmsSelected(loaded.channels.includes('sms'));
                setCapabilities(loaded.capabilities);
                setSmsBody(loaded.smsBody ?? '');
                setCtaEnabled(loaded.cta !== null);
                setCtaLabel(loaded.cta?.label ?? '');
                setCtaStyle(loaded.cta?.style ?? 'button');
                setDraft(draftFromSegment(loaded.segment));
                setLoadedOwner(ownerKey);
                setPhase('loaded');
            } catch {
                if (!read.belongs()) return;
                // A load failure is NOT "no campaign" - an empty form here would be a claim about
                // their data. reference-authz-denial-never-renders-as-empty-data
                setLoadedOwner(ownerKey);
                setPhase('loadFailed');
            } finally { read.retire(); }
        })();
        return () => read.retire();
    }, [id, getCampaign, ownerKey, saves, mayManage]);

    // Only the newest read of the list may answer, and none after unmount. The list is the server's fixed
    // catalogue, the same at every practice. A failed read can be asked again; a server that sends none is not.
    const catalogueRead = useRef(0);
    const readCatalogue = useCallback(async () => {
        const mine = ++catalogueRead.current;
        const read = saves.start();
        setCatalogue({ kind: 'loading' });
        try {
            const result = await read.step(() => listCampaigns(read.transport));
            read.admit();
            const rows = result?.conditionCatalogue?.rows;
            if (!mountedRef.current || mine !== catalogueRead.current) return;
            setCapabilities(result.capabilities);
            setCatalogue(Array.isArray(rows) && rows.length > 0 ? { kind: 'ready', rows } : { kind: 'missing' });
        } catch {
            if (read.belongs() && mountedRef.current && mine === catalogueRead.current) setCatalogue({ kind: 'failed' });
        } finally { read.retire(); }
    }, [listCampaigns, saves, ownerKey, mayManage]);
    useEffect(() => { void readCatalogue(); }, [readCatalogue]);

    const sendableNow = canSendNow(state, buildSegment(draft), Date.now());
    // A recount or segment edit while the send confirmation is open must not leave it confirmable.
    useEffect(() => {
        if (confirming === 'send' && !sendableNow) setConfirming(null);
    }, [confirming, sendableNow]);
    // Send and Schedule act on the saved campaign, so an unsaved edit would go out as the old text.
    const unsaved = campaign !== null && JSON.stringify(savedSendFields(campaign)) !== JSON.stringify({
        name: name.trim(),
        channels: selectedChannels,
        subject: subject.trim(),
        body: body.trim(),
        smsBody: smsSelected ? smsBody.trim() : null,
        cta: ctaEnabled ? { label: ctaLabel.trim(), style: ctaStyle } : null,
        segment: buildSegment(draft),
    });
    useEffect(() => {
        if (unsaved) setConfirming(null);
    }, [unsaved]);

    if (phase === 'loading' || loadedOwner !== ownerKey) {
        return (
            <div className="p-6 space-y-6">
                <Skeleton className="h-8 w-64" />
                <Skeleton className="h-48 w-full" />
                <Skeleton className="h-48 w-full" />
            </div>
        );
    }

    if (phase === 'loadFailed') {
        return (
            <div className="p-6">
                <Alert variant="destructive">
                    <AlertTriangle className="h-4 w-4" />
                    <AlertDescription>
                        We could not load this campaign. Please try again.
                    </AlertDescription>
                </Alert>
            </div>
        );
    }

    // phase === 'loaded'. When `id` is set, `campaign` is guaranteed non-null here - the effect
    // above only reaches setPhase('loaded') after setCampaign(loaded) on the same success path.
    const segmentHasConditions = campaign !== null && (campaign.segment.conditionCodes?.length ?? 0) > 0;
    const catalogueRows = catalogue.kind === 'ready' ? catalogue.rows : [];
    const chosenConditionIds = new Set((selectedConditionRows(draft.conditionCodes, catalogueRows) ?? []).map((row) => row.id));
    const conditionsLocked = segmentHasConditions
        && selectedConditionRows(campaign?.segment.conditionCodes ?? [], catalogueRows) === null;
    const lockedCampaign = id !== undefined && campaign !== null && (!isEditable(campaign) || conditionsLocked);
    const sandbox = environment.inSandboxMode;
    const readOnly = sandbox || lockedCampaign || !mayManage;
    const savedDraftWithConditions = campaign !== null && campaign.status === 'draft' && segmentHasConditions;
    const showConditionsBanner = savedDraftWithConditions && conditionsLocked && catalogue.kind === 'ready';
    const conditionListPending = savedDraftWithConditions && catalogue.kind !== 'ready';

    const status = campaign ? describeCampaign(campaign) : null;

    const trimmedName = name.trim();
    const trimmedSubject = subject.trim();
    const trimmedBody = body.trim();
    const nameError = trimmedName.length === 0
        ? 'Campaign name is required.'
        : trimmedName.length > 200 ? 'Campaign name must be 200 characters or fewer.' : null;
    const subjectError = !emailSelected ? null : trimmedSubject.length === 0
        ? 'Subject is required.'
        : trimmedSubject.length > 300 ? 'Subject must be 300 characters or fewer.' : null;
    // The segment/cost readout under the SMS box. Derived, never stored.
    //
    // PRICED ON THE WIRE TEXT, NOT THE TEXTAREA. The server expands the CTA placeholder into a real
    // URL and appends an opt-out footer, and both are charged while being invisible in the box the
    // practice is typing into. Pricing the raw textarea would under-report every campaign, in the
    // direction that costs the practice money.
    const smsWireText = smsWireTextFor(smsBody);
    const smsSegments = smsSegmentsFor(smsWireText);
    const smsCostPerRecipient = smsCostPerRecipientUsd(smsWireText);
    const charsUntilNextSegment = charactersUntilNextSegment(smsWireText);

    const trimmedSmsBody = smsBody.trim();
    const smsBodyError = !smsSelected
        ? null
        : trimmedSmsBody.length === 0
            ? 'A text message is required when SMS is selected.'
            : trimmedSmsBody.length > 1600 ? 'The text message must be 1,600 characters or fewer.' : null;

    const bodyError = !emailSelected ? null : trimmedBody.length === 0
        ? 'Message body is required.'
        : trimmedBody.length > 20000 ? 'Message body must be 20,000 characters or fewer.' : null;

    const trimmedCtaLabel = ctaLabel.trim();
    const ctaLabelError = ctaEnabled && trimmedCtaLabel.length === 0
        ? 'A label is required for the login link.'
        : ctaEnabled && trimmedCtaLabel.length > MAX_CTA_LABEL
            ? `The login link label must be ${MAX_CTA_LABEL} characters or fewer.`
            : null;
    // A checked CTA whose placeholder never made it into the body would save a `cta` the server
    // renders nowhere - the practice would believe they added a login link and no such link exists
    // in the sent email. Blocking save here is the only place this can be caught.
    const ctaPlaceholderMissing = ctaEnabled && ((emailSelected && !body.includes(CTA_PLACEHOLDER)) || (smsSelected && !smsBody.includes(CTA_PLACEHOLDER)));
    const smsEncodingError = smsSelected ? smsEncodingPlan(smsWireText).reason : undefined;

    const segmentErrors = validateDraft(draft);
    const hasSegmentErrors = Object.keys(segmentErrors).length > 0;
    // `smsBodyError` is in this list because the SERVER now 400s an 'sms' channel with no text.
    // Without it the practice fills the form, clicks Create, and meets a validation error that the
    // composer could have shown them while they were still typing.
    const canSave = !readOnly && !saving && !nameError && !subjectError && !bodyError && !smsBodyError
        && !hasSegmentErrors && !ctaLabelError && !ctaPlaceholderMissing && !smsEncodingError && selectedChannels.length > 0;

    const handleSave = async () => {
        if (!canSave || sandbox) return;
        const save = saves.start();
        const admit = () => { save.admit(); if (!authority.current) throw new Error('Your current role cannot change campaigns.'); };
        const transport = { ...save.transport, admit };
        setSaving(true);
        setSaveError(null);
        try {
            const payload = {
                name: trimmedName,
                channels: selectedChannels,
                subject: trimmedSubject,
                body: trimmedBody,
                // NULL when SMS is off, deliberately - a retained text would silently return to
                // service if the channel were re-added later, saying whatever it said at some earlier
                // date. The server clears it the same way for the same reason.
                smsBody: smsSelected ? trimmedSmsBody : null,
                segment: buildSegment(draft),
                cta: ctaEnabled ? { label: trimmedCtaLabel, style: ctaStyle } : null,
            };
            if (id) {
                const updated = await save.step(() => updateCampaign(id, payload, transport, campaign?.recordVersion), true);
                admit();
                setCampaign(updated);
            } else {
                const created = await save.step(() => createCampaign(payload, transport), true);
                admit();
                navigate(`/dashboard/campaigns/${created.campaignId}`, { replace: true });
            }
        } catch (error) {
            if (!save.belongs() || isSaveRetired(error)) return;
            setConfirming(null);
            setSaveError(outcomeUnknown(error) ? 'The save could not be confirmed. Reopen this campaign to check its current saved draft before making another change.' : 'We could not save this campaign. Your draft is retained.');
        } finally {
            if (save.belongs()) setSaving(false);
            save.retire();
        }
    };

    const insertCtaPlaceholder = () => {
        const insert = (text: string, textarea: HTMLTextAreaElement | null) => {
            const start = textarea?.selectionStart ?? text.length;
            const end = textarea?.selectionEnd ?? text.length;
            return `${text.slice(0, start)}${CTA_PLACEHOLDER}${text.slice(end)}`;
        };
        if (emailSelected) setBody(insert(body, bodyTextareaRef.current));
        if (smsSelected) setSmsBody(insert(smsBody, smsTextareaRef.current));
        requestAnimationFrame(() => (emailSelected ? bodyTextareaRef.current : smsTextareaRef.current)?.focus());
    };

    const setAxis = <K extends keyof SegmentDraft>(key: K, value: SegmentDraft[K]) => {
        setDraft((prev) => ({ ...prev, [key]: value }));
        // DISCARD, NOT "STALE". A retained count could be read again by a later click; a
        // discarded one cannot - `canSend` would need `state.kind === 'counted'` from scratch.
        previewRead.current += 1;
        previewId.current = undefined;
        countedChannels.current = undefined;
        reset();
        setActionRefusal(null);
    };

    // THE GATE. `canSend` is true only when the count is for THIS segment and still fresh - see
    // audienceCount.ts. Recomputed every render so a segment edit (which calls `reset()` above)
    // takes effect immediately.
    const sendable = canSend(state, buildSegment(draft), Date.now());
    const noRecipients = sendable && state.kind === 'counted' && state.eligible === 0;

    const handleCount = () => {
        setActionRefusal(null);
        void count(buildSegment(draft));
    };

    const readinessKnown = capabilities?.protocolVersion === 2 && previewChannels.length > 0
        && previewChannels.every((channel) => {
            const readiness = capabilities.readiness[channel];
            return capabilities.implementedChannels.includes(channel)
                && (readiness?.state === 'ready' || (readiness?.state === 'blocked' && readiness.reason === 'quiet-hours'));
        });
    const commandReady = readinessKnown && countedChannels.current === channelKey && Boolean(previewId.current) && Boolean(campaign?.recordVersion);
    const readHeld = () => {
        if (!heldAction?.detail || !['send', 'schedule', 'resume'].includes(heldAction.kind)) return undefined;
        try {
            const value = JSON.parse(heldAction.detail) as { command: CampaignCommand; eligible: number; scheduledFor?: string };
            return value.command?.requestId === heldAction.sent?.id && typeof value.command.recordVersion === 'string'
                && typeof value.command.previewId === 'string' && Array.isArray(value.command.channels) && Number.isFinite(value.eligible) ? value : undefined;
        } catch { return undefined; }
    };
    const runCommand = async (kind: 'send' | 'schedule' | 'resume', retry = false) => {
        if (sandbox || !authority.current || !campaign || commandInFlight.current || actionBusy !== null) return;
        const original = retry ? readHeld() : undefined;
        if (!retry && (heldAction || unsaved || !commandReady || state.kind !== 'counted' || (kind === 'send' && !sendableNow) || !sendable)) return;
        if (retry && !original) return;
        const command: CampaignCommand = original?.command ?? {
            requestId: newSettingsOperationId(), recordVersion: campaign.recordVersion!, previewId: previewId.current!,
            channels: kind === 'resume' ? ['sms'] : selectedChannels,
        };
        const eligible = original?.eligible ?? (state.kind === 'counted' ? state.eligible : 0);
        const scheduledDate = kind === 'schedule' && !original ? new Date(scheduledForInput) : undefined;
        if (scheduledDate && !Number.isFinite(scheduledDate.getTime())) return;
        const scheduledFor = original?.scheduledFor ?? scheduledDate?.toISOString();
        const owner = saves.start();
        let sent = false;
        const settle = () => {
            const current = unresolvedSettingsWrite(actionHolder)?.sent?.id;
            if (current === command.requestId) holdSettingsWrite(actionHolder, undefined);
        };
        const transport = {
            ...owner.transport,
            admit: () => {
                owner.admit();
                if (!authority.current) throw new Error('Your current role cannot send campaigns.');
                const held = unresolvedSettingsWrite(actionHolder);
                if (held && held.sent?.id !== command.requestId) throw new Error('Another campaign request is still unconfirmed.');
            },
            onSend: () => {
                owner.admit();
                sent = true;
                holdSettingsWrite(actionHolder, { kind, state: 'unconfirmed', sent: { id: command.requestId, attempt: 0 }, detail: JSON.stringify({ command, eligible, scheduledFor }) });
            },
        };
        const flight = Symbol();
        commandInFlight.current = flight;
        setLastAction(kind); setActionBusy(kind); setActionRefusal(null); setConfirming(null);
        try {
            const request = kind === 'schedule' ? scheduleCampaign(campaign.campaignId, scheduledFor!, eligible, command, transport)
                : kind === 'resume' ? resumeCampaign(campaign.campaignId, eligible, command, transport)
                : sendCampaign(campaign.campaignId, eligible, command, transport);
            const updated = await owner.step(() => request.catch(error => {
                const status = (error as { status?: number })?.status;
                if (!retry && typeof status === 'number' && status >= 400 && status < 500) settle();
                throw error;
            }), true);
            transport.admit();
            if (updated.campaignId !== campaign.campaignId || updated.execution?.requestId !== command.requestId) throw new Error('Unconfirmed campaign request');
            settle(); setCampaign(updated);
        } catch (error) {
            if (!owner.belongs() || isSaveRetired(error)) return;
            // A first attempt the server answered with a refusal is settled above; its own remedy stands.
            const status = (error as { status?: number })?.status;
            if (!retry && typeof status === 'number' && status >= 400 && status < 500) setActionRefusal(readRefusal(error));
            else if (!sent) setActionRefusal({ ...readRefusal(error), message: 'This request was not sent. Your campaign is retained.', retryable: false });
            else setActionRefusal({ ...readRefusal(error), message: 'The campaign request could not be confirmed. Check its current status before another request.', retryable: false });
        } finally {
            if (owner.belongs()) setActionBusy(null);
            if (commandInFlight.current === flight) commandInFlight.current = null;
            owner.retire();
        }
    };
    const checkCurrentCampaign = async () => {
        if (!campaign || actionBusy !== null) return;
        const read = saves.start();
        setActionBusy('send');
        try {
            const current = await read.step(() => getCampaign(campaign.campaignId, read.transport));
            read.admit();
            if (current.campaignId !== campaign.campaignId) throw new Error('Wrong campaign');
            setCampaign(current); setCapabilities(current.capabilities);
            if (current.execution?.requestId === heldAction?.sent?.id) {
                holdSettingsWrite(actionHolder, undefined); setActionRefusal(null);
            }
        } catch (error) {
            if (read.belongs()) setActionRefusal({ ...readRefusal(error), message: 'Current campaign status could not be confirmed. The original request remains held.', retryable: false });
        } finally { if (read.belongs()) setActionBusy(null); read.retire(); }
    };
    const handleSend = () => runCommand('send');
    const handleSchedule = () => runCommand('schedule');
    // A settled refusal is retried as a new request, under every current gate; a held one only via its original.
    const retryLastAction = () => { if (lastAction) void runCommand(lastAction); };

    return (
        <div className="ak-page-body p-6 max-w-3xl">
            <div className="flex items-center gap-3">
                <Megaphone className="w-6 h-6 shrink-0" />
                <div className="min-w-0">
                    <h1 className="ak-page-title truncate">
                        {campaign ? campaign.name : 'New campaign'}
                    </h1>
                    {status && (
                        <div className="mt-1 flex items-center gap-2">
                            <Badge className={TONE_CLASS[status.tone]}>{status.label}</Badge>
                            <span className="ak-card__meta">{status.detail}</span>
                        </div>
                    )}
                </div>
            </div>

            {campaign && campaign.notConfigured && (
                <div className="ak-notice flex">
                    <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
                    <div >
                        <strong className="block">{NOT_CONFIGURED_COPY[campaign.notConfigured].title}</strong>
                        <span className="block">{NOT_CONFIGURED_COPY[campaign.notConfigured].fix}</span>
                        {campaignSetupDestination(campaign.notConfigured) && <Link className="btn btn-blue-ghost" to={campaignSetupDestination(campaign.notConfigured)!}>Open Marketing setup</Link>}
                    </div>
                </div>
            )}

            {heldAction && <Alert><AlertDescription>
                An earlier campaign request is unconfirmed. Reopening or editing does not start another send.
                {actionRefusal && <p>{actionRefusal.message}</p>}
                <button type="button" className="btn btn-blue-ghost" disabled={actionBusy !== null} onClick={() => void checkCurrentCampaign()}>Check campaign status</button>
                {mayManage && readHeld() && <button type="button" className="btn btn-blue-ghost" disabled={actionBusy !== null} onClick={() => void runCommand(heldAction.kind as 'send' | 'schedule' | 'resume', true)}>Retry original request</button>}
            </AlertDescription></Alert>}
            {campaign?.execution?.legacyResumeRequired && <Alert><AlertDescription>
                This saved campaign requires a newly approved SMS continuation. Existing email dispatch and unknown historical sends will not be repeated.
                {mayManage && !sandbox && <>
                    <button type="button" className="btn btn-blue-ghost" disabled={state.kind === 'counting'} onClick={handleCount}>Count SMS continuation audience</button>
                    {state.kind === 'counted' && <p>{state.eligible} eligible people in this SMS continuation.</p>}
                    {state.kind === 'failed' && <p>{state.message}</p>}
                    <button type="button" className="btn btn-blue-ghost" disabled={!commandReady || !sendable || heldAction !== undefined || actionBusy !== null} onClick={() => setConfirming('resume')}>Approve SMS continuation</button>
                    <CampaignConfirmDialog confirmation={confirming === 'resume' && state.kind === 'counted' && commandReady ? resumeConfirmation(state.eligible) : null}
                        onKeep={() => setConfirming(null)} onConfirm={() => void runCommand('resume')} />
                </>}
            </AlertDescription></Alert>}
            {showConditionsBanner && (
                <Alert variant="destructive">
                    <Lock className="h-4 w-4" />
                    <AlertDescription>
                        This campaign targets medical conditions outside the list this page offers, so it
                        cannot be edited here. Open it through your practice&apos;s support channel to change it.
                    </AlertDescription>
                </Alert>
            )}

            {conditionListPending && (
                <Alert variant={catalogue.kind === 'failed' ? 'destructive' : 'default'}>
                    <Lock className="h-4 w-4" />
                    <AlertDescription>
                        {catalogue.kind === 'loading'
                            ? <>Loading the list of diagnoses&hellip; This campaign can be edited once it is read.</>
                            : catalogue.kind === 'failed'
                                ? <>The list of diagnoses could not be loaded, so this campaign cannot be edited yet. Its
                                    saved diagnoses are kept as they are.</>
                                : <>No list of diagnoses is available here, so this campaign cannot be edited. Its saved
                                    diagnoses are kept as they are.</>}
                        {catalogue.kind === 'failed' && (
                            <button type="button" className="btn btn-blue-ghost mt-2" onClick={() => { void readCatalogue(); }}>
                                Try again
                            </button>
                        )}
                    </AlertDescription>
                </Alert>
            )}

            {campaign && !isEditable(campaign) && (
                <p className="ak-card__meta">
                    This campaign is no longer a draft and can no longer be edited here.
                </p>
            )}

            <Card>
                <CardContent className="space-y-4 pt-6">
                    <div className="space-y-1.5">
                        <Label htmlFor="campaign-name">Campaign name</Label>
                        <Input
                            id="campaign-name"
                            value={name}
                            maxLength={200}
                            disabled={readOnly}
                            aria-invalid={!readOnly && touched.name && !!nameError}
                            onChange={(e) => setName(e.target.value)}
                            onBlur={leave('name')}
                        />
                        {!readOnly && touched.name && nameError && <p className="ak-field-error">{nameError}</p>}
                    </div>

                    <div className="space-y-1.5">
                        <Label htmlFor="campaign-subject">Subject</Label>
                        <Input
                            id="campaign-subject"
                            value={subject}
                            maxLength={300}
                            disabled={readOnly || !emailSelected}
                            aria-invalid={!readOnly && touched.subject && !!subjectError}
                            onChange={(e) => setSubject(e.target.value)}
                            onBlur={leave('subject')}
                        />
                        {!readOnly && touched.subject && subjectError && <p className="ak-field-error">{subjectError}</p>}
                    </div>

                    <div className="space-y-1.5">
                        <div className="flex items-center justify-between">
                            <Label htmlFor="campaign-body">Message</Label>
                            {!readOnly && (
                                <button
                                    type="button"
                                    className="btn btn-blue-ghost"
                                    disabled={!ctaEnabled}
                                    onClick={insertCtaPlaceholder}
                                >
                                    Insert login link
                                </button>
                            )}
                        </div>
                        <div className="flex items-center gap-4">
                            <div className="flex items-center gap-2">
                                <Checkbox id="campaign-channel-email" checked={emailSelected} disabled={readOnly}
                                    onCheckedChange={(checked) => setEmailSelected(checked === true)} />
                                <label htmlFor="campaign-channel-email" className="ak-label">Email</label>
                            </div>
                            <div className="flex items-center gap-2">
                                <Checkbox id="campaign-channel-sms" checked={smsSelected}
                                    disabled={readOnly || (!smsSelected && capabilities?.implementedChannels.includes('sms') !== true)}
                                    onCheckedChange={(checked) => setSmsSelected(checked === true)} />
                                <label htmlFor="campaign-channel-sms" className="ak-label">Text message</label>
                            </div>
                        </div>
                        {selectedChannels.length === 0 && <p className="ak-field-help">Choose email, text message, or both.</p>}
                        {smsSelected && smsChannel.available === 'unknown' && <p className="ak-field-help">Text execution readiness could not be confirmed. Your saved text is retained.</p>}

                        {/* THE SENTENCE, NOT JUST THE GREYED BOX. Disabling a control without saying why
                            sends an administrator looking for a setting they may already have switched
                            on - and the two reasons have different remedies, one of which is to wait.
                            Nothing is said when the entitlement could not be READ: not known is not the
                            same as not available, and asserting the second from the first is the false
                            statement this screen exists to avoid. */}
                        {smsChannel.available === false && (
                            <p className="ak-field-help">
                                {smsChannel.reason} {smsChannel.remedy}
                            </p>
                        )}

                        <Textarea
                            id="campaign-body"
                            ref={bodyTextareaRef}
                            rows={8}
                            value={body}
                            maxLength={20000}
                            disabled={readOnly || !emailSelected}
                            aria-invalid={!readOnly && touched.body && !!bodyError}
                            onChange={(e) => setBody(e.target.value)}
                            onBlur={leave('body')}
                        />
                        {!readOnly && touched.body && bodyError && <p className="ak-field-error">{bodyError}</p>}

                        {/* 🔴 THE TEXT MESSAGE IS WRITTEN SEPARATELY, and this box is the whole reason
                            the campaign has an `smsBody`. Sharing one body meant an email-shaped
                            message went out as a text at roughly 6x the cost of a purpose-written one
                            on every recipient — and, if a login link was added, with a literal
                            `[[AKASHIC_CTA]]` in it, because the placeholder renders as an HTML anchor
                            that the SMS path had no way to expand. */}
                        {smsSelected && (
                            <div className="space-y-2 border-l-2 border-line pl-4">
                                <label htmlFor="campaign-sms-body" className="ak-label">
                                    Text message
                                </label>
                                <p className="ak-field-help">
                                    Write a separate text message. Encoding and the final login link determine its estimated segments; provider acceptance does not confirm delivery.
                                </p>
                                <Textarea
                                    id="campaign-sms-body"
                                    ref={smsTextareaRef}
                                    rows={3}
                                    value={smsBody}
                                    maxLength={1600}
                                    disabled={readOnly}
                                    aria-invalid={!readOnly && !!smsBodyError}
                                    onChange={(e) => setSmsBody(e.target.value)}
                                />
                                {!readOnly && (smsBodyError || smsEncodingError) && (
                                    <p className="ak-field-error">{smsBodyError ?? smsEncodingError}</p>
                                )}

                                {/* WHAT IT COSTS, on the text that will actually be SENT — the CTA
                                    expanded and the opt-out footer appended, neither of which is
                                    visible in the box above and both of which are charged. */}
                                {smsChannel.available === true && <p className="ak-field-help" data-testid="sms-cost-estimate">
                                    This is{' '}
                                    <strong>{smsSegments} segment{smsSegments === 1 ? '' : 's'}</strong>
                                    {' '}— about{' '}
                                    <strong>${smsCostPerRecipient.toFixed(3)} per recipient</strong>.{' '}
                                    {/* ⭐ The number that changes behaviour: it says what to TRIM, not
                                        just what it costs. */}
                                    {charsUntilNextSegment} more character{charsUntilNextSegment === 1 ? '' : 's'}
                                    {' '}will add another segment.{' '}
                                    {/* ⚠️ An ESTIMATE, and labelled as one — the login link's real
                                        length is per-recipient, and the server meters what actually
                                        went on the wire. */}
                                    Estimated — includes the &ldquo;Reply STOP&rdquo; line we add, and the
                                    final count is measured from the rendered message accepted for dispatch.
                                </p>}
                            </div>
                        )}
                    </div>

                    <div className="space-y-3 border-t pt-4">
                        <div className="flex items-center gap-2">
                            <Checkbox
                                id="campaign-cta-enabled"
                                checked={ctaEnabled}
                                disabled={readOnly}
                                onCheckedChange={(checked) => setCtaEnabled(checked === true)}
                            />
                            <Label htmlFor="campaign-cta-enabled">Add a login link</Label>
                        </div>
                        {readOnly && campaign?.cta && (
                            <p className="ak-body">
                                Login link: &quot;{campaign.cta.label}&quot;{' '}
                                ({campaign.cta.style === 'button' ? 'button' : 'text link'})
                            </p>
                        )}
                        {!readOnly && ctaEnabled && (
                            <>
                                <div className="space-y-1.5">
                                    <Label htmlFor="campaign-cta-label">Link text</Label>
                                    <Input
                                        id="campaign-cta-label"
                                        value={ctaLabel}
                                        maxLength={MAX_CTA_LABEL}
                                        aria-invalid={!!ctaLabelError}
                                        placeholder="Book your appointment"
                                        onChange={(e) => setCtaLabel(e.target.value)}
                                    />
                                    {ctaLabelError && <p className="ak-field-error">{ctaLabelError}</p>}
                                </div>
                                <div className="space-y-1.5">
                                    <Label htmlFor="campaign-cta-style">Style</Label>
                                    <Select value={ctaStyle} onValueChange={(v) => setCtaStyle(v as CampaignCtaStyle)}>
                                        <SelectTrigger id="campaign-cta-style"><SelectValue /></SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value="button">Button</SelectItem>
                                            <SelectItem value="text">Text link</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                                {ctaPlaceholderMissing && (
                                    <p className="ak-field-error">
                                        Click &quot;Insert login link&quot; above to place the link in your
                                        selected message — the link must be included in each requested channel.
                                    </p>
                                )}
                            </>
                        )}
                    </div>
                </CardContent>
            </Card>

            <Card>
                <CardContent className="space-y-4 pt-6">
                    <h2 className="ak-section-title">Audience</h2>

                    {readOnly ? (
                        <p className="ak-body">
                            {campaign ? describeSegment(campaign.segment, catalogueRows) : ''}
                        </p>
                    ) : (
                        <>
                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-1.5">
                                    <Label htmlFor="segment-age-min">Minimum age</Label>
                                    <Input
                                        id="segment-age-min"
                                        type="number"
                                        min={MIN_AGE}
                                        max={MAX_AGE}
                                        value={draft.ageMin}
                                        aria-invalid={!!segmentErrors.ageMin}
                                        onChange={(e) => setAxis('ageMin', e.target.value)}
                                    />
                                    {segmentErrors.ageMin && <p className="ak-field-error">{segmentErrors.ageMin}</p>}
                                </div>
                                <div className="space-y-1.5">
                                    <Label htmlFor="segment-age-max">Maximum age</Label>
                                    <Input
                                        id="segment-age-max"
                                        type="number"
                                        min={MIN_AGE}
                                        max={MAX_AGE}
                                        value={draft.ageMax}
                                        aria-invalid={!!segmentErrors.ageMax}
                                        onChange={(e) => setAxis('ageMax', e.target.value)}
                                    />
                                    {segmentErrors.ageMax && <p className="ak-field-error">{segmentErrors.ageMax}</p>}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-1.5">
                                    <Label htmlFor="segment-gender">Gender</Label>
                                    <Select
                                        value={draft.gender === '' ? ANY_VALUE : draft.gender}
                                        onValueChange={(v) => setAxis('gender', v === ANY_VALUE ? '' : v)}
                                    >
                                        <SelectTrigger id="segment-gender" className="w-full">
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value={ANY_VALUE}>Any gender</SelectItem>
                                            {GENDERS.map((g) => (
                                                <SelectItem key={g} value={g}>{humanizeSegmentValue(g)}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="space-y-1.5">
                                    <Label htmlFor="segment-last-seen-before-days">Not seen in the last (days)</Label>
                                    <Input
                                        id="segment-last-seen-before-days"
                                        type="number"
                                        min={1}
                                        max={MAX_DAYS}
                                        value={draft.lastSeenBeforeDays}
                                        aria-invalid={!!segmentErrors.lastSeenBeforeDays}
                                        onChange={(e) => setAxis('lastSeenBeforeDays', e.target.value)}
                                    />
                                    {segmentErrors.lastSeenBeforeDays && (
                                        <p className="ak-field-error">{segmentErrors.lastSeenBeforeDays}</p>
                                    )}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-1.5">
                                    <Label htmlFor="segment-practitioner">Practitioner</Label>
                                    <Select
                                        value={draft.practitionerId === '' ? ANY_VALUE : draft.practitionerId}
                                        onValueChange={(v) => setAxis('practitionerId', v === ANY_VALUE ? '' : v)}
                                        disabled={axis.kind !== 'ready'}
                                    >
                                        <SelectTrigger id="segment-practitioner" className="w-full">
                                            <SelectValue
                                                placeholder={axis.kind === 'could-not-load'
                                                    ? 'Could not load practitioners'
                                                    : axis.kind === 'loading' ? 'Loading practitioners…' : undefined}
                                            />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value={ANY_VALUE}>Any practitioner</SelectItem>
                                            {practitionerOptions.map((p) => {
                                                const pid = p.practitioner.id;
                                                if (!pid) return null;
                                                return (
                                                    <SelectItem key={pid} value={pid}>
                                                        {practitionerLabel(p)}
                                                    </SelectItem>
                                                );
                                            })}
                                        </SelectContent>
                                    </Select>
                                    {/* ⛔ THE TWO EMPTIES SAY DIFFERENT THINGS. "We could not load it" is a report
                                        of OUR failure; "nobody here sees patients" is a true statement about a young
                                        practice. Collapsing them would have this screen apologise for a fault that
                                        did not happen - and the error colour is wrong for the second, which is not a
                                        problem to fix. */}
                                    {axis.kind === 'could-not-load' && (
                                        <p className="ak-field-error">
                                            {axisUnavailableNote('practitioner')}
                                        </p>
                                    )}
                                    {axis.kind === 'not-permitted' && (
                                        <p className="ak-field-help">
                                            Your role does not include reading the practice&rsquo;s practitioners, so this
                                            filter is not available to you. Everything else about the audience still works.
                                        </p>
                                    )}
                                    {axis.kind === 'nobody-sees-patients' && (
                                        <p className="ak-field-help">
                                            Nobody at this practice is set up to see patients yet, so there is no
                                            practitioner to narrow by. Everything else about the audience still works.
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-1.5">
                                    <Label htmlFor="segment-location">Location</Label>
                                    <Select
                                        value={draft.locationId === '' ? ANY_VALUE : draft.locationId}
                                        onValueChange={(v) => setAxis('locationId', v === ANY_VALUE ? '' : v)}
                                        disabled={locationsState !== 'ready'}
                                    >
                                        <SelectTrigger id="segment-location" className="w-full">
                                            <SelectValue
                                                placeholder={locationsState === 'failed'
                                                    ? 'Could not load locations'
                                                    : locationsState === 'loading' ? 'Loading locations…'
                                                    : locationsState === 'none' ? 'No locations yet' : undefined}
                                            />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value={ANY_VALUE}>Any location</SelectItem>
                                            {locationsList.map((l) => {
                                                const lid = l.id;
                                                if (!lid) return null;
                                                return (
                                                    <SelectItem key={lid} value={lid}>{l.name ?? lid}</SelectItem>
                                                );
                                            })}
                                        </SelectContent>
                                    </Select>
                                    {locationsState === 'failed' && (
                                        <p className="ak-field-error">
                                            {axisUnavailableNote('location')}
                                        </p>
                                    )}
                                    {locationsState === 'none' && (
                                        <p className="ak-field-help">
                                            This practice has no locations yet, so there is none to narrow by.
                                        </p>
                                    )}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-1.5">
                                    <Label htmlFor="segment-last-appt-status">Last appointment status</Label>
                                    {/* 🚨 Its OWN constant — never LAST_APPT_STATUSES merged with ANY_STATUS_WITHIN_DAYS_STATUSES. */}
                                    <Select
                                        value={draft.lastApptStatus === '' ? ANY_VALUE : draft.lastApptStatus}
                                        onValueChange={(v) => setAxis('lastApptStatus', v === ANY_VALUE ? '' : v)}
                                    >
                                        <SelectTrigger id="segment-last-appt-status" className="w-full">
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                            <SelectItem value={ANY_VALUE}>Any status</SelectItem>
                                            {LAST_APPT_STATUSES.map((s) => (
                                                <SelectItem key={s} value={s}>{humanizeSegmentValue(s)}</SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="space-y-1.5">
                                    <Label htmlFor="segment-any-status-within-days-days">
                                        Any appointment with status, within days
                                    </Label>
                                    <div className="flex gap-2">
                                        {/* 🚨 Its OWN constant — `cancelled` is legal here and illegal above. Never merged. */}
                                        <Select
                                            value={draft.anyStatusWithinDaysStatus === '' ? ANY_VALUE : draft.anyStatusWithinDaysStatus}
                                            onValueChange={(v) => setAxis('anyStatusWithinDaysStatus', v === ANY_VALUE ? '' : v)}
                                        >
                                            <SelectTrigger id="segment-any-status-within-days-status" className="w-1/2">
                                                <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectItem value={ANY_VALUE}>Not set</SelectItem>
                                                {ANY_STATUS_WITHIN_DAYS_STATUSES.map((s) => (
                                                    <SelectItem key={s} value={s}>{humanizeSegmentValue(s)}</SelectItem>
                                                ))}
                                            </SelectContent>
                                        </Select>
                                        <Input
                                            id="segment-any-status-within-days-days"
                                            type="number"
                                            min={1}
                                            max={MAX_DAYS}
                                            className="w-1/2"
                                            value={draft.anyStatusWithinDaysDays}
                                            aria-invalid={!!segmentErrors.anyStatusWithinDaysDays}
                                            onChange={(e) => setAxis('anyStatusWithinDaysDays', e.target.value)}
                                        />
                                    </div>
                                    {segmentErrors.anyStatusWithinDaysDays && (
                                        <p className="ak-field-error">{segmentErrors.anyStatusWithinDaysDays}</p>
                                    )}
                                </div>
                            </div>

                            <fieldset className="space-y-2" aria-describedby="segment-conditions-help">
                                <legend className="text-sm leading-none font-medium">Diagnoses</legend>
                                {catalogue.kind === 'ready' && (
                                    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
                                        {catalogue.rows.map((row) => (
                                            <div key={row.id} className="flex items-center gap-2">
                                                <Checkbox
                                                    id={`segment-condition-${row.id}`}
                                                    checked={chosenConditionIds.has(row.id)}
                                                    onCheckedChange={(checked) => setAxis('conditionCodes',
                                                        toggleConditionRow(draft.conditionCodes, catalogue.rows, row.id, checked === true))}
                                                />
                                                <Label htmlFor={`segment-condition-${row.id}`}>{row.label}</Label>
                                            </div>
                                        ))}
                                    </div>
                                )}
                                {catalogue.kind === 'failed' ? (
                                    <div id="segment-conditions-help">
                                        <p className="ak-field-error">
                                            The list of diagnoses could not be loaded, so none can be chosen. Everything
                                            else about the audience still works.
                                        </p>
                                        <button type="button" className="btn btn-blue-ghost mt-2" onClick={() => { void readCatalogue(); }}>
                                            Try again
                                        </button>
                                    </div>
                                ) : catalogue.kind === 'missing' ? (
                                    <p id="segment-conditions-help" className="ak-field-help">
                                        No list of diagnoses is available, so none can be chosen. Everything else about
                                        the audience still works.
                                    </p>
                                ) : catalogue.kind === 'loading' ? (
                                    <p id="segment-conditions-help" className="ak-field-help">Loading diagnoses&hellip;</p>
                                ) : (
                                    <p id="segment-conditions-help" className="ak-field-help">
                                        Only a diagnosis listed here, recorded on the patient&rsquo;s chart, can match. Leave
                                        all unchecked to apply no diagnosis filter.
                                    </p>
                                )}
                            </fieldset>

                            <div className="flex items-center gap-2">
                                <Checkbox
                                    id="segment-exclude-already-booked"
                                    checked={draft.excludeAlreadyBooked}
                                    onCheckedChange={(checked) => setAxis('excludeAlreadyBooked', checked === true)}
                                />
                                <Label htmlFor="segment-exclude-already-booked">
                                    Exclude patients who already have a booked appointment
                                </Label>
                            </div>

                            <p className="ak-body">
                                <strong>Audience: </strong>
                                {describeSegment(buildSegment(draft), catalogueRows)}
                            </p>
                        </>
                    )}
                </CardContent>
            </Card>

            {campaign && campaign.status === 'scheduled' && (
                <Card>
                    <CardContent className="space-y-2 pt-6" data-testid="campaign-delivery-report">
                        <h2 className="ak-section-title">Delivery</h2>
                        <p className="ak-card__meta">
                            Nothing has been sent yet. Delivery is reported once the campaign sends.
                        </p>
                    </CardContent>
                </Card>
            )}

            {campaign && campaign.status !== 'draft' && campaign.status !== 'scheduled' && (
                <Card>
                    <CardContent className="space-y-3 pt-6" data-testid="campaign-delivery-report">
                        <h2 className="ak-section-title">Delivery</h2>

                        <dl className="ak-facts">
                            {campaignReportRows(campaign).map((row) => (
                                <div key={row.label} className="ak-facts__item">
                                    <dt>{row.label}</dt>
                                    <dd>{row.value}</dd>
                                </div>
                            ))}
                        </dl>

                        {/* 🚨 THE SENTENCE THAT KEEPS THE REPORT HONEST. An untracked campaign shows NO delivery
                            rows at all and says why — never a row of zeroes, which would assert that its mail
                            did not land. */}
                        {(() => {
                            if (campaign.protocolVersion === 2) return <p className="ak-card__meta">Dispatch and delivery are separate. Shared campaign link clicks and bookings are campaign-level totals; no SMS opens are inferred.</p>;
                            const tracking = describeTracking(campaign.counts);
                            if (tracking.kind === 'full') return null;
                            if (tracking.kind === 'untracked') {
                                return (
                                    <p className="ak-card__meta">
                                        {/* Final fix wave, MINOR 6 — worded as a fact, not a cause: "sent before
                                            delivery reporting was available" is one possible reason among others
                                            (e.g. a non-tag-safe campaign id), not the only one this can mean. */}
                                        Delivery was not tracked for this campaign, so there is nothing to report
                                        here. This does not mean the messages failed.
                                    </p>
                                );
                            }
                            return (
                                <p className="ak-card__meta">
                                    Delivery tracked for {tracking.tracked} of {tracking.sent} sent. The figures
                                    above cover only those, so they are a floor rather than a total.
                                </p>
                            );
                        })()}
                    </CardContent>
                </Card>
            )}

            {!readOnly && (
                <Card>
                    <CardContent className="space-y-4 pt-6">
                        <h2 className="ak-section-title">Send this campaign</h2>
                        <p className="ak-card__meta">
                            Sending requires a completed count of this exact audience — the number a
                            practice agrees to is the number it is held to.
                        </p>

                        <div className="flex flex-wrap items-center gap-3">
                            <button type="button" className="btn btn-blue-ghost" disabled={state.kind === 'counting'} onClick={handleCount}>
                                {state.kind === 'counting' ? 'Counting…' : 'Count audience'}
                            </button>

                            {/* ⛔ NEVER a partial `eligible` while counting — it is a running total
                                until the walk finishes, so progress is chunks completed, not a number. */}
                            {state.kind === 'counting' && (
                                <span className="ak-card__meta">
                                    {state.chunks} chunk{state.chunks === 1 ? '' : 's'} checked so far…
                                </span>
                            )}

                            {state.kind === 'counted' && (
                                <span className="ak-body">
                                    <strong>{state.eligible}</strong> eligible people in this approved audience
                                     ({state.matched} matched before opt-in and suppression).
                                </span>
                            )}
                        </div>

                        {state.kind === 'counted' && reasonRows(state.byReason).length > 0 && (
                            <ul className="ak-card__meta space-y-1" aria-label="Why the others will not receive it">
                                {reasonRows(state.byReason).map((row) => (
                                    <li key={row.key}>{row.label}: {row.count}</li>
                                ))}
                            </ul>
                        )}

                        {state.kind === 'failed' && (
                            <div className="ak-notice">
                                <p>{state.message}</p>
                                {state.retryable && (
                                    <button type="button" className="btn btn-blue-ghost mt-2" onClick={handleCount}>Count again</button>
                                )}
                                {state.mustNarrow && (
                                    <p className="mt-2">Narrow the segment above, then count the audience again.</p>
                                )}
                            </div>
                        )}

                        {campaign && (
                            <>
                                {readinessKnown && previewChannels.some(channel => capabilities?.readiness[channel]?.reason === 'quiet-hours') && <p className="ak-field-help">This campaign can be queued now. Dispatch waits until your practice&apos;s sending hours open.</p>}
                                {!readinessKnown && <p className="ak-field-help">Every selected channel must be ready before a new dispatch can be approved. {selectedChannels.map(channel => capabilities?.readiness[channel]?.reason).filter(Boolean).join(' ')}</p>}
                                {actionRefusal && (
                                    <div className="ak-notice ak-notice--error">
                                        <p>{actionRefusal.message}</p>
                                        {actionRefusal.retryable && (
                                            <button type="button" className="btn btn-blue mt-2" onClick={retryLastAction}>
                                                Try again
                                            </button>
                                        )}
                                        {actionRefusal.mustNarrow && (
                                            <p className="mt-2">
                                                Narrow the segment above, then count the audience again.
                                            </p>
                                        )}
                                    </div>
                                )}

                                <div className="flex flex-wrap items-end gap-3 pt-2 border-t">
                                    <button type="button"
                                        className="btn btn-blue"
                                        disabled={unsaved || !sendableNow || !commandReady || heldAction !== undefined || actionBusy !== null}
                                        aria-describedby={unsaved ? 'campaign-send-unsaved' : noRecipients ? 'campaign-send-now-reason' : undefined}
                                        onClick={() => setConfirming('send')}
                                    >
                                        {actionBusy === 'send' ? 'Sending…' : 'Send now'}
                                    </button>

                                    <div className="space-y-1.5">
                                        <Label htmlFor="campaign-scheduled-for">Send at</Label>
                                        <Input
                                            id="campaign-scheduled-for"
                                            type="datetime-local"
                                            value={scheduledForInput}
                                            className="w-56"
                                            onChange={(e) => setScheduledForInput(e.target.value)}
                                        />
                                    </div>
                                    <button type="button"
                                        className="btn btn-blue"
                                        disabled={unsaved || !sendable || !commandReady || heldAction !== undefined || actionBusy !== null || scheduledForInput === ''}
                                        aria-describedby={unsaved ? 'campaign-send-unsaved' : undefined}
                                        onClick={() => setConfirming('schedule')}
                                    >
                                        {actionBusy === 'schedule' ? 'Scheduling…' : 'Schedule'}
                                    </button>
                                </div>
                                {unsaved && (
                                    <p id="campaign-send-unsaved" className="ak-field-help">Save your changes before sending or scheduling.</p>
                                )}
                                {noRecipients && (
                                    <p id="campaign-send-now-reason" className="ak-field-help">
                                        No eligible recipients. Review the audience and the reasons above, then count again.
                                    </p>
                                )}

                                <CampaignConfirmDialog
                                    confirmation={unsaved || !commandReady || heldAction !== undefined || state.kind !== 'counted' || confirming === null ? null
                                        : confirming === 'send' ? (sendableNow ? sendNowConfirmation(state.eligible) : null)
                                        : scheduleConfirmation(state.eligible, scheduledWhenLabel(scheduledForInput))}
                                    onConfirm={() => void (confirming === 'send' ? handleSend() : handleSchedule())}
                                    onKeep={() => setConfirming(null)}
                                />
                            </>
                        )}
                    </CardContent>
                </Card>
            )}

            {!readOnly && (
                <div className="flex items-center justify-end gap-3">
                    {saveError && (
                        <DismissibleAlert status="error" onDismiss={() => setSaveError(null)} className="flex-1">
                            {saveError}
                        </DismissibleAlert>
                    )}
                    <button type="button" className="btn btn-green" disabled={!canSave} onClick={() => void handleSave()}>
                        {saving ? 'Saving…' : (id ? 'Save changes' : 'Create campaign')}
                    </button>
                </div>
            )}
        </div>
    );
}