import { useEffect, useRef, useState } from 'react';
import type { Questionnaire } from 'fhir/r4';
import { Archive, MoreHorizontal } from 'lucide-react';
import { Item, ItemGroup } from '../../../../components/ui/item-group';
import { Spinner } from '../../../../components/ui/spinner';
import { Spacer } from '../../../../components/ui/spacer';
import { Text } from '../../../../components/ui/text';
import { DismissibleAlert } from '../../../../components/ui/dismissible-alert';
import { DropdownMenu, DropdownMenuItem } from '../../../../components/ui/dropdown-menu';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../../../components/ui/dialog';
import {
    PacketChangedError, describePacketRefusal, usePacketPractice, useQuestionnairePacketService,
    type PacketStatus, type QuestionnairePacket,
} from '../../../../services/QuestionnairePacketService';
import { isSaveRetired, outcomeUnknown, useSaveScope, type SaveOperation } from '../../../../utils/saveOperation';
import { draftOfPacket, triggerSummary } from '../../../../utils/questionnairePacketDraft';
import PacketEditorDialog from './PacketEditorDialog';
import { packetName } from './packetWrites';

interface QuestionnairePacketsProps {
    /** The practice's clinical questionnaires; public forms are never offered. */
    questionnaires: Questionnaire[];
    onPreview: (questionnaire: Questionnaire) => void;
}

const STATUS_LABELS: Record<PacketStatus, string> = { draft: 'Draft', active: 'Active', retired: 'Retired' };

