import type { Questionnaire } from 'fhir/r4';
import { ArrowDown, ArrowUp, Trash2 } from 'lucide-react';
import { Label } from '../../../../components/ui/label';
import { EmptyState } from '../../../../components/ui/empty-state';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../components/ui/select';
import { addableQuestionnaires, memberStanding, moveMember } from '../../../../utils/questionnairePacketDraft';

interface PacketMembersProps {
    members: string[];
    questionnaires: Questionnaire[];
    /** Titles the packet was saved with, for a member no longer in the library. */
    savedTitles: Record<string, string | undefined>;
    onChange: (members: string[]) => void;
    onPreview: (questionnaire: Questionnaire) => void;
}

const STANDING_NOTE = { draft: 'Draft questionnaire', retired: 'Retired questionnaire', missing: 'No longer in your library' } as const;

// The ordered member list: every move is a button, so the order can be set from a keyboard or a phone.
const PacketMembers = ({ members, questionnaires, savedTitles, onChange, onPreview }: PacketMembersProps) => {
    const addable = addableQuestionnaires(questionnaires, members);
    const find = (id: string) => questionnaires.find((questionnaire) => questionnaire.id === id);

    return (
        <div className="flex flex-col gap-2">
            <Label id="packet-members-label">Questionnaires, in the order patients see them</Label>
            {members.length === 0 ? (
                <EmptyState size="compact" title="No questionnaires added yet." />
            ) : (
                <ol className="ak-card-list m-0 list-none p-0" aria-labelledby="packet-members-label">
                    {members.map((id, index) => {
                        const standing = memberStanding(questionnaires, id);
                        const inLibrary = find(id);
                        const title = inLibrary?.title || savedTitles[id] || 'Untitled questionnaire';
                        return (
                            <li key={id} className="ak-card flex flex-col gap-2 sm:flex-row sm:items-center">
                                <div className="min-w-0 flex-1">
                                    <span className="ak-card__title">{index + 1}. {title}</span>
                                    {standing !== 'active' && <p className="ak-card__meta">{STANDING_NOTE[standing]}</p>}
                                </div>
                                <div className="flex flex-wrap items-center gap-1">
                                    {inLibrary && (
                                        <button type="button" className="btn btn-blue-ghost-sm"
                                                aria-label={`Preview ${title}`}
                                                onClick={() => onPreview(inLibrary)}>
                                            Preview
                                        </button>
                                    )}
                                    <button type="button" className="btn btn-blue-ghost-sm"
                                            aria-label={`Move ${title} up`}
                                            disabled={index === 0}
                                            onClick={() => onChange(moveMember(members, index, -1))}>
                                        <ArrowUp aria-hidden="true"/>
                                    </button>
                                    <button type="button" className="btn btn-blue-ghost-sm"
                                            aria-label={`Move ${title} down`}
                                            disabled={index === members.length - 1}
                                            onClick={() => onChange(moveMember(members, index, 1))}>
                                        <ArrowDown aria-hidden="true"/>
                                    </button>
                                    <button type="button" className="btn btn-red-ghost-sm"
                                            onClick={() => onChange(members.filter((member) => member !== id))}>
                                        <Trash2 aria-hidden="true"/>
                                        Remove <span className="sr-only">{title}</span>
                                    </button>
                                </div>
                            </li>
                        );
                    })}
                </ol>
            )}
            {addable.length > 0 ? (
                <Select value="" onValueChange={(id) => onChange([...members, id])}>
                    <SelectTrigger aria-label="Add questionnaire" className="sm:max-w-sm">
                        <SelectValue placeholder="Add questionnaire"/>
                    </SelectTrigger>
                    <SelectContent>
                        {addable.map((questionnaire) => (
                            <SelectItem key={questionnaire.id} value={questionnaire.id as string}>
                                {(questionnaire.title || 'Untitled questionnaire') + (questionnaire.status === 'draft' ? ' (draft)' : '')}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
            ) : (
                <p className="ak-field-help">
                    {questionnaires.length === 0
                        ? 'Create a clinical questionnaire first; packets are built from them.'
                        : 'Every available clinical questionnaire is already in this packet.'}
                </p>
            )}
        </div>
    );
};

export default PacketMembers;