import { useState } from 'react';
import type { Coding } from 'fhir/r4';
import { ArrowLeft, PlusCircle, Trash2 } from 'lucide-react';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../../../../components/ui/dialog';
import { InputControl } from '../../../../components/ui/input-control';
import { SelectControl } from '../../../../components/ui/select-control';
import { CheckboxControl } from '../../../../components/ui/checkbox-control';
import { LoincSearch } from '../../../../components';
import FieldTypeAssist from '../../../../components/FieldTypeAssist/FieldTypeAssist';
import type { ExtendedQuestionnaireItem, IValueSet } from '../../../../services';
import { ANSWER_TYPE_LABELS, buildNewField, isChoiceFieldType, NAMED_FIELD_TYPES, namedFieldType } from './builderFields';

export interface LoincSelection {
    type: 'question' | 'group';
    item: ExtendedQuestionnaireItem;
}

interface Props {
    formTitle: string;
    /** A clinical question is added only with a standard code, so its basics offer no plain Add field. */
    clinical?: boolean;
    /** The group the field joins, when it is added inside one. */
    destination?: string;
    itemControls: IValueSet[];
    onAdd: (field: ExtendedQuestionnaireItem) => void;
    /** `intoDestination` false puts the import at the end of the form, outside every group. */
    onImport: (selection: LoincSelection, intoDestination: boolean) => void;
    onClose: () => void;
}

const typeLabel = (type: string) => ANSWER_TYPE_LABELS[type] ?? type;

const answerLabel = (value: unknown): string => {
    if (!value || typeof value !== 'object') return String(value ?? '');
    const { display, code, score } = value as { display?: string; code?: string; score?: number | string | null };
    const scored = score !== undefined && score !== null && score !== '' ? 'score ' + score : undefined;
    return [display ?? code, display && code ? code : undefined, scored].filter(Boolean).join(' · ');
};

// The imported panel as it will land: groups, each question with its type and required state, and coded answers with any score.
const PanelStructure = ({ item }: { item: ExtendedQuestionnaireItem }) => {
    const children = item.item ?? [];
    const answers = item.type === 'group' ? [] : item.answerOption ?? [];
    const line = item.type === 'group' ? item.text : item.text + ' — ' + typeLabel(item.type) + (item.required ? ', required' : '');
    return (
        <li>
            {line}
            {(children.length > 0 || answers.length > 0) && (
                <ul>
                    {children.map((child) => <PanelStructure key={child.linkId} item={child}/>)}
                    {answers.map((answer, index) => <li key={index}>{answerLabel(answer.value)}</li>)}
                </ul>
            )}
        </li>
    );
};