// Clinical questionnaires -> Packets: a practice's named, ordered sets of its own clinical questionnaires.
const QuestionnairePackets = ({ questionnaires, onPreview }: QuestionnairePacketsProps) => {
    const { listPackets, updatePacket } = useQuestionnairePacketService();
    // Read through a ref: a new service identity on a re-render is not a reason to read again.
    const listRef = useRef(listPackets);
    listRef.current = listPackets;
    const practice = usePacketPractice();
    // Reads and retirements belong to the practice they were started in; moving to another closes what was open.
    const lives = useSaveScope(practice, () => {
        setEditing(null);
        setToRetire(null);
    });
    const scopeOf = (life: SaveOperation) => ({ admit: life.admit, signal: life.transport.signal, organizationId: practice });
    // The list is unknown until its read answers; a failed or pending read is never "no packets".
    const [read, setRead] = useState<'loading' | 'ready' | 'failed'>('loading');
    const [attempt, setAttempt] = useState(0);
    const [packets, setPackets] = useState<QuestionnairePacket[]>([]);
    const [complete, setComplete] = useState(true);
    const [editing, setEditing] = useState<{ packet?: QuestionnairePacket } | null>(null);
    const [toRetire, setToRetire] = useState<QuestionnairePacket | null>(null);
    const [retiring, setRetiring] = useState<Record<string, boolean>>({});
    const [listError, setListError] = useState<string | null>(null);

    useEffect(() => {
        const life = lives.start();
        setRead('loading');
        setListError(null);
        life.step(() => listRef.current(scopeOf(life))).then((answer) => {
            setPackets(answer.packets);
            setComplete(answer.complete);
            setRead('ready');
        }, (error) => {
            if (isSaveRetired(error)) return;
            setRead('failed');
        });
        return () => life.retire();
        // eslint-disable-next-line react-hooks/exhaustive-deps -- a new read per practice and per Try again
    }, [attempt, practice]);

    const reload = () => setAttempt((n) => n + 1);

    const keep = (saved: QuestionnairePacket) => setPackets((list) => (
        list.some((each) => each.id === saved.id)
            ? list.map((each) => (each.id === saved.id ? saved : each))
            : [saved, ...list]
    ));

    const retire = async () => {
        const packet = toRetire;
        setToRetire(null);
        if (!packet?.version) return;
        setRetiring((busy) => ({ ...busy, [packet.id]: true }));
        setListError(null);
        const life = lives.start();
        try {
            const version = packet.version;
            keep(await life.step(() => updatePacket(packet.id, version, { ...draftOfPacket(packet), status: 'retired' }, scopeOf(life)), true));
        } catch (error) {
            if (isSaveRetired(error)) return;
            if (error instanceof PacketChangedError) {
                if (error.current) keep(error.current);
                setListError(`${packet.title} changed since this list was loaded, so it was not retired. Check it and try again.`);
            } else if (outcomeUnknown(error)) {
                setListError(`We could not confirm ${packet.title} was retired. The list has been refreshed.`);
                reload();
            } else {
                setListError(describePacketRefusal(error, `${packet.title} was not retired`));
            }
        } finally {
            setRetiring((busy) => ({ ...busy, [packet.id]: false }));
        }
    };

    const memberTitle = (questionnaireId: string, saved?: string) =>
        questionnaires.find((questionnaire) => questionnaire.id === questionnaireId)?.title || saved || 'Untitled questionnaire';

    // A dialog opened from the row menu keeps focus; the closing menu must not pull it back to its trigger.
    const dialogFromMenu = useRef(false);
    const keepDialogFocus = (event: Event) => {
        if (!dialogFromMenu.current) return;
        dialogFromMenu.current = false;
        event.preventDefault();
    };

    const renderRow = (packet: QuestionnairePacket) => {
        const editable = packet.status !== 'retired';
        const count = packet.members.length;
        return (
            <Item key={packet.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">
                            {editable ? (
                                <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"
                                        onClick={() => setEditing({ packet })}>
                                    {packet.title}
                                </button>
                            ) : (
                                <span className="ak-card__title ak-card__title--lead">{packet.title}</span>
                            )}
                            <span className={'ak-pill ak-pill--square' + (packet.status === 'active' ? ' ak-pill--ok' : '')}>
                                {STATUS_LABELS[packet.status]}
                            </span>
                        </div>
                        <p className="ak-card__meta">
                            {count} questionnaire{count === 1 ? '' : 's'}: {packet.members.map((member) => memberTitle(member.questionnaireId, member.title)).join(', ')}
                        </p>
                        <p className="ak-card__meta">
                            {packet.status === 'retired' ? 'Retired, so it cannot be assigned' : triggerSummary(packet.trigger)}
                        </p>
                    </div>
                    {editable && (
                        <div className="flex items-center justify-end gap-1">
                            <button type="button" className="btn btn-blue-ghost-sm" onClick={() => setEditing({ packet })}>
                                Edit
                            </button>
                            {retiring[packet.id] ? <Spinner/> : (
                                <DropdownMenu label={'More actions for ' + packet.title}
                                              icon={<MoreHorizontal className="size-4" aria-hidden="true"/>}
                                              className="btn btn-blue-ghost-sm"
                                              onCloseAutoFocus={keepDialogFocus}>
                                    <DropdownMenuItem destructive
                                                      icon={<Archive className="size-4" aria-hidden="true"/>}
                                                      disabled={!packet.version}
                                                      onSelect={() => {
                                                          dialogFromMenu.current = true;
                                                          window.setTimeout(() => setToRetire(packet), 0);
                                                      }}>
                                        Retire
                                    </DropdownMenuItem>
                                </DropdownMenu>
                            )}
                        </div>
                    )}
                </div>
            </Item>
        );
    };

    return (
        <section aria-labelledby="packets-heading">
            <div className="flex flex-col items-start gap-1 sm:flex-row sm:items-center sm:justify-between">
                <div className="min-w-0">
                    <h2 id="packets-heading" className="ak-section-title">Packets</h2>
                    <p className="ak-page-title__sub">
                        Send several clinical questionnaires to a patient as one item, in the order you set.
                    </p>
                </div>
                <button type="button" className="btn btn-blue" disabled={read !== 'ready'} onClick={() => setEditing({})}>
                    Create packet
                </button>
            </div>
            <Spacer margin="5"/>
            {listError && (
                <>
                    <DismissibleAlert status="error" onDismiss={() => setListError(null)}>{listError}</DismissibleAlert>
                    <Spacer margin="4"/>
                </>
            )}
            {read === 'loading' ? (
                <Text variant="muted" size="small">Loading packets&hellip;</Text>
            ) : read === 'failed' ? (
                <div role="alert">
                    <Text>We could not load your packets. Your packets have not changed.</Text>
                    <Spacer margin="4"/>
                    <button type="button" className="btn btn-blue-ghost-sm" onClick={reload}>Try again</button>
                </div>
            ) : (
                <>
                    {!complete && (
                        <>
                            <DismissibleAlert status="warning">
                                Some packets could not be read, so this list may be missing some.{' '}
                                <button type="button" className="btn btn-blue-ghost-sm" onClick={reload}>Try again</button>
                            </DismissibleAlert>
                            <Spacer margin="4"/>
                        </>
                    )}
                    {packets.length > 0 ? (
                        <ItemGroup className="ak-card-list" isRounded={false}>{packets.map(renderRow)}</ItemGroup>
                    ) : complete ? (
                        <Text variant="muted" size="small">No packets yet.</Text>
                    ) : null}
                </>
            )}

            {editing && (
                <PacketEditorDialog packet={editing.packet}
                                    questionnaires={questionnaires}
                                    onPreview={onPreview}
                                    onSaved={keep}
                                    knownPacketIds={packets.map((each) => each.id)}
                                    onUnconfirmed={reload}
                                    onClose={() => setEditing(null)}/>
            )}

            {toRetire && (
                <Dialog open onOpenChange={(isOpen) => { if (!isOpen) setToRetire(null); }}>
                    <DialogContent className="flex w-full max-w-lg flex-col gap-0 p-0" aria-describedby={undefined}>
                        <DialogHeader className="ak-overlay__header border-b border-border">
                            <DialogTitle>Retire {packetName(toRetire)}?</DialogTitle>
                        </DialogHeader>
                        <div className="ak-overlay__body flex flex-col gap-3">
                            <p className="ak-body">
                                It can no longer be assigned, by hand or automatically. Packets already sent to
                                patients, and their answers, are not changed.
                            </p>
                        </div>
                        <DialogFooter className="ak-overlay__footer flex-row">
                            <button type="button" className="btn btn-blue-ghost" onClick={() => setToRetire(null)}>Keep it</button>
                            <button type="button" className="btn btn-red" onClick={() => void retire()}>
                                <Archive aria-hidden="true"/>
                                Retire
                            </button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            )}
        </section>
    );
};

export default QuestionnairePackets;