import { useCallback, useEffect, useMemo, useState } from 'react';
import { ActivityDefinition, Bundle, Extension, Questionnaire } from 'fhir/r4';
import { AlertCircle, ChevronDown, ChevronRight, ListChecks } from 'lucide-react';
import { useActivityDefinitionServiceContext } from '../../../services/ActivityDefinitionService.tsx';
import { useQuestionnaireServiceContext } from '../../../services/QuestionnaireService.tsx';
import { useOptionalPublicFormService } from '../../../services/PublicFormService.tsx';
import { Button } from '../../../components/ui/button.tsx';
import { Input } from '../../../components/ui/input.tsx';
import { Textarea } from '../../../components/ui/textarea.tsx';
import { Label } from '../../../components/ui/label.tsx';
import {
    AKASHIC_TASK_DOCUMENT_REQUEST_EXTENSION,
    getTaskDocumentRequest,
    withDocumentRequestExtension,
} from '../../../utils/documentRequestTask';
import { Skeleton } from '../../../components/ui/skeleton.tsx';
import { EmptyState } from '../../../components/ui/empty-state.tsx';
import { DismissibleAlert } from '../../../components/ui/dismissible-alert';
import DiscardChangesDialog from '../../../components/DiscardChangesDialog/DiscardChangesDialog';
import { listReadState } from '../../../utils/listReadState';
import { sectionReadFailure, type SectionReadFailure } from '../../../utils/sectionReadRefusal';
import { describeServerRefusal } from '../../../utils/serverRefusalMessage';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '../../../components/ui/select.tsx';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '../../../components/ui/dialog.tsx';
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from '../../../components/ui/alert-dialog.tsx';
import './AutomatedTasksPage.css';
import {
    AUTO_ASSIGN_PRIORITY_URL,
    AUTO_ASSIGN_TRIGGER_OPTIONS,
    AUTO_ASSIGN_TRIGGER_URL,
    AutoAssignTrigger,
} from '../../../config/autoAssign';
import { assignedWhen, getTrigger, questionnaireEligibility, triggerHelp } from './automatedTaskRules';
import { CheckboxControl } from '../../../components/ui/checkbox-control';
import { newChecklistStepId, readChecklist, withChecklistSteps, type ChecklistStep } from '../../../utils/taskChecklist';

type AutomatedTaskKind = 'custom' | 'questionnaire';
type QuestionnaireTrigger = Exclude<AutoAssignTrigger, 'off'>;

// An automated task carries no priority. Whoever wires the automation up is frequently not an employee
// of the practice, and an urgency on something that reaches a patient before an appointment is a clinical
// signal that is not theirs to set. FHIR always carries `routine`.
const AUTOMATED_TASK_PRIORITY = 'routine';

interface AutomatedTaskRow {
    kind: AutomatedTaskKind;
    id: string;
    title: string;
    trigger: AutoAssignTrigger;
    resource: ActivityDefinition | Questionnaire;
}

interface CustomFormState {
    title: string;
    description: string;
    trigger: AutoAssignTrigger;
    /** What the patient is asked to send, or empty when this task asks for no file. */
    documentRequest: string;
    steps: ChecklistStep[];
}

/**
 * A new rule starts with no trigger, so the reader has to choose one.
 */
const UNCHOSEN_TRIGGER = '' as const;

interface QuestionnaireFormState {
    questionnaireId: string;
    trigger: QuestionnaireTrigger | typeof UNCHOSEN_TRIGGER;
}

const DEFAULT_CUSTOM_FORM: CustomFormState = {
    title: '',
    description: '',
    trigger: 'off',
    documentRequest: '',
    steps: [],
};

const DEFAULT_QUESTIONNAIRE_FORM: QuestionnaireFormState = {
    questionnaireId: '',
    trigger: UNCHOSEN_TRIGGER,
};

const QUESTIONNAIRE_TRIGGER_OPTIONS = AUTO_ASSIGN_TRIGGER_OPTIONS.filter(
    (option) => option.value !== 'off'
) as { value: QuestionnaireTrigger; label: string }[];

// Priority is always routine: a questionnaire has no native priority field.
const setQuestionnaireAutoAssign = (
    questionnaire: Questionnaire,
    trigger: QuestionnaireTrigger
): Questionnaire => {
    const otherExtensions = (questionnaire.extension ?? []).filter(
        (ext) => ext.url !== AUTO_ASSIGN_TRIGGER_URL && ext.url !== AUTO_ASSIGN_PRIORITY_URL
    );
    return {
        ...questionnaire,
        extension: [
            ...otherExtensions,
            { url: AUTO_ASSIGN_TRIGGER_URL, valueCode: trigger },
            { url: AUTO_ASSIGN_PRIORITY_URL, valueCode: AUTOMATED_TASK_PRIORITY },
        ],
    };
};