// One modal for a new field: basics first, then the catalogue when the author chooses manually.
// Nothing reaches the form until Add field or a catalogue import; the X leaves the form as it was.
const AddFieldDialog = ({ formTitle, clinical = false, destination, itemControls, onAdd, onImport, onClose }: Props) => {
    const [step, setStep] = useState<'basics' | 'manual' | 'review'>('basics');
    const [reviewing, setReviewing] = useState<LoincSelection | null>(null);
    const [insertInto, setInsertInto] = useState<'destination' | 'end'>(destination ? 'destination' : 'end');
    const [label, setLabel] = useState('');
    const [fieldTypeKey, setFieldTypeKey] = useState('string');
    const [required, setRequired] = useState(false);
    const [help, setHelp] = useState('');
    const [choices, setChoices] = useState<string[]>(['', '']);
    const [code, setCode] = useState<Coding | undefined>(undefined);
    const [unit, setUnit] = useState<Coding | undefined>(undefined);
    const [assisting, setAssisting] = useState(false);
    const [catalogue, setCatalogue] = useState<'question' | 'panel'>('question');

    const type = namedFieldType(fieldTypeKey)?.type ?? 'string';
    const isQuestion = type !== 'display' && type !== 'group';
    const isChoice = isChoiceFieldType(fieldTypeKey);
    const needsCode = clinical && isQuestion && !code;
    const complete = label.trim() !== '' && !needsCode && (!isChoice || choices.some((choice) => choice.trim() !== ''));

    const add = () => {
        if (!complete) return;
        onAdd(buildNewField({ label, fieldTypeKey, required, help, choices, code, unit }, itemControls));
    };

    return (
        <Dialog open onOpenChange={(open) => { if (!open) onClose(); }}>
            <DialogContent className="ak-dialog max-w-none flex flex-col gap-0 p-0">
                <DialogHeader className="ak-overlay__header border-b border-border">
                    <DialogTitle>{step === 'review' ? 'Review selected LOINC panel' : step === 'manual' ? 'Choose a standard field' : 'Add field'}</DialogTitle>
                    <DialogDescription>
                        {formTitle} &middot; New field{destination ? ` in ${destination}` : ''}
                    </DialogDescription>
                </DialogHeader>

                {step === 'basics' ? (
                    <div className="ak-overlay__body flex flex-col gap-4">
                        <InputControl label="Field label" value={label} onChange={(value) => setLabel(value ?? '')}/>

                        <SelectControl label="Field type" className="w-full"
                                       value={fieldTypeKey}
                                       options={NAMED_FIELD_TYPES.map((named) => ({ label: named.label, value: named.key }))}
                                       onChange={setFieldTypeKey}/>

                        {isChoice && (
                            <fieldset className="flex flex-col gap-3">
                                <legend className="ak-label">Answer choices</legend>
                                {choices.map((choice, index) => (
                                    <div key={index} className="flex items-end gap-2">
                                        <div className="min-w-0 flex-1">
                                            <InputControl label={`Choice ${index + 1}`}
                                                          value={choice}
                                                          onChange={(value) => setChoices((current) => current.map((entry, at) => (at === index ? value ?? '' : entry)))}/>
                                        </div>
                                        {choices.length > 1 && (
                                            <button type="button"
                                                    className="btn btn-red-ghost"
                                                    aria-label={`Remove choice ${index + 1}`}
                                                    onClick={() => setChoices((current) => current.filter((_, at) => at !== index))}>
                                                <Trash2 aria-hidden="true"/>
                                            </button>
                                        )}
                                    </div>
                                ))}
                                <button type="button" className="btn btn-blue-ghost self-start" onClick={() => setChoices((current) => [...current, ''])}>
                                    <PlusCircle aria-hidden="true"/>
                                    Add choice
                                </button>
                            </fieldset>
                        )}

                        {isQuestion && (
                            <CheckboxControl label="Required" checked={required} onChange={setRequired}/>
                        )}

                        {type !== 'display' && (
                            <InputControl label="Help text (optional)"
                                          placeholder="Instructions for the person filling this in"
                                          value={help}
                                          onChange={(value) => setHelp(value ?? '')}/>
                        )}

                        {code && (
                            <div className="flex flex-wrap items-center gap-2">
                                <p className="ak-body">Standard definition: {code.display} &middot; LOINC {code.code}</p>
                                <button type="button" className="btn btn-blue-ghost-sm" onClick={() => { setCode(undefined); setUnit(undefined); }}>
                                    Remove
                                </button>
                            </div>
                        )}

                        {isQuestion && (
                            <div className="ak-notice flex flex-col gap-2">
                                <h3 className="ak-section-title">Find the right standard field</h3>
                                <p className="ak-body">
                                    Get suggestions for the answer format and matching LOINC definition, or choose one
                                    yourself. Nothing is added until you review and confirm.
                                </p>
                                <div className="flex flex-wrap gap-2">
                                    <button type="button" className="btn btn-blue" disabled={label.trim() === ''} onClick={() => setAssisting(true)}>
                                        Get suggestions
                                    </button>
                                    <button type="button" className="btn btn-blue-ghost" onClick={() => setStep('manual')}>
                                        Choose manually
                                    </button>
                                </div>
                            </div>
                        )}

                        <p className="ak-field-help">The X closes this setup without adding the field. Your existing form is unchanged.</p>
                    </div>
                ) : step === 'review' && reviewing ? (
                    <div className="ak-overlay__body flex max-h-[60vh] min-h-0 flex-col gap-4 overflow-y-auto">
                        <p className="ak-notice">{reviewing.item.text} · LOINC {reviewing.item.code?.[0]?.code}</p>
                        <SelectControl label="Insert into"
                                       className="w-full"
                                       value={insertInto}
                                       options={[
                                           ...(destination ? [{ label: `In ${destination}`, value: 'destination' }] : []),
                                           { label: 'Outside all groups · end of form', value: 'end' },
                                       ]}
                                       onChange={(value) => setInsertInto(value === 'destination' ? 'destination' : 'end')}/>
                        <p className="ak-field-help">The panel is added as one group with its questions. Its codes, answer choices and any scores are kept.</p>
                        <ul className="ak-bullets ak-body" aria-label="Panel structure">
                            <PanelStructure item={reviewing.item}/>
                        </ul>
                    </div>
                ) : (
                    <div className="ak-overlay__body flex h-[60vh] min-h-0 flex-col gap-3">
                        <div className="flex gap-2" role="group" aria-label="Search for">
                            <button type="button" className="btn btn-blue-ghost-sm" aria-pressed={catalogue === 'question'} onClick={() => setCatalogue('question')}>
                                A question
                            </button>
                            <button type="button" className="btn btn-blue-ghost-sm" aria-pressed={catalogue === 'panel'} onClick={() => setCatalogue('panel')}>
                                A panel of questions
                            </button>
                        </div>
                        <div className="min-h-0 flex-1">
                            <LoincSearch key={catalogue}
                                         label={catalogue === 'question' ? 'questions' : 'questionnaire panels'}
                                         type={catalogue}
                                         reviewPanels
                                         onSelectItem={(selection: LoincSelection) => {
                                             if (selection.type !== 'group') {
                                                 onImport(selection, true);
                                                 return;
                                             }
                                             setReviewing(selection);
                                             setStep('review');
                                         }}/>
                        </div>
                    </div>
                )}

                {!(step === 'basics' && needsCode) && <DialogFooter className="ak-overlay__footer flex-row">
                    {step === 'review' ? (
                        <>
                            <button type="button" className="btn btn-blue-ghost mr-auto" onClick={() => setStep('manual')}>
                                <ArrowLeft className="size-4" aria-hidden="true"/>
                                Back
                            </button>
                            <button type="button" className="btn btn-blue" disabled={!reviewing} onClick={() => reviewing && onImport(reviewing, insertInto === 'destination')}>
                                Insert panel
                            </button>
                        </>
                    ) : step === 'manual' ? (
                        <button type="button" className="btn btn-blue-ghost mr-auto" onClick={() => setStep('basics')}>
                            <ArrowLeft className="size-4" aria-hidden="true"/>
                            Back
                        </button>
                    ) : (
                        <button type="button" className="btn btn-blue" disabled={!complete} onClick={add}>
                            Add field
                        </button>
                    )}
                </DialogFooter>}
            </DialogContent>

            {assisting && (
                <FieldTypeAssist fieldLabel={label.trim()}
                                 onAccept={(match) => {
                                     // Every list presentation carries an item control, so a list answer takes the first one
                                     // rather than none: otherwise a coded list question stayed Short text.
                                     const suggested = NAMED_FIELD_TYPES.find((named) => named.type === match.answerType && !named.itemControl)
                                         ?? NAMED_FIELD_TYPES.find((named) => named.type === match.answerType);
                                     if (suggested) setFieldTypeKey(suggested.key);
                                     setCode({ system: 'http://loinc.org', code: match.code, display: match.display });
                                     setUnit(match.unit ? { system: 'http://unitsofmeasure.org', code: match.unit, display: match.unit } : undefined);
                                     setAssisting(false);
                                 }}
                                 onClose={() => setAssisting(false)}/>
            )}
        </Dialog>
    );
};

export default AddFieldDialog;