import { useLocation, useNavigate } from 'react-router-dom';
import { Spinner } from "../../../components/ui/spinner";
import { Item, ItemGroup } from "../../../components/ui/item-group";
import { DismissibleAlert } from '../../../components/ui/dismissible-alert';
import { Flex, FlexItem } from '../../../components/ui/flex';
import { Text } from '../../../components/ui/text';
import { Spacer } from '../../../components/ui/spacer';
import { Modal } from '../../../components/ui/wp-modal-shim';
import { DropdownMenu, DropdownMenuItem } from '../../../components/ui/dropdown-menu';
import {
    Check, ChevronDown, Copy, Globe, Link2, MoreHorizontal, PlusCircle, Trash2, TriangleAlert,
} from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../components/ui/tabs';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../../components/ui/dialog';
import { Questionnaire } from 'fhir/r4';
import QuestionnairePreview from './QuestionnairePage/QuestionnairePreview/QuestionnairePreview.tsx';
import {
    useQuestionnaireServiceContext,
    usePaginatorServiceContext
} from '../../../services';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import QuestionnaireAssignmentModal from './QuestionnaireAssignmentModal/QuestionnaireAssignmentModal.tsx';
import QuestionnairePackets from './QuestionnairePackets/QuestionnairePackets';
import { isWpAdminMount } from '../../../utils/mountContext';
import { isPublicFormDraft } from '../../../utils/publicFormKind';
import { deletePublicForm } from '../../../utils/wpAdminApi.ts';
import { isHostedMount, PUBLIC_FORMS_NEED_WORDPRESS } from '../../../utils/hostedMount';
import { usePublicFormServiceContext, type PublishedPublicForm } from '../../../services/PublicFormService.tsx';
import { useFhirQuestionnaires } from '../../../hooks/useFhirQuestionnaires';
import { groupFormsByKind, formsNotServedOnHost, type FormRow } from '../../../utils/formsSections';
import FormSubmissionNotificationsSettings from '../FormSubmissionNotificationsPage/FormSubmissionNotificationsSettings.tsx';
import { describeWriteFailure } from '../../../utils/fetchFailureMessage';

type FormsTab = 'public' | 'clinical';

interface QuestionnairesPageProps {
    allowPatientAssignment?: boolean;
}