const clearQuestionnaireAutoAssign = (questionnaire: Questionnaire): Questionnaire => {
    const remaining = (questionnaire.extension ?? []).filter(
        (ext) => ext.url !== AUTO_ASSIGN_TRIGGER_URL && ext.url !== AUTO_ASSIGN_PRIORITY_URL
    );
    const updated: Questionnaire = { ...questionnaire };
    if (remaining.length > 0) {
        updated.extension = remaining;
    } else {
        delete updated.extension;
    }
    return updated;
};

type EditorStep = 'choose' | AutomatedTaskKind;

interface EditorState {
    mode: 'create' | 'edit';
    step: EditorStep;
    row: AutomatedTaskRow | null;
}

const questionnaireName = (questionnaire: Questionnaire) =>
    questionnaire.title || questionnaire.name || 'Untitled';

const AutomatedTasksPage = () => {
    const {
        fetchActivityDefinitions,
        createActivityDefinition,
        updateActivityDefinition,
        deleteActivityDefinition,
    } = useActivityDefinitionServiceContext();
    const { fetchQuestionnaires, updateQuestionnaire } = useQuestionnaireServiceContext();
    const publicForms = useOptionalPublicFormService();
    const listPublicForms = publicForms?.listPublicForms;

    const [rows, setRows] = useState<AutomatedTaskRow[]>([]);
    const [allQuestionnaires, setAllQuestionnaires] = useState<Questionnaire[]>([]);
    // Null while public forms are unread, so the picker offers nothing rather than guessing.
    const [publicQuestionnaireIds, setPublicQuestionnaireIds] = useState<ReadonlySet<string> | null>(null);
    const [loading, setLoading] = useState<boolean>(true);
    const [loadFailure, setLoadFailure] = useState<SectionReadFailure | null>(null);

    const [editor, setEditor] = useState<EditorState | null>(null);
    const [customForm, setCustomForm] = useState<CustomFormState>(DEFAULT_CUSTOM_FORM);
    // Separate from the label so the switch can be on with the field empty, which save refuses.
    const [asksForDocument, setAsksForDocument] = useState(false);
    // The optional sections start collapsed unless the task already uses them.
    const [documentOpen, setDocumentOpen] = useState(false);
    const [checklistOpen, setChecklistOpen] = useState(false);
    const [questionnaireForm, setQuestionnaireForm] = useState<QuestionnaireFormState>(DEFAULT_QUESTIONNAIRE_FORM);
    const [baseline, setBaseline] = useState<string>('');
    const [isSaving, setIsSaving] = useState<boolean>(false);
    const [formError, setFormError] = useState<string | null>(null);
    const [saveFailed, setSaveFailed] = useState<boolean>(false);
    const [confirmDiscard, setConfirmDiscard] = useState<boolean>(false);
    const [previewing, setPreviewing] = useState<boolean>(false);
    // Said only once the server has confirmed the write.
    const [savedTitle, setSavedTitle] = useState<string | null>(null);

    const [rowToDelete, setRowToDelete] = useState<AutomatedTaskRow | null>(null);
    const [isDeleting, setIsDeleting] = useState<boolean>(false);
    const [deleteFailure, setDeleteFailure] = useState<string | null>(null);

    const loadRows = useCallback(async () => {
        setLoading(true);
        setLoadFailure(null);
        try {
            const [adBundle, qBundle, published]: [Bundle<ActivityDefinition>, Bundle<Questionnaire>, ReadonlySet<string> | null] = await Promise.all([
                fetchActivityDefinitions(),
                fetchQuestionnaires(100),
                listPublicForms
                    ? listPublicForms()
                        .then((forms) => new Set(forms.map((form) => form.questionnaireId)) as ReadonlySet<string>)
                        .catch(() => null)
                    : Promise.resolve(null),
            ]);

            const activityDefinitions = (adBundle.entry?.map((entry) => entry.resource).filter(Boolean) ?? []) as ActivityDefinition[];
            const questionnaires = (qBundle.entry?.map((entry) => entry.resource).filter(Boolean) ?? []) as Questionnaire[];

            const customRows: AutomatedTaskRow[] = activityDefinitions.map((resource) => ({
                kind: 'custom',
                id: resource.id ?? '',
                title: resource.title || 'Untitled task',
                trigger: getTrigger(resource),
                resource,
            }));

            // Only questionnaires with a trigger are rows; the rest are candidates for the picker.
            const questionnaireRows: AutomatedTaskRow[] = questionnaires
                .filter((resource) => getTrigger(resource) !== 'off')
                .map((resource) => ({
                    kind: 'questionnaire',
                    id: resource.id ?? '',
                    title: questionnaireName(resource),
                    trigger: getTrigger(resource),
                    resource,
                }));

            setAllQuestionnaires(questionnaires);
            setPublicQuestionnaireIds(published);
            setRows([...customRows, ...questionnaireRows]);
        } catch (err) {
            console.error('Error loading automated tasks:', err);
            setLoadFailure(sectionReadFailure(err));
        } finally {
            setLoading(false);
        }
    }, [fetchActivityDefinitions, fetchQuestionnaires, listPublicForms]);

    useEffect(() => {
        loadRows();
    }, [loadRows]);

    const pickableQuestionnaires = useMemo(
        () => allQuestionnaires
            .filter((q) => !!q.id)
            .map((q) => ({ questionnaire: q, eligibility: questionnaireEligibility(q, publicQuestionnaireIds) }))
            .filter(({ eligibility }) => eligibility === 'eligible' || eligibility === 'draft'),
        [allQuestionnaires, publicQuestionnaireIds]
    );
    const hasEligibleQuestionnaire = pickableQuestionnaires.some(({ eligibility }) => eligibility === 'eligible');

    const snapshot = JSON.stringify({ customForm, asksForDocument, questionnaireForm });
    const isDirty = editor !== null && editor.step !== 'choose' && snapshot !== baseline;

    const openEditor = (
        next: EditorState,
        custom: CustomFormState,
        asks: boolean,
        questionnaire: QuestionnaireFormState,
    ) => {
        setCustomForm(custom);
        setAsksForDocument(asks);
        setDocumentOpen(asks);
        setChecklistOpen(custom.steps.some((step) => step.instruction.trim()));
        setQuestionnaireForm(questionnaire);
        setBaseline(JSON.stringify({ customForm: custom, asksForDocument: asks, questionnaireForm: questionnaire }));
        setFormError(null);
        setSaveFailed(false);
        setConfirmDiscard(false);
        setSavedTitle(null);
        setPreviewing(false);
        setEditor(next);
    };

    const openCreate = () => openEditor(
        { mode: 'create', step: 'choose', row: null },
        DEFAULT_CUSTOM_FORM,
        false,
        DEFAULT_QUESTIONNAIRE_FORM,
    );

    const openEdit = (row: AutomatedTaskRow) => {
        if (row.kind === 'custom') {
            const resource = row.resource as ActivityDefinition;
            const request = getTaskDocumentRequest(resource);
            openEditor(
                { mode: 'edit', step: 'custom', row },
                {
                    title: resource.title || '',
                    description: resource.description || '',
                    trigger: row.trigger,
                    // Read back so saving an untouched task does not drop the request it already had.
                    documentRequest: request?.label ?? '',
                    steps: readChecklist(resource),
                },
                request !== undefined,
                DEFAULT_QUESTIONNAIRE_FORM,
            );
        } else {
            openEditor(
                { mode: 'edit', step: 'questionnaire', row },
                DEFAULT_CUSTOM_FORM,
                false,
                { questionnaireId: row.id, trigger: row.trigger === 'off' ? UNCHOSEN_TRIGGER : row.trigger },
            );
        }
    };

    const closeEditor = () => {
        setConfirmDiscard(false);
        setPreviewing(false);
        setEditor(null);
    };

    const requestClose = () => {
        if (isSaving) return;
        if (isDirty) {
            setConfirmDiscard(true);
            return;
        }
        closeEditor();
    };

    const handleSaveCustom = async () => {
        const editingRow = editor?.mode === 'edit' ? editor.row : null;
        const title = customForm.title.trim();
        const description = customForm.description.trim();

        if (!title) {
            setFormError('Task title is required.');
            return;
        }
        if (!description) {
            setFormError('Instructions are required.');
            return;
        }
        // A request with no label reaches the patient as a file control naming nothing.
        if (asksForDocument && !customForm.documentRequest.trim()) {
            setFormError('Say what the patient should send.');
            return;
        }
        if (customForm.steps.some((step) => !step.instruction.trim())) {
            setFormError('Each checklist step needs an instruction.');
            return;
        }

        setIsSaving(true);
        setFormError(null);
        setSaveFailed(false);

        try {
            const carriedOver: Extension[] = (
                editingRow ? ((editingRow.resource as ActivityDefinition).extension ?? []) : []
            ).filter((existing) =>
                existing.url !== AUTO_ASSIGN_TRIGGER_URL
                && existing.url !== AKASHIC_TASK_DOCUMENT_REQUEST_EXTENSION);

            const extension: Extension[] = withChecklistSteps(
                withDocumentRequestExtension(
                    [
                        ...carriedOver,
                        ...(customForm.trigger !== 'off'
                            ? [{ url: AUTO_ASSIGN_TRIGGER_URL, valueCode: customForm.trigger }]
                            : []),
                    ],
                    customForm.documentRequest,
                ),
                customForm.steps,
            );

            if (editingRow) {
                // Spread the existing resource so id and meta (the org tag) survive the PUT.
                // HealthLake refuses an empty array, so a rule with nothing left carries no extension key.
                const { extension: _previous, ...existing } = editingRow.resource as ActivityDefinition;
                await updateActivityDefinition({
                    ...existing,
                    title,
                    description,
                    priority: AUTOMATED_TASK_PRIORITY,
                    ...(extension.length > 0 ? { extension } : {}),
                });
            } else {
                await createActivityDefinition({
                    resourceType: 'ActivityDefinition',
                    status: 'active',
                    title,
                    description,
                    priority: AUTOMATED_TASK_PRIORITY,
                    ...(extension.length > 0 ? { extension } : {}),
                });
            }

            closeEditor();
            setSavedTitle(title);
            await loadRows();
        } catch (err) {
            console.error('Error saving custom automated task:', err);
            setSaveFailed(true);
        } finally {
            setIsSaving(false);
        }
    };

    const handleSaveQuestionnaire = async () => {
        const editingRow = editor?.mode === 'edit' ? editor.row : null;
        setFormError(null);

        if (questionnaireForm.trigger === UNCHOSEN_TRIGGER) {
            setFormError('Choose when this questionnaire should be assigned.');
            return;
        }

        let target: Questionnaire | undefined;
        if (editingRow) {
            target = editingRow.resource as Questionnaire;
        } else {
            if (!questionnaireForm.questionnaireId) {
                setFormError('Select a questionnaire.');
                return;
            }
            // Re-checked at save: a draft or public form never becomes a patient task.
            const selected = allQuestionnaires.find((q) => q.id === questionnaireForm.questionnaireId);
            if (!selected || questionnaireEligibility(selected, publicQuestionnaireIds) !== 'eligible') {
                setFormError('Only active clinical questionnaires without an existing rule can be assigned.');
                return;
            }
            target = selected;
        }

        setIsSaving(true);
        setSaveFailed(false);
        try {
            await updateQuestionnaire(setQuestionnaireAutoAssign(target, questionnaireForm.trigger));
            closeEditor();
            setSavedTitle(questionnaireName(target));
            await loadRows();
        } catch (err) {
            console.error('Error saving questionnaire automated task:', err);
            setSaveFailed(true);
        } finally {
            setIsSaving(false);
        }
    };

    const handleSave = () => {
        if (editor?.step === 'custom') {
            void handleSaveCustom();
        } else if (editor?.step === 'questionnaire') {
            void handleSaveQuestionnaire();
        }
    };

    const confirmDelete = (row: AutomatedTaskRow) => {
        setDeleteFailure(null);
        setRowToDelete(row);
    };

    const handleDelete = async () => {
        if (!rowToDelete) return;
        setIsDeleting(true);
        setDeleteFailure(null);
        try {
            if (rowToDelete.kind === 'custom') {
                await deleteActivityDefinition(rowToDelete.resource as ActivityDefinition);
            } else {
                // Clears the rule only; the questionnaire itself is never deleted.
                await updateQuestionnaire(clearQuestionnaireAutoAssign(rowToDelete.resource as Questionnaire));
            }
            setRowToDelete(null);
            closeEditor();
            setSavedTitle(null);
            await loadRows();
        } catch (err) {
            console.error('Error removing automated task:', err);
            setDeleteFailure(
                describeServerRefusal(
                    err,
                    rowToDelete.kind === 'custom'
                        ? 'The task was not deleted'
                        : 'The assignment was not removed',
                ),
            );
        } finally {
            setIsDeleting(false);
        }
    };

    const readState = listReadState(loading, loadFailure, rows.length);
    // Nothing is changed from a list whose last read was not confirmed.
    const unverified = loading || loadFailure !== null;

    const rowList = (
        <>
            <div className="ahr-automated-tasks-list-head" aria-hidden="true">
                <small>Task</small>
                <small>Assigned when</small>
            </div>
            <div className="ak-card-list">
                {rows.map((row) => (
                    <button
                        type="button"
                        className="ak-card ahr-automated-tasks-row"
                        key={`${row.kind}-${row.id}`}
                        onClick={() => openEdit(row)}
                        disabled={unverified}
                    >
                        <span className="ahr-automated-tasks-row__main">
                            <span className="ak-card__title ak-card__title--lead ahr-automated-tasks-row__title">{row.title}</span>
                            <span className="ak-card__meta">
                                {row.kind === 'custom' ? 'Custom task' : 'Clinical questionnaire'}
                                {row.kind === 'custom' && getTaskDocumentRequest(row.resource as ActivityDefinition) !== undefined && (
                                    <> &middot; One document</>
                                )}
                                {row.kind === 'custom' && readChecklist(row.resource).length > 0 && (
                                    <> &middot; {readChecklist(row.resource).length} checklist {readChecklist(row.resource).length === 1 ? 'step' : 'steps'}</>
                                )}
                            </span>
                        </span>
                        <span className="text-sm text-ink ahr-automated-tasks-row__when">
                            {row.trigger === 'off'
                                ? <>Off &middot; not assigned automatically</>
                                : assignedWhen(row.trigger)}
                        </span>
                        <ChevronRight className="h-4 w-4 shrink-0 text-primary ahr-automated-tasks-row__next" aria-hidden="true" />
                    </button>
                ))}
            </div>
            <p className="ak-card__description ahr-automated-tasks-footnote">
                {rows.length} {rows.length === 1 ? 'task' : 'tasks'} &middot; Select a row to view or edit its setup.
            </p>
        </>
    );

    const renderList = () => {
        switch (readState) {
            case 'loading':
                return (
                    <div className="ak-card-list">
                        {[...Array(3)].map((_, index) => (
                            <div className="ahr-automated-tasks-skeleton-row" key={index}>
                                <Skeleton className="ahr-automated-tasks-skeleton" />
                            </div>
                        ))}
                    </div>
                );

            // No retry: the read was refused and pressing anything again produces the same refusal.
            case 'denied':
                return (
                    <div className="ahr-automated-tasks-error">
                        <AlertCircle className="ahr-automated-tasks-icon" />
                        <span>
                            You do not have access to this practice&rsquo;s automated tasks. That is a
                            refusal rather than a loading problem, so trying again will not change it.
                            Ask an administrator if you need it.
                        </span>
                    </div>
                );

            case 'failed':
                return (
                    <div className="ahr-automated-tasks-error" role="alert">
                        <AlertCircle className="ahr-automated-tasks-icon" />
                        <div className="ahr-automated-tasks-error__text">
                            <b>Unable to load automated tasks</b>
                            <span>We couldn&rsquo;t confirm your saved tasks. Nothing has been changed.</span>
                        </div>
                        <Button className="btn btn-red-ghost" onClick={() => void loadRows()}>Try again</Button>
                    </div>
                );

            case 'empty':
                return (
                    <EmptyState
                        icon={ListChecks}
                        title="No automated tasks yet"
                        description="Use New automated task to write instructions or choose a clinical questionnaire."
                    />
                );

            case 'stale':
                return (
                    <>
                        <DismissibleAlert status="warning" className="mb-4">
                            {loadFailure === 'denied'
                                ? 'These automated tasks could not be refreshed, so what is shown may be out of date. The refresh was refused rather than slow, so trying again will not update it.'
                                : 'These automated tasks could not be refreshed, so what is shown may be out of date.'}
                        </DismissibleAlert>
                        {loadFailure !== 'denied' && (
                            <Button className="btn btn-red-ghost mb-4" onClick={() => void loadRows()}>Try again</Button>
                        )}
                        {rowList}
                    </>
                );

            default:
                return rowList;
        }
    };

    const editorTitle = !editor
        ? ''
        : previewing
            ? 'Preview checklist'
            : editor.step === 'choose'
                ? 'New automated task'
                : editor.step === 'custom'
                    ? (editor.mode === 'edit' ? 'Edit custom task' : 'New custom task')
                    : (editor.mode === 'edit' ? 'Edit questionnaire assignment' : 'Assign a questionnaire');

    const updateStep = (index: number, patch: Partial<ChecklistStep>) =>
        setCustomForm((prev) => ({ ...prev, steps: prev.steps.map((step, at) => (at === index ? { ...step, ...patch } : step)) }));

    const moveStep = (index: number, by: -1 | 1) =>
        setCustomForm((prev) => {
            const steps = [...prev.steps];
            const [moved] = steps.splice(index, 1);
            steps.splice(index + by, 0, moved);
            return { ...prev, steps };
        });

    const removeStep = (index: number) =>
        setCustomForm((prev) => ({ ...prev, steps: prev.steps.filter((_, at) => at !== index) }));

    const addStep = () =>
        setCustomForm((prev) => ({ ...prev, steps: [...prev.steps, { id: newChecklistStepId(), instruction: '', timing: '' }] }));

    // What the patient will see, read-only: staff never tick a patient step.
    const checklistPreview = (
        <div className="ahr-automated-tasks-preview">
            <h3 className="ak-section-title">{customForm.title.trim() || 'Untitled task'}</h3>
            {customForm.steps.filter((step) => step.instruction.trim()).map((step) => (
                <div key={step.id} className="ahr-automated-tasks-step">
                    <CheckboxControl label={step.instruction} help={step.timing?.trim() || undefined} checked={false} disabled />
                </div>
            ))}
        </div>
    );

    const customFields = (
        <>
            <div className="ahr-automated-tasks-form__field">
                <Label htmlFor="automated-task-title">Task title *</Label>
                <Input
                    type="text"
                    id="automated-task-title"
                    value={customForm.title}
                    onChange={(event) => setCustomForm((prev) => ({ ...prev, title: event.target.value }))}
                    placeholder="e.g. Bring insurance card"
                />
            </div>

            <div className="ahr-automated-tasks-form__field">
                <Label htmlFor="automated-task-instructions">Instructions *</Label>
                <Textarea
                    id="automated-task-instructions"
                    value={customForm.description}
                    onChange={(event) => setCustomForm((prev) => ({ ...prev, description: event.target.value }))}
                    placeholder="What should the patient do to complete this task?"
                />
            </div>

            <div className="ahr-automated-tasks-form__field">
                <Label htmlFor="automated-task-trigger">Assign automatically</Label>
                <Select
                    value={customForm.trigger}
                    onValueChange={(value) => setCustomForm((prev) => ({ ...prev, trigger: value as AutoAssignTrigger }))}
                >
                    <SelectTrigger id="automated-task-trigger" className="ahr-automated-tasks-select-trigger">
                        <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                        {AUTO_ASSIGN_TRIGGER_OPTIONS.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                                {option.label}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
                <p className="ak-field-help">{triggerHelp(customForm.trigger)}</p>
            </div>

            <details className="ahr-automated-tasks-form__section" open={documentOpen} onToggle={(event) => setDocumentOpen(event.currentTarget.open)}>
                <summary className="ak-disclosure__trigger cursor-pointer">
                    Request a document <span className="ahr-automated-tasks-form__optional">&middot; optional</span>
                    <ChevronDown className="ak-chev" aria-hidden="true" />
                </summary>
                <div className="ak-disclosure__content">
                    <CheckboxControl
                        id="automated-task-asks-for-file"
                        label="Ask the patient for a file"
                        checked={asksForDocument}
                        onChange={(checked) => {
                            setAsksForDocument(checked);
                            // Off clears the label, so the next save removes the request.
                            if (!checked) {
                                setCustomForm((prev) => ({ ...prev, documentRequest: '' }));
                            }
                        }}
                    />
                {asksForDocument && (
                    <div className="ahr-automated-tasks-form__field">
                        <Label htmlFor="automated-task-document-request">What to send *</Label>
                        <Input
                            type="text"
                            id="automated-task-document-request"
                            value={customForm.documentRequest}
                            onChange={(event) => setCustomForm((prev) => ({ ...prev, documentRequest: event.target.value }))}
                            placeholder="e.g. Your referral letter"
                        />
                        <p className="ak-field-help">
                            One document, attached to this task. Uploaded files use the practice&rsquo;s storage.
                        </p>
                    </div>
                )}
                </div>
            </details>
            <details className="ahr-automated-tasks-form__section" open={checklistOpen} onToggle={(event) => setChecklistOpen(event.currentTarget.open)}>
                <summary className="ak-disclosure__trigger cursor-pointer">
                    Checklist <span className="ahr-automated-tasks-form__optional">&middot; optional</span>
                    <ChevronDown className="ak-chev" aria-hidden="true" />
                </summary>
                <div className="ak-disclosure__content">
                {customForm.steps.map((step, index) => (
                    <div className="ahr-automated-tasks-step" key={step.id}>
                        <h4 className="ak-card__title">Step {index + 1}</h4>
                        <div className="ahr-automated-tasks-step__actions">
                            <Button className="btn btn-blue-ghost-sm" aria-label={`Move step ${index + 1} up`} disabled={index === 0} onClick={() => moveStep(index, -1)}>
                                &uarr;
                            </Button>
                            <Button className="btn btn-blue-ghost-sm" aria-label={`Move step ${index + 1} down`} disabled={index === customForm.steps.length - 1} onClick={() => moveStep(index, 1)}>
                                &darr;
                            </Button>
                            <Button className="btn btn-red-ghost-sm" onClick={() => removeStep(index)}>Remove</Button>
                        </div>
                        <div className="ahr-automated-tasks-form__field">
                            <Label htmlFor={`automated-task-step-${step.id}`}>Instruction</Label>
                            <Input
                                type="text"
                                id={`automated-task-step-${step.id}`}
                                value={step.instruction}
                                onChange={(event) => updateStep(index, { instruction: event.target.value })}
                            />
                        </div>
                        <div className="ahr-automated-tasks-form__field">
                            <Label htmlFor={`automated-task-step-timing-${step.id}`}>
                                When to do it <span className="ahr-automated-tasks-form__optional">&middot; optional</span>
                            </Label>
                            <Input
                                type="text"
                                id={`automated-task-step-timing-${step.id}`}
                                value={step.timing ?? ''}
                                onChange={(event) => updateStep(index, { timing: event.target.value })}
                            />
                        </div>
                    </div>
                ))}
                <div className="ahr-automated-tasks-step__actions">
                    <Button className="btn btn-blue-ghost" onClick={addStep}>Add step</Button>
                    {customForm.steps.some((step) => step.instruction.trim()) && (
                        <Button className="btn btn-blue-ghost" onClick={() => setPreviewing(true)}>Preview checklist</Button>
                    )}
                </div>
                </div>
            </details>
        </>
    );

    const questionnaireFields = (
        <>
            <div className="ahr-automated-tasks-form__field">
                {editor?.mode === 'create' ? (
                    <>
                    <Label htmlFor="automated-task-questionnaire">Clinical questionnaire *</Label>
                    <Select
                        value={questionnaireForm.questionnaireId}
                        onValueChange={(value) => setQuestionnaireForm((prev) => ({ ...prev, questionnaireId: value }))}
                        disabled={!hasEligibleQuestionnaire}
                    >
                        <SelectTrigger id="automated-task-questionnaire" className="ahr-automated-tasks-select-trigger">
                            <SelectValue placeholder="Select a questionnaire" />
                        </SelectTrigger>
                        <SelectContent>
                            {pickableQuestionnaires.map(({ questionnaire, eligibility }) => (
                                <SelectItem
                                    key={questionnaire.id}
                                    value={questionnaire.id as string}
                                    disabled={eligibility !== 'eligible'}
                                >
                                    {questionnaireName(questionnaire)}
                                    {eligibility === 'eligible' ? <> &middot; Active</> : <> &middot; Draft &mdash; unavailable</>}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                    </>
                ) : (
                    <>
                    <h3 className="ak-section-title">{editor?.row?.title}</h3>
                    <p className="ak-field-help">Clinical questionnaire</p>
                    </>
                )}
            </div>

            <div className="ahr-automated-tasks-form__field">
                <Label htmlFor="automated-task-questionnaire-trigger">Assign automatically</Label>
                <Select
                    value={questionnaireForm.trigger}
                    onValueChange={(value) => setQuestionnaireForm((prev) => ({ ...prev, trigger: value as QuestionnaireTrigger }))}
                >
                    <SelectTrigger id="automated-task-questionnaire-trigger" className="ahr-automated-tasks-select-trigger">
                        <SelectValue placeholder="Choose when to assign it" />
                    </SelectTrigger>
                    <SelectContent>
                        {QUESTIONNAIRE_TRIGGER_OPTIONS.map((option) => (
                            <SelectItem key={option.value} value={option.value}>
                                {option.label}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
                <div className="ahr-automated-tasks-context">
                    {triggerHelp(questionnaireForm.trigger)}
                    {editor?.mode === 'edit' && <> Changes here also appear in this questionnaire&rsquo;s Form Settings.</>}
                </div>
            </div>
            {editor?.mode === 'create' && (
                <p className="ak-field-help">
                    {publicQuestionnaireIds === null
                        ? 'Public forms could not be checked, so no questionnaire can be offered. Close this and try again.'
                        : 'Only active clinical questionnaires without an existing rule are eligible. If none are available, manage your questionnaires in Forms.'}
                </p>
            )}
        </>
    );

    const chooser = (
        <div className="ak-card-list">
            <button
                type="button"
                className="ak-card ahr-automated-tasks-choice"
                onClick={() => setEditor((prev) => (prev ? { ...prev, step: 'custom' } : prev))}
            >
                <span className="ak-card__title ak-card__title--lead ak-link">Custom task &rarr;</span>
                <span className="ak-card__meta">
                    Write instructions for the patient. Optionally request a document.
                </span>
            </button>
            <button
                type="button"
                className="ak-card ahr-automated-tasks-choice"
                onClick={() => setEditor((prev) => (prev ? { ...prev, step: 'questionnaire' } : prev))}
            >
                <span className="ak-card__title ak-card__title--lead ak-link">Clinical questionnaire &rarr;</span>
                <span className="ak-card__meta">
                    Assign an existing clinical questionnaire. Public forms are not patient tasks.
                </span>
            </button>
        </div>
    );

    const isCustomStep = editor?.step === 'custom';
    const savingNoun = isCustomStep ? 'task' : 'assignment';

    return (
        <div className="ahr-automated-tasks-page">
            <div className="ahr-automated-tasks-header">
                <div className="ahr-automated-tasks-header__text">
                    <h1 className="ak-page-title">Automated Tasks</h1>
                    <p className="ak-page-title__sub">
                        Set up tasks and questionnaires for patients when an appointment is booked.
                    </p>
                </div>
                <Button className="btn btn-blue" onClick={openCreate} disabled={unverified}>
                    New automated task
                </Button>
            </div>

            <div className="ak-page-body">
            {savedTitle && (
                <div className="ahr-automated-tasks-context" role="status">Task saved: {savedTitle}.</div>
            )}

            {renderList()}
            </div>

            <Dialog open={editor !== null} onOpenChange={(open) => { if (!open) requestClose(); }}>
                {/* The deck's chooser has a title and no sentence under it, for sight and for screen readers. */}
                <DialogContent className="ak-dialog max-w-none gap-0 p-0" aria-describedby={undefined}>
                    <DialogHeader className="ak-overlay__header border-b border-border">
                        <DialogTitle>{editorTitle}</DialogTitle>
                    </DialogHeader>

                    <div className="ak-overlay__body">
                    {previewing ? checklistPreview : editor?.step === 'choose' ? chooser : (
                        <div className="ahr-automated-tasks-form">
                            {saveFailed && (
                                <div className="ahr-automated-tasks-error" role="alert">
                                    <AlertCircle className="ahr-automated-tasks-icon" />
                                    <div className="ahr-automated-tasks-error__text">
                                        <b>Unable to save {savingNoun}</b>
                                        <span>Your edits are still here. The saved {savingNoun} has not changed.</span>
                                    </div>
                                    <Button className="btn btn-green" onClick={handleSave} disabled={isSaving}>
                                        Try saving again
                                    </Button>
                                </div>
                            )}
                            {formError && <div className="ak-notice ak-notice--error">{formError}</div>}
                            {isCustomStep ? customFields : questionnaireFields}
                        </div>
                    )}
                    </div>

                    {previewing && (
                        <DialogFooter className="ak-overlay__footer">
                            <Button className="btn btn-blue-ghost" onClick={() => setPreviewing(false)}>
                                &larr; Back to task
                            </Button>
                        </DialogFooter>
                    )}

                    {/* One row at every width, as the deck draws it: the shared footer stacks below 640px. */}
                    {editor && editor.step !== 'choose' && !previewing && (
                        <DialogFooter className="ak-overlay__footer flex-row">
                            {editor.mode === 'create' ? (
                                <Button
                                    className="btn btn-blue-ghost mr-auto ahr-automated-tasks-back"
                                    onClick={() => setEditor((prev) => (prev ? { ...prev, step: 'choose' } : prev))}
                                    disabled={isSaving}
                                >
                                    &larr; Back
                                </Button>
                            ) : editor.row && (
                                <Button
                                    className="btn btn-red-ghost mr-auto"
                                    onClick={() => editor.row && confirmDelete(editor.row)}
                                    disabled={isSaving}
                                >
                                    {isCustomStep ? 'Delete task' : 'Remove assignment'}
                                </Button>
                            )}
                            <Button
                                className="btn btn-green"
                                onClick={handleSave}
                                disabled={isSaving
                                    || (editor.mode === 'create' && !isCustomStep && (!hasEligibleQuestionnaire
                                        || !questionnaireForm.questionnaireId || questionnaireForm.trigger === UNCHOSEN_TRIGGER))
                                    || (isCustomStep && (!customForm.title.trim() || !customForm.description.trim()))}
                            >
                                {isSaving
                                    ? 'Saving...'
                                    : `${editor.mode === 'edit' ? 'Update' : 'Save'} ${savingNoun}`}
                            </Button>
                        </DialogFooter>
                    )}
                </DialogContent>
            </Dialog>

            {confirmDiscard && (
                <DiscardChangesDialog
                    description="Your latest changes have not been saved."
                    onKeepEditing={() => setConfirmDiscard(false)}
                    onDiscard={closeEditor}
                />
            )}

            {rowToDelete && (
                <AlertDialog open onOpenChange={(open) => { if (!open && !isDeleting) setRowToDelete(null); }}>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogTitle>
                                {rowToDelete.kind === 'custom' ? 'Delete custom task?' : 'Remove questionnaire assignment?'}
                            </AlertDialogTitle>
                            <AlertDialogDescription>
                                {rowToDelete.kind === 'questionnaire' ? (
                                    <>Stop automatically assigning &ldquo;{rowToDelete.title}&rdquo;. The questionnaire itself will not be deleted.</>
                                ) : rowToDelete.trigger === 'off' ? (
                                    <>Permanently delete &ldquo;{rowToDelete.title}&rdquo;. Keeping it Off would retain the task instead.</>
                                ) : (
                                    <>Permanently delete &ldquo;{rowToDelete.title}&rdquo; and stop it being assigned for future bookings.</>
                                )}
                            </AlertDialogDescription>
                        </AlertDialogHeader>
                        {deleteFailure && (
                            <p className="ak-notice ak-notice--error" role="alert">{deleteFailure}</p>
                        )}
                        <AlertDialogFooter>
                            <AlertDialogCancel className="btn btn-amber" disabled={isDeleting}>
                                {rowToDelete.kind === 'custom' ? 'Keep the task' : 'Keep it assigned'}
                            </AlertDialogCancel>
                            <AlertDialogAction
                                onClick={(event) => {
                                    // Held open until the server answers, so a refusal is read here.
                                    event.preventDefault();
                                    void handleDelete();
                                }}
                                disabled={isDeleting}
                                className="btn btn-red"
                            >
                                {isDeleting
                                    ? (rowToDelete.kind === 'custom' ? 'Deleting...' : 'Removing...')
                                    : (rowToDelete.kind === 'custom' ? 'Delete task' : 'Remove assignment')}
                            </AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            )}
        </div>
    );
};

export default AutomatedTasksPage;