import { useMemo, useState } from 'react';
import { TextControl } from "../../../components/ui/text-control";
import { Modal } from '../../../components/ui/wp-modal-shim';
import { HealthcareService } from 'fhir/r4';
import { Stethoscope } from 'lucide-react';

// Full, searchable list of the org's services in a modal (replaces the old heavy "View all" services page,
// which still carried location/availability/contact fields we retired in the consolidation work).
interface ServicesListModalProps {
    services: HealthcareService[];
    onSelect: (service: HealthcareService) => void;
    onRequestClose: () => void;
}

// Don't fire the filter until the 3rd character is typed.
const MIN_FILTER_CHARS = 3;

const ServicesListModal = ({ services, onSelect, onRequestClose }: ServicesListModalProps) => {
    const [query, setQuery] = useState('');

    const filtered = useMemo(() => {
        const trimmed = query.trim().toLowerCase();
        if (trimmed.length < MIN_FILTER_CHARS) return services;
        return services.filter((service) => (service.name ?? '').toLowerCase().includes(trimmed));
    }, [services, query]);

    return (
        <Modal title="Services" onRequestClose={onRequestClose} size="medium">
            <TextControl
                label="Search services"
                placeholder="Type at least 3 characters — e.g. “con” for Consultation"
                value={query}
                onChange={setQuery}
            />

            <div className="mt-4 max-h-96 overflow-y-auto rounded-md border">
                {filtered.length === 0 ? (
                    <div className="p-6 text-center text-sm text-muted-foreground">
                        {services.length === 0 ? 'No services added yet.' : 'No services match your search.'}
                    </div>
                ) : (
                    filtered.map((service) => (
                        <button
                            key={service.id || service.name}
                            type="button"
                            className="flex w-full items-center gap-3 border-b px-4 py-3 text-left last:border-b-0 hover:bg-muted"
                            onClick={() => onSelect(service)}
                        >
                            <div className="rounded-lg bg-muted p-2">
                                <Stethoscope className="h-5 w-5" />
                            </div>
                            <span className="min-w-0 flex-1 truncate text-sm font-semibold">
                                {service.name?.trim() || 'Unnamed service'}
                            </span>
                            <span
                                className={`shrink-0 rounded-full px-2 py-0.5 text-xs ${
                                    service.active === false
                                        ? 'bg-gray-100 text-gray-700'
                                        : 'bg-green-50 text-green-700'
                                }`}
                            >
                                {service.active === false ? 'Inactive' : 'Active'}
                            </span>
                        </button>
                    ))
                )}
            </div>
        </Modal>
    );
};

export default ServicesListModal;