const QuestionnairesPage = ({ allowPatientAssignment = false }: QuestionnairesPageProps) => {
    const navigate = useNavigate();
    const {
        transformFromFhirQuestionnaire,
        deleteQuestionnaire,
        templateBundle,
        templateList,
        fetchQuestionnaireTemplatesWithPolling
    } = useQuestionnaireServiceContext();
    const { listPublicForms, deactivatePublicForm, updatePublicFormDomains } = usePublicFormServiceContext();
    /*
 * THE WHOLE LIST, NOT A PAGE - and this is the reason the paginator no longer wraps the rows.
 * Grouping and counting a PAGE produces a number that reads as a measurement and is not one, which is
 * this header's entire history: an absent count rendering as zero (214), a count describing a set the
 * reader cannot see (252), a count including public forms while naming them clinical (469).
 * It is affordable because the fetch already reads every page (`fetchAllPagesAsBundle`) - the
 * paginator was slicing a complete bundle client-side, so nothing new is being asked of the server.
 */
    const {
        questionnaireList,
        questionnaireBundle,
        loading: questionnairesLoading,
        error: questionnairesError,
        loadQuestionnaires,
    } = useFhirQuestionnaires({ pageSize: 100 });
    // The library is unknown until its read answers; a failed or pending read is never "no forms yet".
    const libraryUnread = !questionnaireBundle && !questionnairesError;
    const { actions } = usePaginatorServiceContext();
    const { deleteItem } = actions;
    // - `usage` is no longer read here. The header count it fed is gone: a single number
    // cannot describe two kinds of thing, and each section now counts exactly the rows under it.
    // The three defects that line carried are recorded on the section headers below, because the
    // warnings still bind: never a numeric fallback for an absent value (214), never a count of a
    // set the reader cannot see (252), never a count that mixes the two kinds (469).

    const [loading, setLoading] = useState(false);
    const [createStep, setCreateStep] = useState<'choose' | 'templates' | null>(null);
    const [deleting, setDeleting] = useState<Record<string, boolean>>({});
    const [error, setError] = useState<string | undefined>();
    const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);
    const [questionnaireToDelete, setQuestionnaireToDelete] = useState<{ questionnaire: Questionnaire, index: number } | null>(null);
    const [showPreviewModal, setShowPreviewModal] = useState<boolean>(false);
    const [selectedQuestionnaire, setSelectedQuestionnaire] = useState<Questionnaire | null>(null);
    const [showAssignmentModal, setShowAssignmentModal] = useState(false);
    /**
 * - THE PUBLISHED FORMS, FROM THE RECORD. Previously a WordPress option.
 *
 * The option was never the registry - it was a duplicate CACHE of one, and the duplication is what
 * hurt: **akashic.health has no `wp_options` to read**, so the standalone client could never list a
 * published form, and the org setup checklist's public-form step was unresolvable without a WordPress
 * admin session - so it read *not done* while a live, CAPTCHA-protected form was published.
 * Building this screen against that source would bake the WordPress-shaped divergence into the very
 * screen built to clear up the confusion it caused. item 3 made the record listable first,
 * and this card was held until it landed.
 */
    const [publicForms, setPublicForms] = useState<PublishedPublicForm[]>([]);
    const [unpublishing, setUnpublishing] = useState<Record<string, boolean>>({});
    const [formToUnpublish, setFormToUnpublish] = useState<PublishedPublicForm | null>(null);
    // - the form whose authorized domains are being edited, and the text being edited.
    const [formToRepoint, setFormToRepoint] = useState<PublishedPublicForm | null>(null);
    const [domainsDraft, setDomainsDraft] = useState('');
    const [domainsSaving, setDomainsSaving] = useState(false);
    const [domainsError, setDomainsError] = useState<string | null>(null);
    /**
 * - WHETHER WE KNOW WHAT KIND EACH ROW IS. Three states, not two.
 *
 * The "Akashic Public Form" badge has shipped since 2026-07-29, and the read behind it swallowed every
 * failure into an empty catch. **A failed read and a practice with no public forms produce the
 * identical screen** - every row unbadged - so the one signal telling a public contact form apart from
 * clinical intake disappears silently, and the row keeps a `Delete` that takes down a page on the
 * practice's public website.
 * Best-effort is right for the BADGE (a missing badge must not break the list). It is wrong for the
 * CLAIM the list makes by omission.
 *
 * AND DO NOT WRITE A COMMENTED-OUT CODE SAMPLE ANYWHERE IN THIS FILE. The guard beside it strips
 * comments with a regex whose first pass matches a braced comment block; a sample containing that
 * shape inside a comment matched THROUGH to the next brace and silently deleted 12,000 characters of
 * the stripped source, so three assertions failed against code that was present all along.
 */
    const [publicFormsRead, setPublicFormsRead] = useState<'loading' | 'ready' | 'failed'>('loading');
    const [publicFormsAttempt, setPublicFormsAttempt] = useState(0);
    // A builder or LOINC search returns to the library it was opened from.
    const location = useLocation();
    const [tab, setTab] = useState<FormsTab>(() => (location.state as { formsTab?: FormsTab } | null)?.formsTab ?? 'public');
    const [showNotifications, setShowNotifications] = useState(false);
    const [copiedHandle, setCopiedHandle] = useState<string | null>(null);

    const spacerMargin = '24px';

    const methods = useForm<Record<string, unknown>>({
        defaultValues: {}
    });

    const { reset, watch } = methods;

    const loadData = useCallback(async () => {
        setLoading(true);

        try {
            await fetchQuestionnaireTemplatesWithPolling();
        } catch (error) {
            console.error('Failed to load questionnaire templates:', error);
            setError(`Could not load questionnaire templates. Try again.`);
        } finally {
            setLoading(false);
        }
    }, [fetchQuestionnaireTemplatesWithPolling]);

    useEffect(() => {
        if (!templateBundle) {
            loadData();
        }

    }, [loadData, templateBundle]);

    useEffect(() => {
        let cancelled = false;
        setPublicFormsRead('loading');
        (async () => {
            try {
                const forms = await listPublicForms();
                if (!cancelled) {
                    setPublicForms(forms);
                    setPublicFormsRead('ready');
                }
            } catch (readError) {
                // - STILL best-effort for the list, but no longer SILENT. Without the state
                // below, a failed read renders exactly the same screen as a practice that has published
                // no public forms, and the reader has no way to tell "none" from "unknown".
                // raised the stakes: the kind now decides which SECTION a row appears in, so a
                // failed read means the page must not split the list at all - see `sections.grouped`.
                console.warn('Failed to read published public forms; row kinds are unknown.', readError);
                if (!cancelled) setPublicFormsRead('failed');
            }
        })();
        return () => { cancelled = true; };
    }, [listPublicForms, publicFormsAttempt]);

    const viewQuestionnaire = (questionnaire: Questionnaire) => {
        navigate(questionnaire.id as string, {
            relative: 'path',
            state: {
                questionnaire: questionnaire,
                template: null
            }
        });
    };

    /**
 * CREATION DECIDES THE KIND - Spencer: *"building a form under 'public forms' is automatically set as
 * a public form and the list of those remain there. Building a form under 'clinical questionnaires' is
 * built as a regular questionnaire."*
 *
 * THIS IS WHAT MAKES THE SEPARATION HOLD. Publication is not a toggle applied later, so a form never
 * appears in two places and nothing has to move between lists. Both buttons open the **same builder**
 * - one primitive, one engine; the difference is only what is registered when it is saved.
 */
    const createQuestionnaire = (template?: Questionnaire | undefined, publicForm = false) => {
        navigate(template ? `templates/${template.id}/new` : 'new', {
            relative: 'path',
            state: {
                questionnaire: null,
                template: template,
                publicForm,
            }
        });
    };

    const addFromLoinc = () => {
        navigate('/dashboard/questionnaires/search');
    };

    const confirmDelete = (questionnaire: Questionnaire, index: number) => {
        setQuestionnaireToDelete({ questionnaire, index });
        setShowDeleteModal(true);
    };

    const handleDeleteQuestionnaire = async () => {
        if (!questionnaireToDelete) return;

        const { questionnaire } = questionnaireToDelete;

        setDeleting(prev => ({ ...prev, [questionnaire.id!]: true }));
        setShowDeleteModal(false);

        try {
            await deleteQuestionnaire(questionnaire);
            deleteItem(questionnaire.id!);
        } catch (error) {
            console.error('Failed to delete questionnaire:', error);
            setError('Failed to delete questionnaire. Please try again.');
        } finally {
            setDeleting(prev => ({ ...prev, [questionnaire.id!]: false }));
            setQuestionnaireToDelete(null);
        }
    };

    const confirmUnpublish = (form: PublishedPublicForm) => {
        setFormToUnpublish(form);
    };

    /**
 * UNPUBLISHING IS REVERSIBLE, AND THE CONFIRM SAYS WHAT IT DOES rather than asking "are you sure".
 * The registration flips inactive - the public handlers gate on `active` - so the form stops being
 * reachable and the questionnaire itself is untouched.
 */
    const handleUnpublish = async () => {
        if (!formToUnpublish) return;

        const { formHandle: handle, questionnaireId } = formToUnpublish;
        setUnpublishing((prev) => ({ ...prev, [handle]: true }));
        setFormToUnpublish(null);
        // A new attempt answers for itself; an earlier refusal must not outlive a later success.
        setError(undefined);

        try {
            await deactivatePublicForm(handle);
            // Updated locally rather than re-fetched, so the row reads as unpublished at once rather than
            // offering Unpublish for a form that is already off the website.
            setPublicForms((prev) => prev.map((form) => (
                form.formHandle === handle ? { ...form, active: false } : form
            )));
            // Unpublished either way; a failed WordPress cleanup is said as that, not as a failed unpublish.
            if (isWpAdminMount()) {
                try {
                    await deletePublicForm(questionnaireId);
                } catch (cleanupError) {
                    console.error('Unpublished, but WordPress kept its record of the form:', cleanupError);
                    setError('The form is unpublished and no longer accepts submissions, but WordPress could not remove its record.');
                }
            }
        } catch (unpublishError) {
            console.error('Failed to unpublish a public form:', unpublishError);
            setError('We could not unpublish that form. It is still on your website.');
        } finally {
            setUnpublishing((prev) => ({ ...prev, [handle]: false }));
        }
    };

    /**
 * - CHANGE WHICH DOMAINS A PUBLISHED FORM ANSWERS ON.
 *
 * THE SCENARIO IS THE NORMAL BUILD SEQUENCE, NOT AN EDGE CASE: a site is built on a staging host,
 * the forms are published there, and the practice switches to their real domain on go-live day. The
 * fence is enforced at the token mint, the submission and the framed render **every published form
 * stops working at once**, and it looks like a broken website rather than a wrong setting.
 *
 * ADD-AND-REMOVE, WHICH IS WHY THIS IS A LIST AND NOT A SINGLE FIELD. A cutover is not
 * instantaneous - both hosts run for a while - so the honest middle state is both, and the old one is
 * dropped afterwards. A single-value control would make the switch a coin flip on the one day it must
 * not be.
 */
    const repoint = (form: PublishedPublicForm) => {
        setDomainsError(null);
        setDomainsDraft((form.authorizedDomains ?? []).join('\n'));
        setFormToRepoint(form);
    };

    const handleSaveDomains = async () => {
        if (!formToRepoint) return;

        const handle = formToRepoint.formHandle;
        const domains = domainsDraft.split(/[\n,]/).map((value) => value.trim()).filter(Boolean);

        setDomainsSaving(true);
        setDomainsError(null);

        try {
            // The SERVER's answer is what is stored, not the draft. It normalizes what was typed
            // (`https://example.com/` `example.com`) and de-duplicates, so echoing the draft back into
            // the row would show the practice something other than the fence now in force.
            const saved = await updatePublicFormDomains(handle, domains);

            setPublicForms((prev) => prev.map((form) => (
                form.formHandle === handle ? { ...form, authorizedDomains: saved.authorizedDomains } : form
            )));
            setFormToRepoint(null);
        } catch (repointError: any) {
            console.error('Failed to update a public form\'s domains:', repointError);
            // The dialog stays OPEN and keeps what they typed. This is the screen a practice reaches on
            // go-live day, and losing their list to a validation error would be its own small outage.
            setDomainsError(describeWriteFailure(repointError, 'We could not save those domains'));
        } finally {
            setDomainsSaving(false);
        }
    };

    const assign = (questionnaire: Questionnaire) => {
        setSelectedQuestionnaire(questionnaire);
        setShowAssignmentModal(true);
    };


    const handleCloseAssignmentModal = () => {
        setShowAssignmentModal(false);
        setSelectedQuestionnaire(null);
    };

    const preview = (event: React.MouseEvent, questionnaire: Questionnaire) => {
        event.stopPropagation();
        reset(transformFromFhirQuestionnaire(questionnaire));
        setShowPreviewModal(true);
    };

    /*
 * - THE SPLIT, and `grouped` is the field the whole screen turns on.
 *
 * The kind of a row is not a property of the Questionnaire; it is the answer to *"has this been
 * published as a public form?"*, which is a SEPARATE read. If that read failed we do not know which
 * section anything belongs in, and two labelled groups would file a live contact form under
 * **"Clinical questionnaires"** with a plain Delete beside it.
 */
    const sections = groupFormsByKind(questionnaireList ?? [], publicForms, publicFormsRead);
    /*
 * - the published forms this WordPress site cannot serve. Empty everywhere but wp-admin:
 * only there is the browser's host the practice's own, and comparing against ours would flag everything.
 */
    const brokenOnThisSite = formsNotServedOnHost(
        sections.publicForms,
        isWpAdminMount() ? window.location.host : null,
    );

    // A dialog opened from a row menu keeps focus; the closing menu must not pull it back to its trigger.
    const dialogFromMenu = useRef(false);
    const fromMenu = (open: () => void) => {
        dialogFromMenu.current = true;
        // After the menu has closed, so its focus trap is gone before the dialog sets its own.
        window.setTimeout(open, 0);
    };
    const keepDialogFocus = (event: Event) => {
        if (!dialogFromMenu.current) return;
        dialogFromMenu.current = false;
        event.preventDefault();
    };

    const publicLocked = isHostedMount();

    const renderActions = (row: FormRow, index: number, kind: 'public' | 'clinical' | 'unknown') => {
        const { questionnaire, publicForm } = row;
        const locked = publicLocked && kind === 'public';
        const title = questionnaire.title || 'Unnamed';
        const busy = deleting[questionnaire.id!] || (publicForm ? unpublishing[publicForm.formHandle] : false);

        return (
            <Flex justify="end" gap={1} align="center">
                <FlexItem>
                    <button type="button"
                            className="btn btn-blue-ghost-sm"
                            disabled={locked}
                            onClick={(e) => { e.stopPropagation(); viewQuestionnaire(questionnaire); }}>
                        Edit
                    </button>
                </FlexItem>
                <FlexItem>
                    <button type="button"
                            className="btn btn-blue-ghost-sm"
                            disabled={locked}
                            onClick={(e) => preview(e, questionnaire)}>
                        Preview
                    </button>
                </FlexItem>
                <FlexItem>
                    {busy ? <Spinner/> : (
                        <DropdownMenu label={'More actions for ' + title}
                                      icon={<MoreHorizontal className="size-4" aria-hidden="true"/>}
                                      className="btn btn-blue-ghost-sm"
                                      disabled={locked}
                                      onCloseAutoFocus={keepDialogFocus}>
                            {allowPatientAssignment && kind === 'clinical' && (
                                <DropdownMenuItem icon={<PlusCircle className="size-4" aria-hidden="true"/>}
                                                  onSelect={() => fromMenu(() => assign(questionnaire))}>
                                    Assign to a patient
                                </DropdownMenuItem>
                            )}
                            {publicForm?.authorizedDomains && (
                                <DropdownMenuItem icon={<Link2 className="size-4" aria-hidden="true"/>}
                                                  onSelect={() => fromMenu(() => repoint(publicForm))}>
                                    Website domains
                                </DropdownMenuItem>
                            )}
                            {publicForm?.active ? (
                                <DropdownMenuItem destructive
                                                  icon={<Globe className="size-4" aria-hidden="true"/>}
                                                  onSelect={() => fromMenu(() => confirmUnpublish({ ...publicForm, title }))}>
                                    Unpublish
                                </DropdownMenuItem>
                            ) : publicFormsRead !== 'ready' ? (
                                // Whether this is a public form is unknown, so nothing destructive is offered.
                                null
                            ) : (
                                <DropdownMenuItem destructive
                                                  icon={<Trash2 className="size-4" aria-hidden="true"/>}
                                                  onSelect={() => fromMenu(() => confirmDelete(questionnaire, index))}>
                                    {'Delete'}
                                </DropdownMenuItem>
                            )}
                        </DropdownMenu>
                    )}
                </FlexItem>
            </Flex>
        );
    };

    const statusLabel = (row: FormRow, kind: 'public' | 'clinical' | 'unknown') => {
        if (kind === 'public') return row.publicForm ? (row.publicForm.active ? 'Published' : 'Unpublished') : 'Draft';
        const status = row.questionnaire.status ?? 'unknown';
        return status.charAt(0).toUpperCase() + status.slice(1);
    };

    const copyShortcode = async (handle: string) => {
        try {
            await navigator.clipboard.writeText('[akashere_public_form handle="' + handle + '"]');
            setCopiedHandle(handle);
        } catch (copyError) {
            console.warn('Could not copy the shortcode.', copyError);
            setCopiedHandle(null);
        }
    };

    const renderList = (rows: FormRow[], kind: 'public' | 'clinical' | 'unknown') => {
        return (
            <ItemGroup className="ak-card-list" isRounded={false}>
                {rows.map((row, index) => {
                    const { questionnaire, publicForm } = row;
                    const openable = !(publicLocked && kind === 'public');
                    // The row is not a click target: its title opens it, beside Edit, Preview and More, so the
                    // mouse and the keyboard reach the same controls.
                    return (
                        <Item key={questionnaire.id} className="ak-card">
                            <div className="flex flex-col items-start gap-3 sm:flex-row sm:items-center">
                                <div className="min-w-0 flex-1">
                                    <div className="flex flex-wrap items-center gap-2">
                                        <FlexItem>
                                            <button type="button"
                                                    className="ak-card__title ak-card__title--lead m-0 appearance-none border-0 bg-transparent p-0 text-left text-inherit"
                                                    disabled={!openable}
                                                    onClick={() => viewQuestionnaire(questionnaire)}>
                                                {questionnaire.title || 'Unnamed'}
                                            </button>
                                        </FlexItem>
                                        <FlexItem>
                                            <span className={'ak-pill ak-pill--square' + ((publicForm ? publicForm.active : questionnaire.status === 'active') ? ' ak-pill--ok' : '')}>
                                                {statusLabel(row, kind)}
                                            </span>
                                        </FlexItem>
                                    </div>
                                    {kind === 'clinical' && (
                                        <p className="ak-card__meta">
                                            {questionnaire.status === 'active'
                                                ? 'Available for patient assignment'
                                                : 'Not available for patient assignment'}
                                        </p>
                                    )}
                                    {publicForm && !publicForm.active && (
                                        <p className="ak-card__meta">Not on your website</p>
                                    )}
                                </div>
                                <div>
                                    {renderActions(row, index, kind)}
                                </div>
                            </div>
                            {publicForm?.active && publicLocked && (
                                <p className="ak-card__meta mt-2" aria-disabled="true">Embedding controls</p>
                            )}
                            {publicForm?.active && !publicLocked && (
                                // The block leads because an editor that curls the shortcode quotes breaks it. The wrapper only
                                // keeps presses inside the panel from opening the card it sits on.
                                <div role="presentation" onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
                                    <details className="mt-2">
                                        <summary className="ak-disclosure__trigger">
                                            Embedding controls
                                            <ChevronDown className="ak-chev" aria-hidden="true"/>
                                        </summary>
                                        <Spacer margin="4"/>
                                        <Text variant="muted" size="small">
                                            In WordPress, add the <strong>Public Form</strong> block and choose this
                                            form. Or use its shortcode: <code>[akashere_public_form
                                            handle=&quot;{publicForm.formHandle}&quot;]</code>
                                        </Text>
                                        <Spacer margin="4"/>
                                        <button type="button"
                                                className="btn btn-blue-ghost-sm"
                                                onClick={() => void copyShortcode(publicForm.formHandle)}>
                                            {copiedHandle === publicForm.formHandle ? <Check /> : <Copy />}
                                            {copiedHandle === publicForm.formHandle ? 'Copied' : 'Copy shortcode'}
                                        </button>
                                        <Spacer margin="4"/>
                                        <Text variant="muted" size="small">
                                            Publishing makes the form available for embedding. It does not create or
                                            publish a WordPress page.
                                        </Text>
                                    </details>
                                </div>
                            )}
                        </Item>
                    );
                })}
            </ItemGroup>
        );
    };

    const createMenu = loading ? <Spinner/> : (
        <button type="button" className="btn btn-blue" onClick={() => setCreateStep('choose')}>
            Create questionnaire
        </button>
    );

    const createChoice = (title: string, help: string, onClick: () => void, disabled = false) => (
        <button type="button"
                className="ak-card flex w-full flex-col gap-1.5 text-left"
                disabled={disabled}
                onClick={onClick}>
            <span className="ak-card__title ak-card__title--lead ak-link">{title}</span>
            <span className="ak-card__meta">{help}</span>
        </button>
    );

    const createDialog = (
        <Dialog open={createStep !== null} onOpenChange={(open) => { if (!open) setCreateStep(null); }}>
            <DialogContent className="ak-dialog max-w-none gap-0 p-0" aria-describedby={undefined}>
                <DialogHeader className="ak-overlay__header border-b border-border">
                    <DialogTitle>{createStep === 'templates' ? 'Use a saved template' : 'Create questionnaire'}</DialogTitle>
                </DialogHeader>
                <div className="ak-overlay__body">
                    {createStep === 'templates' ? (
                        <div className="ak-card-list">
                            {templateList.map((template: Questionnaire) => (
                                <React.Fragment key={template.id}>
                                    {createChoice(template.title || 'Untitled template', template.description || 'Saved template',
                                        () => createQuestionnaire(template))}
                                </React.Fragment>
                            ))}
                        </div>
                    ) : (
                        <div className="ak-card-list">
                            {createChoice('Start blank', 'Write your own clinical questions.', () => createQuestionnaire())}
                            {createChoice('Use a saved template',
                                templateList.length !== 0
                                    ? 'Select from templates available to this practice.'
                                    : 'No saved templates are available to this practice yet.',
                                () => setCreateStep('templates'), templateList.length === 0)}
                            {createChoice('Import from LOINC', 'Search standardized questionnaires, preview, then import.', addFromLoinc)}
                        </div>
                    )}
                </div>
                {createStep === 'templates' && (
                    <DialogFooter className="ak-overlay__footer flex-row">
                        <button type="button" className="btn btn-blue-ghost mr-auto" onClick={() => setCreateStep('choose')}>
                            &larr; Back
                        </button>
                    </DialogFooter>
                )}
            </DialogContent>
        </Dialog>
    );

    const publicSection = (
        <section>
            <div className="flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:justify-between">
                <div className="min-w-0">
                    <h2 className="ak-section-title">Public forms</h2>
                    <p className="ak-page-title__sub">
                        For website visitors. No account required. Submissions go to the front desk.
                    </p>
                </div>
                <div className="flex flex-wrap gap-2">
                    <button type="button"
                            className="btn btn-blue-ghost"
                            disabled={publicLocked}
                            onClick={() => setShowNotifications(true)}>
                        Notification settings
                    </button>
                    <button type="button"
                            className="btn btn-blue"
                            disabled={publicLocked}
                            onClick={() => createQuestionnaire(undefined, true)}>
                        Create public form
                    </button>
                </div>
            </div>
            {publicLocked && (
                <>
                    <Spacer margin="4"/>
                    <DismissibleAlert status="info">{PUBLIC_FORMS_NEED_WORDPRESS}</DismissibleAlert>
                </>
            )}
            <Spacer margin="5"/>
            {sections.publicForms.length > 0 ? renderList(sections.publicForms, 'public') : (
                <Text variant="muted" size="small">
                    No public forms yet.
                </Text>
            )}
            <Spacer margin="8"/>
            <p className="ak-card__meta">
                {/* A count is a section length, never a fallback such as ?? 0 on a value that did not load. */}
                {sections.publicForms.length} public form{sections.publicForms.length === 1 ? '' : 's'} &middot;
                &ldquo;Published&rdquo; does not confirm placement on a live website.
            </p>
        </section>
    );

    const clinicalSection = (
        <section>
            <div className="flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:justify-between">
                <div className="min-w-0">
                    <h2 className="ak-section-title">Clinical questionnaires</h2>
                    <p className="ak-page-title__sub">
                        For patients to complete in their portal. Answers become part of their record.
                    </p>
                </div>
                <div>
                    {createMenu}
                </div>
            </div>
            <Spacer margin="5"/>
            {sections.clinical.length > 0 ? renderList(sections.clinical, 'clinical') : (
                <Text variant="muted" size="small">
                    No clinical questionnaires yet.
                </Text>
            )}
            <Spacer margin="8"/>
            <p className="ak-card__meta">
                {sections.clinical.length} questionnaire{sections.clinical.length === 1 ? '' : 's'} &middot; Create
                these for clinical questions, not to recapture information already in a patient&apos;s profile.
            </p>
            <Spacer margin="8"/>
            <QuestionnairePackets questionnaires={sections.clinical.map((row) => row.questionnaire)}
                                  onPreview={(questionnaire) => {
                                      reset(transformFromFhirQuestionnaire(questionnaire));
                                      setShowPreviewModal(true);
                                  }}/>
        </section>
    );

    return (
        <div>
            <Flex align="center" justify="space-between">
                <FlexItem>
                    <h1 className="ak-page-title">Forms</h1>
                    <p className="ak-page-title__sub">
                        Build and manage forms. Submitted answers are handled in the front desk or clinical workspace.
                    </p>
                </FlexItem>
                {!sections.grouped && questionnaireBundle && (
                    <FlexItem>
                        {createMenu}
                    </FlexItem>
                )}
            </Flex>
            <Spacer margin="8"/>

            <div className="ak-page-body">
            {error && (
                <>
                    <DismissibleAlert status="error" onDismiss={() => setError(undefined)}>
                        {error}
                    </DismissibleAlert>

                    <Spacer margin={spacerMargin}/>
                </>
            )}

            {/* 🚨 CARD 469 — SAY SO WHEN THE KIND IS UNKNOWN, rather than showing an unbadged list.
                A failed read of the published public forms and a practice that has published none produce
                the SAME screen: every row unbadged. ⛔ That is not a cosmetic gap — the row's `Delete`
                takes down a page on the practice's public website for one kind and affects patient intake
                for the other, and the badge is the only thing on the row that says which.
                ⚖️ Deliberately NOT an error and NOT blocking: the questionnaires themselves loaded fine
                and every other action on this page still works. This withholds a CLAIM the screen was
                making by omission — the same distinction card 473 landed for the front desk's all-clear
                the same day. */}
            {publicFormsRead === 'failed' && (
                <>
                    <DismissibleAlert status="warning">
                        We couldn&apos;t check which of these are public forms, so none are marked as one and
                        none can be deleted until that is known.
                        {' '}
                        <button type="button" className="btn btn-blue-ghost-sm" onClick={() => setPublicFormsAttempt((n) => n + 1)}>
                            Try again
                        </button>
                    </DismissibleAlert>

                    <Spacer margin={spacerMargin}/>
                </>
            )}

            {/*
              * 🚨 CARD 518 — THE FORMS THAT ARE BROKEN ON THIS SITE RIGHT NOW.
              *
              * A practice builds their site on a staging host, publishes their forms there, and switches to
              * their real domain. The authorized-domain fence is enforced at the token mint, the submission
              * and the framed render ⇒ every published form stops working AT ONCE, silently, and to a
              * visitor it reads as a broken website rather than a wrong setting. Nobody is watching for it,
              * because it happens on the day everybody is watching something else.
              *
              * ⭐ WP-ADMIN ONLY, AND THAT IS THE WHOLE REASON THIS CAN BE TRUSTED. Here the address bar IS
              * the practice's own domain, so comparing against it means something. ⛔ On akashic.health the
              * host is OURS — the same check there would report every form of every practice as broken,
              * which is the cry-wolf failure that gets a warning ignored permanently.
              */}
            {isWpAdminMount() && brokenOnThisSite.length > 0 && (
                <>
                    <DismissibleAlert status="warning">
                        <strong>
                            <TriangleAlert size={16} style={{ verticalAlign: 'text-bottom' }} />{' '}
                            {brokenOnThisSite.length === 1
                                ? 'One public form will not work on this website.'
                                : `${brokenOnThisSite.length} public forms will not work on this website.`}
                        </strong>
                        {' '}They are set to answer on a different domain, so they will not load and will not
                        accept submissions here. If you have moved this site to{' '}
                        <strong>{window.location.host}</strong>, add it to each form&apos;s domains:{' '}
                        {brokenOnThisSite
                            .map((row) => row.questionnaire.title || row.publicForm?.formHandle)
                            .join(', ')}.
                    </DismissibleAlert>

                    <Spacer margin={spacerMargin}/>
                </>
            )}

            {/*
              * 🧩 CARD 486 — TWO SECTIONS, EACH STATING ITS CONSEQUENCE.
              *
              * 🗣️ The headers deliberately say what HAPPENS rather than what the thing is called:
              * *"Submissions go to the front desk — not to a patient's record"* against *"Answers save
              * straight to their record."* ⭐ The category labels alone do not carry the difference that
              * matters, and this is the sentence a practice needs BEFORE putting a form on the public
              * internet.
              *
              * ⛔ AND WHEN WE CANNOT TELL THE KINDS APART, THERE ARE NO SECTIONS. Splitting on a failed
              * read would file a live contact form under "Clinical questionnaires" — with a Delete that
              * takes a page off the practice's public website — and the reader would have no way to know.
              */}
            {questionnairesError && !questionnaireBundle ? (
                <div role="alert">
                    <Text>We could not load your forms. Your forms have not changed.</Text>
                    <Spacer margin="8"/>
                    <button type="button" className="btn btn-blue-ghost-sm" onClick={() => void loadQuestionnaires()}>
                        Try again
                    </button>
                </div>
            ) : libraryUnread || (questionnairesLoading && !questionnaireBundle) ? (
                <Text variant="muted" size="small">Loading forms&hellip;</Text>
            ) : sections.grouped ? (
                <Tabs value={tab} onValueChange={(value) => setTab(value as FormsTab)}>
                    <TabsList variant="line">
                        <TabsTrigger value="public">Public forms</TabsTrigger>
                        <TabsTrigger value="clinical">Clinical questionnaires</TabsTrigger>
                    </TabsList>
                    <TabsContent value="public">{publicSection}</TabsContent>
                    <TabsContent value="clinical">{clinicalSection}</TabsContent>
                </Tabs>
            ) : (
                renderList(sections.all, 'unknown')
            )}

            </div>

            {/* A destructive confirm says what deleting does and offers a way back, amber beside red. */}
            {showDeleteModal && questionnaireToDelete && (
                <Dialog open onOpenChange={(open) => { if (!open) setShowDeleteModal(false); }}>
                    <DialogContent className="flex flex-col gap-0 p-0 w-full max-w-lg">
                        <DialogHeader className="ak-overlay__header border-b border-border">
                            <DialogTitle>Delete {questionnaireToDelete.questionnaire.title?.replace(/[.?!\s]+$/, '') || 'this form'}?</DialogTitle>
                        </DialogHeader>
                        <div className="ak-overlay__body flex flex-col gap-3">
                            {isPublicFormDraft(questionnaireToDelete.questionnaire) ? (
                                <p className="ak-body">
                                    It leaves your forms library. Submissions already received are not deleted.
                                </p>
                            ) : (
                                <p className="ak-body">
                                    It leaves your forms library and can no longer be assigned, by hand or
                                    automatically. Answers patients have already given are not deleted.
                                </p>
                            )}
                        </div>
                        <DialogFooter className="ak-overlay__footer flex-row">
                            <button type="button"
                                    className="btn btn-blue-ghost"
                                    onClick={() => setShowDeleteModal(false)}>
                                Keep it
                            </button>
                            <button type="button"
                                    className="btn btn-red"
                                    onClick={handleDeleteQuestionnaire}>
                                <Trash2 />
                                Delete
                            </button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            )}

            {/*
              * ⭐ CARD 486 — THE CONFIRM NAMES THE CONSEQUENCE. Confirm-on-delete is already the house
              * rule; what a public form needs is a sentence saying what stops working, because the
              * thing being changed is on the practice's public website and the reader may not know it.
              */}
            {formToUnpublish && (
                <Dialog open onOpenChange={(open) => { if (!open) setFormToUnpublish(null); }}>
                    <DialogContent className="flex flex-col gap-0 p-0 w-full max-w-lg">
                        <DialogHeader className="ak-overlay__header border-b border-border">
                            <DialogTitle>Unpublish {formToUnpublish.title?.replace(/[.?!\s]+$/, '') || 'this form'}?</DialogTitle>
                        </DialogHeader>
                        <div className="ak-overlay__body flex flex-col gap-3">
                            <p className="ak-body">
                                Visitors will no longer be able to submit this form from your website. Existing
                                submissions remain available to authorized front-desk staff.
                            </p>
                            <p className="ak-body">
                                You can publish it again later. Its WordPress placement may still be present.
                            </p>
                        </div>
                        <DialogFooter className="ak-overlay__footer flex-row">
                            <button type="button"
                                    className="btn btn-blue-ghost"
                                    onClick={() => setFormToUnpublish(null)}>
                                Keep published
                            </button>
                            <button type="button"
                                    className="btn btn-red"
                                    onClick={() => void handleUnpublish()}>
                                Unpublish
                            </button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            )}

            {/*
              * 🌐 CARD 518 — THE DIALOG A PRACTICE REACHES ON GO-LIVE DAY.
              *
              * ⚖️ ONE PER LINE, AND MORE THAN ONE IS EXPECTED. A cutover is add-and-remove: both hosts run
              * for a while, so the correct middle state is both listed, and the old one deleted afterwards.
              * ⛔ A single-value field would force the switch to happen in one instant, which is not how a
              * site goes live.
              */}
            {formToRepoint && (
                <Modal title="Which website is this form on?"
                       onRequestClose={() => setFormToRepoint(null)}>
                    <Text>
                        This form only loads, and only accepts submissions, on the domains listed here. One
                        per line.
                    </Text>
                    <Spacer margin="8"/>
                    <Text variant="muted" size="small">
                        Moving to a new domain? Add the new one <strong>before</strong> you switch, keep both
                        while the old site is still up, then remove the old one. A form with no domains will
                        not work anywhere.
                    </Text>
                    <Spacer margin="8"/>
                    <textarea className="ak-field w-full font-mono"
                              rows={4}
                              value={domainsDraft}
                              onChange={(event) => setDomainsDraft(event.target.value)}
                              aria-label="Authorized domains, one per line"
                              placeholder={'example.com\nstaging.example.com'}/>

                    {domainsError && (
                        <>
                            <Spacer margin="8"/>
                            {/* ⛔ Not <Text variant="destructive">: this Text primitive accepts only `muted`, and the
                                error has to READ as an error. */}
                            <p className="ak-field-error">{domainsError}</p>
                        </>
                    )}

                    <Flex justify="end" style={{ marginTop: 32 }}>
                        <FlexItem>
                            <button type="button"
                                    className={`btn btn-green${domainsSaving ? ' btn-busy' : ''}`}
                                    onClick={() => void handleSaveDomains()}
                                    disabled={domainsSaving}>
                                {domainsSaving ? <Spinner/> : <Globe />}
                                {domainsSaving ? '' : 'Save domains'}
                            </button>
                        </FlexItem>
                    </Flex>
                </Modal>
            )}

            {/* Preview Modal */}
            {showPreviewModal && (
                <Modal style={{ width: '70%', height: '90%' }}
                       title={`Preview: ${watch('title') ?? 'Untitled'}`}
                       onRequestClose={() => setShowPreviewModal(false)}>
                    <FormProvider {...methods}>
                        <form>
                            <div style={{ paddingBottom: 16 }}>
                                <QuestionnairePreview/>
                            </div>
                        </form>
                    </FormProvider>
                </Modal>
            )}

            {createDialog}

            <Dialog open={showNotifications} onOpenChange={setShowNotifications}>
                <DialogContent className="flex flex-col gap-0 p-0 w-full max-w-lg">
                    <DialogHeader className="ak-overlay__header border-b border-border">
                        <DialogTitle>Notification settings</DialogTitle>
                    </DialogHeader>
                    <FormSubmissionNotificationsSettings showTitle={false} />
                </DialogContent>
            </Dialog>

            {/* Assign Modal */}
            {allowPatientAssignment && selectedQuestionnaire && (
                <QuestionnaireAssignmentModal isOpen={showAssignmentModal}
                                              onClose={handleCloseAssignmentModal}
                                              questionnaire={selectedQuestionnaire}/>
            )}
        </div>
    );
};

export default QuestionnairesPage;