import { useMemo, useState } from 'react';
import { ArrowLeft } from 'lucide-react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../../../../components/ui/dialog';
import { SelectControl } from '../../../../components/ui/select-control';
import type { ExtendedQuestionnaireItem } from '../../../../services';
import { currentPlacement, fieldName, moveDestinations, movePositions } from './builderFields';

// Radix Select cannot carry null or an empty string, so the top level travels as a sentinel.
const ROOT = '__outside_all_groups__';

interface Props {
    tree: ExtendedQuestionnaireItem[];
    field: ExtendedQuestionnaireItem;
    /** A draft has no answers yet, so leaving or joining a group needs no warning. */
    isDraft: boolean;
    onMove: (targetParentLinkId: string | null, targetIndex: number) => void;
    onClose: () => void;
}

// The keyboard route for what dragging does: pick a destination group and a position within it.
const MoveFieldDialog = ({ tree, field, isDraft, onMove, onClose }: Props) => {
    const placement = useMemo(() => currentPlacement(tree, field.linkId), [tree, field.linkId]);
    const destinations = useMemo(() => moveDestinations(tree, field.linkId), [tree, field.linkId]);
    const [destination, setDestination] = useState<string | null>(placement?.parentLinkId ?? null);
    const positions = useMemo(() => movePositions(tree, destination, field.linkId), [tree, destination, field.linkId]);
    const [position, setPosition] = useState<number>(Math.max(0, placement?.index ?? 0));

    const currentGroup = destinations.find((entry) => entry.parentLinkId === placement?.parentLinkId);
    const currentPosition = movePositions(tree, placement?.parentLinkId ?? null, field.linkId)
        .find((entry) => entry.index === placement?.index);
    const changesGroup = destination !== (placement?.parentLinkId ?? null);
    const unchanged = !changesGroup && position === placement?.index;

    return (
        <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
            <DialogContent className="flex flex-col gap-0 p-0 w-full max-w-lg">
                <DialogHeader className="ak-overlay__header border-b border-border">
                    <DialogTitle>Move field</DialogTitle>
                    <DialogDescription>{fieldName(field)}</DialogDescription>
                </DialogHeader>

                <div className="ak-overlay__body flex flex-col gap-4">
                    <p className="ak-body">
                        Currently {placement?.parentLinkId ? `inside ${currentGroup?.label}` : 'outside all groups'}
                        {currentPosition ? `, ${currentPosition.label.charAt(0).toLowerCase()}${currentPosition.label.slice(1)}` : ''}.
                    </p>

                    <SelectControl label="Destination"
                                   value={destination ?? ROOT}
                                   options={destinations.map((entry) => ({ label: entry.label, value: entry.parentLinkId ?? ROOT }))}
                                   onChange={(value) => {
                                       const next = value === ROOT ? null : value;
                                       setDestination(next);
                                       setPosition(movePositions(tree, next, field.linkId).length - 1);
                                   }}/>

                    <SelectControl label="Position"
                                   value={String(position)}
                                   options={positions.map((entry) => ({ label: entry.label, value: String(entry.index) }))}
                                   onChange={(value) => setPosition(Number(value))}/>

                    <p className="ak-field-help">
                        The field keeps its ID, answer type, coding and conditions. Only its place in the form changes.
                    </p>

                    {!isDraft && changesGroup && (
                        <p className="ak-notice">
                            If patients have already answered this form, their answers to this question will stop
                            appearing. The data is not deleted; it is recorded at the old position and will no longer show.
                        </p>
                    )}
                </div>

                <DialogFooter className="ak-overlay__footer flex-row">
                    <button type="button" className="btn btn-blue-ghost mr-auto" onClick={onClose}>
                        <ArrowLeft className="size-4" aria-hidden="true"/>
                        Back
                    </button>
                    <button type="button" className="btn btn-green" disabled={unchanged} onClick={() => onMove(destination, position)}>
                        Move field
                    </button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default MoveFieldDialog;