import { isRecordChanged } from '../../../../utils/recordChanged';
import { useState } from 'react';
import { Building2, Stethoscope } from 'lucide-react';
import { SheetDescription, SheetHeader, SheetTitle } from '../../../../components/ui/sheet.tsx';
import { Button } from '../../../../components/ui/button.tsx';
import { Input } from '../../../../components/ui/input.tsx';
import { Label } from '../../../../components/ui/label.tsx';
import {
    OutsideProviderEntry,
    OutsideProviderKind
} from '../../../../utils/outsideProviders.ts';

interface OutsideProviderFormProps {
    entry?: OutsideProviderEntry;
    saving: boolean;
    onSave: (entry: Omit<OutsideProviderEntry, 'localId'>, localId?: string) => Promise<void>;
    onDone: () => void;
}

const OutsideProviderForm = ({ entry, saving, onSave, onDone }: OutsideProviderFormProps) => {
    const [kind, setKind] = useState<OutsideProviderKind>(entry?.kind ?? 'practitioner');
    const [name, setName] = useState<string>(entry?.name ?? '');
    const [specialty, setSpecialty] = useState<string>(entry?.specialty ?? '');
    const [phone, setPhone] = useState<string>(entry?.phone ?? '');
    const [city, setCity] = useState<string>(entry?.city ?? '');
    const [formError, setFormError] = useState<string | undefined>();

    const handleSave = async () => {
        if (!name.trim()) {
            setFormError('Name is required.');
            return;
        }

        setFormError(undefined);
        try {
            await onSave(
                {
                    kind,
                    name: name.trim(),
                    ...(specialty.trim() && { specialty: specialty.trim() }),
                    ...(phone.trim() && { phone: phone.trim() }),
                    ...(city.trim() && { city: city.trim() })
                },
                entry?.localId
            );
            onDone();
        } catch (err) {
            const message = err instanceof Error ? err.message : String(err);
            if (isRecordChanged(err)) {
                setFormError(message);
            } else if (message.includes('403') || /forbidden|not authorized/i.test(message)) {
                setFormError("Your account can't save this yet — please contact support.");
            } else {
                setFormError('Failed to save. Please try again.');
            }
        }
    };

    return (
        <div className="p-4 space-y-4">
            <SheetHeader className="text-secondary p-0">
                <SheetTitle className="text-secondary text-base font-normal">
                    {entry ? 'Edit Outside Provider' : 'Add Outside Provider'}
                </SheetTitle>
            </SheetHeader>
            <SheetDescription className="space-y-4">
                <div className="space-y-1">
                    <Label>Type</Label>
                    <div className="flex gap-2">
                        <Button
                            type="button"
                            variant={kind === 'practitioner' ? 'default' : 'outline'}
                            onClick={() => setKind('practitioner')}
                        >
                            <Stethoscope />
                            Practitioner
                        </Button>
                        <Button
                            type="button"
                            variant={kind === 'organization' ? 'default' : 'outline'}
                            onClick={() => setKind('organization')}
                        >
                            <Building2 />
                            Organization
                        </Button>
                    </div>
                </div>
                <div className="space-y-1">
                    <Label htmlFor="outside-provider-name">Name *</Label>
                    <Input
                        id="outside-provider-name"
                        value={name}
                        placeholder={kind === 'practitioner' ? 'Dr. Jane Smith' : 'Riverside Physical Therapy'}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value)}
                    />
                </div>
                <div className="space-y-1">
                    <Label htmlFor="outside-provider-specialty">Specialty / role</Label>
                    <Input
                        id="outside-provider-specialty"
                        value={specialty}
                        placeholder={kind === 'practitioner' ? 'Cardiologist' : 'Physical therapy clinic'}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSpecialty(e.target.value)}
                    />
                </div>
                <div className="space-y-1">
                    <Label htmlFor="outside-provider-phone">Phone</Label>
                    <Input
                        id="outside-provider-phone"
                        value={phone}
                        placeholder="(555) 123-4567"
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPhone(e.target.value)}
                    />
                </div>
                <div className="space-y-1">
                    <Label htmlFor="outside-provider-city">City</Label>
                    <Input
                        id="outside-provider-city"
                        value={city}
                        placeholder="Austin"
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCity(e.target.value)}
                    />
                </div>
                {formError && (
                    <p className="text-sm text-destructive" role="alert">{formError}</p>
                )}
                <div className="flex justify-end gap-2 pt-2">
                    <Button type="button" variant="outline" onClick={onDone} disabled={saving}>
                        Cancel
                    </Button>
                    <Button type="button" onClick={handleSave} disabled={saving}>
                        {saving ? 'Saving…' : 'Save'}
                    </Button>
                </div>
            </SheetDescription>
        </div>
    );
};

export default OutsideProviderForm;