import { X } from 'lucide-react';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '../ui/select';
import { ORGANIZATION_ROLE_GROUPS } from '../../utils/staffRoleCatalog.ts';
import './NoteVisibilitySelect.css';

// Controlled visibility picker for org-internal patient notes. Emits the client-side
// `{ mode, categoryLabels }` shape only - it never expands categories to wire `roleCodes` itself.
// The consuming component (PatientNotes) calls `expandCategoriesToRoleCodes` at save time.
// `categoryLabels` are `ORGANIZATION_ROLE_GROUPS[].label` values (see `utils/staffRoleCatalog.ts`).
export interface NoteVisibilityValue {
    // '' = nothing chosen yet (shows the placeholder; save is gated on a real choice).
    mode: '' | 'me-only' | 'all-staff' | 'roles';
    // Only meaningful when mode === 'roles'; cleared whenever another mode is chosen.
    categoryLabels: string[];
}

interface NoteVisibilitySelectProps {
    value: NoteVisibilityValue;
    onChange: (value: NoteVisibilityValue) => void;
    disabled?: boolean;
    placeholder?: string;
}

const MODE_OPTIONS: Array<{ value: NoteVisibilityValue['mode']; label: string }> = [
    { value: 'me-only', label: 'Me only' },
    { value: 'all-staff', label: 'All staff' },
    { value: 'roles', label: 'Specific role categories' },
];

const NoteVisibilitySelect = ({
    value,
    onChange,
    disabled = false,
    placeholder,
}: NoteVisibilitySelectProps) => {
    const selectedLabels = value.categoryLabels;

    const handleModeChange = (nextMode: string) => {
        const mode = nextMode as NoteVisibilityValue['mode'];
        onChange({
            mode,
            // "Me only" / "All staff" never carry categories - only "roles" does.
            categoryLabels: mode === 'roles' ? selectedLabels : [],
        });
    };

    const addCategory = (label: string) => {
        if (selectedLabels.includes(label)) return;
        onChange({ mode: 'roles', categoryLabels: [...selectedLabels, label] });
    };

    const removeCategory = (label: string) => {
        onChange({
            mode: 'roles',
            categoryLabels: selectedLabels.filter((selected) => selected !== label),
        });
    };

    // Categories already chosen drop out of the add-picker.
    const availableGroups = ORGANIZATION_ROLE_GROUPS.filter(
        (group) => !selectedLabels.includes(group.label),
    );

    return (
        <div className="ahr-note-visibility-select">
            <Select value={value.mode || undefined} onValueChange={handleModeChange} disabled={disabled}>
                <SelectTrigger
                    className="ahr-note-visibility-select__mode-trigger"
                    aria-label="Who can view this note"
                >
                    <SelectValue placeholder={placeholder ?? "Who can view this note…"} />
                </SelectTrigger>
                <SelectContent>
                    {MODE_OPTIONS.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                            {option.label}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>

            {value.mode === 'roles' && (
                <div className="ahr-note-visibility-select__categories">
                    <Select
                        disabled={disabled || availableGroups.length === 0}
                        value=""
                        onValueChange={addCategory}
                    >
                        <SelectTrigger
                            className="ahr-note-visibility-select__trigger"
                            aria-label="Add role category"
                        >
                            <SelectValue placeholder="Add a role category…" />
                        </SelectTrigger>
                        <SelectContent>
                            {availableGroups.map((group) => (
                                <SelectItem key={group.label} value={group.label}>
                                    {group.label}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>

                    {selectedLabels.length > 0 ? (
                        <div className="ahr-note-visibility-select__chips">
                            {selectedLabels.map((label) => (
                                <span key={label} className="ahr-note-visibility-select__chip">
                                    {label}
                                    <button
                                        type="button"
                                        className="ahr-note-visibility-select__chip-remove"
                                        onClick={() => removeCategory(label)}
                                        disabled={disabled}
                                        aria-label={`Remove ${label}`}
                                    >
                                        <X className="ahr-note-visibility-select__chip-icon" />
                                    </button>
                                </span>
                            ))}
                        </div>
                    ) : (
                        <p className="ahr-note-visibility-select__hint">
                            Select at least one role category so the right staff can see this note.
                        </p>
                    )}
                </div>
            )}
        </div>
    );
};

export default NoteVisibilitySelect;