import { isRecordChanged } from '../../../../utils/recordChanged';
import { useState } from 'react';
import { Building2, Edit, MapPin, Phone, Plus, Stethoscope, Trash2, Users } from 'lucide-react';
import { useFhirOutsideProviders } from '../../../../hooks';
import type { OutsideProvidersOpening } from '../../../../hooks/useFhirOutsideProviders';
import { useAuthServiceContext } from '../../../../services';
import { OutsideProviderEntry } from '../../../../utils/outsideProviders.ts';
import { Sheet, SheetContent } from '../../../../components/ui/sheet.tsx';
import { Button } from '../../../../components/ui/button.tsx';
import { Skeleton } from '../../../../components/ui/skeleton.tsx';
import OutsideProviderForm from './OutsideProviderForm.tsx';

const OutsideProviders = () => {
    const { userRole, USER_ROLES } = useAuthServiceContext();
    const { loading, saving, error, entries, openEditor, saveEntry, removeEntry } = useFhirOutsideProviders();
    const [isFormOpen, setIsFormOpen] = useState<boolean>(false);
    const [editingEntry, setEditingEntry] = useState<OutsideProviderEntry | undefined>();
    // The team version and lifetime the open form was started on; its save is refused against any other.
    const [opening, setOpening] = useState<OutsideProvidersOpening | undefined>();
    const [removeError, setRemoveError] = useState<string | undefined>();

    const canEdit = !!userRole &&
        [USER_ROLES.PATIENT, USER_ROLES.RELATED_PERSON].includes(userRole as string);

    const openAdd = () => {
        setRemoveError(undefined);
        setEditingEntry(undefined);
        setOpening(openEditor());
        setIsFormOpen(true);
    };

    const openEdit = (entry: OutsideProviderEntry) => {
        setRemoveError(undefined);
        setEditingEntry(entry);
        setOpening(openEditor());
        setIsFormOpen(true);
    };

    const handleRemove = async (entry: OutsideProviderEntry) => {
        setRemoveError(undefined);
        try {
            await removeEntry(entry.localId);
        } catch (err) {
            const message = err instanceof Error ? err.message : String(err);
            setRemoveError(isRecordChanged(err) ? message : message.includes('403') || /forbidden|not authorized/i.test(message)
                ? "Your account can't save this yet — please contact support."
                : 'Failed to remove. Please try again.');
        }
    };

    return (
        <div>
            <div className="flex justify-between items-center">
                <div className="mb-2 lg:mb-0 sm:mb-0">
                    <h2 className="font-bold text-xl">Outside Providers</h2>
                    <p className="text-sm">
                        Doctors, clinics, or pharmacies you use outside Akashic.
                    </p>
                </div>
                <div className="flex justify-end text-end">
                    {canEdit && (
                        <Button onClick={openAdd} disabled={saving}>
                            <Plus />
                            Add
                        </Button>
                    )}
                </div>
            </div>

            {error ? (
                <div className="flex flex-col items-center font-normal justify-center p-8 text-center space-y-5 pt-[100px]">
                    <Users strokeWidth={1} size={50} className="mx-auto mb-5" />
                    <div>
                        <h3 className="text-lg font-semibold mb-3">
                            Could not load Outside Providers
                        </h3>
                        <p className="text-muted-foreground">Try again later.</p>
                    </div>
                    <Button
                        className="cursor-pointer bg-primary rounded p-2 text-white hover:bg-primary/80 px-4"
                        onClick={() => window.location.reload()}
                    >
                        Retry
                    </Button>
                </div>
            ) : loading ? (
                <div className="space-y-2 mt-3">
                    {[...Array(3)].map((_, index) => (
                        <div key={index} className="space-y-2 rounded p-2 animate-pulse">
                            <Skeleton className="h-5 w-1/2 rounded" />
                            <Skeleton className="h-4 w-3/4 rounded" />
                        </div>
                    ))}
                </div>
            ) : entries.length === 0 ? (
                <div className="p-4 items-center justify-center text-center space-y-4 m-auto pt-[100px]">
                    <Users strokeWidth={1} size={50} className="mx-auto mb-5" />
                    <p className="text-lg font-bold">No outside providers yet</p>
                    <p>
                        List doctors, clinics, or pharmacies you use outside Akashic so
                        your care team has the full picture.
                    </p>
                    {canEdit && (
                        <Button onClick={openAdd}>
                            <Plus />
                            Add your first provider
                        </Button>
                    )}
                </div>
            ) : (
                <div className="space-y-2 mt-3">
                    {removeError && (
                        <p className="text-sm text-destructive" role="alert">{removeError}</p>
                    )}
                    {entries.map(entry => (
                        <div
                            className="flex gap-2 justify-between items-center rounded p-2 hover:bg-muted"
                            key={entry.localId}
                        >
                            <div className="flex gap-3 items-center">
                                {entry.kind === 'practitioner'
                                    ? <Stethoscope size={20} strokeWidth={1.5} />
                                    : <Building2 size={20} strokeWidth={1.5} />}
                                <div className="space-y-1">
                                    <p className="font-bold">{entry.name}</p>
                                    <div className="flex gap-3 items-center text-sm text-secondary">
                                        {entry.specialty && <span>{entry.specialty}</span>}
                                        {entry.phone && (
                                            <span className="flex items-center gap-1">
                                                <Phone size={13} /> {entry.phone}
                                            </span>
                                        )}
                                        {entry.city && (
                                            <span className="flex items-center gap-1">
                                                <MapPin size={13} /> {entry.city}
                                            </span>
                                        )}
                                    </div>
                                </div>
                            </div>
                            {canEdit && (
                                <div className="flex gap-2">
                                    <Button
                                        variant="outline"
                                        disabled={saving}
                                        onClick={() => openEdit(entry)}
                                    >
                                        <Edit />
                                        Edit
                                    </Button>
                                    <Button
                                        variant="outline"
                                        disabled={saving}
                                        onClick={() => handleRemove(entry)}
                                    >
                                        <Trash2 />
                                        Remove
                                    </Button>
                                </div>
                            )}
                        </div>
                    ))}
                </div>
            )}

            <Sheet
                open={isFormOpen}
                onOpenChange={(open: boolean) => {
                    if (!open && !saving) setIsFormOpen(false);
                }}
            >
                <SheetContent className="sm:max-w-[500px] sm:min-w-[500px]">
                    {isFormOpen && (
                        <OutsideProviderForm
                            entry={editingEntry}
                            saving={saving}
                            onSave={(entry, localId) => saveEntry(entry, localId, opening)}
                            onDone={() => setIsFormOpen(false)}
                        />
                    )}
                </SheetContent>
            </Sheet>
        </div>
    );
};

export default OutsideProviders;