import type { FC } from 'react';
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhone } from '@fortawesome/pro-duotone-svg-icons';
import { useSetAtom } from 'jotai';

const Phone01: FC<{ className?: string } & Record<string, any>> = ({ className, ...rest }) => <FontAwesomeIcon icon={faPhone} className={className} {...rest} />;
import { Button } from '@/components/base/buttons/button';
import { useSip } from '@/providers/sip-provider';
import { sipCallStateAtom, sipCallerNumberAtom, sipCallUcidAtom } from '@/state/sip-state';
import { setOutboundPending } from '@/state/sip-manager';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';

interface ClickToCallButtonProps {
    phoneNumber: string;
    leadId?: string;
    label?: string;
    size?: 'sm' | 'md';
}

export const ClickToCallButton = ({ phoneNumber, label, size = 'sm' }: ClickToCallButtonProps) => {
    const { isRegistered, isInCall } = useSip();
    const [dialing, setDialing] = useState(false);
    const setCallState = useSetAtom(sipCallStateAtom);
    const setCallerNumber = useSetAtom(sipCallerNumberAtom);
    const setCallUcid = useSetAtom(sipCallUcidAtom);

    const handleDial = async () => {
        setDialing(true);

        // Show call UI immediately
        setCallState('ringing-out');
        setCallerNumber(phoneNumber);
        setOutboundPending(true);
        // Safety: reset flag if SIP INVITE doesn't arrive within 30s
        const safetyTimer = setTimeout(() => setOutboundPending(false), 30000);

        try {
            const result = await apiClient.post<{ ucid?: string; status?: string }>('/api/ozonetel/dial', { phoneNumber });
            if (result?.ucid) {
                setCallUcid(result.ucid);
            }
        } catch {
            clearTimeout(safetyTimer);
            setCallState('idle');
            setCallerNumber(null);
            setOutboundPending(false);
            setCallUcid(null);
            notify.error('Dial Failed', 'Could not place the call');
        } finally {
            setDialing(false);
        }
    };

    return (
        <Button
            size={size}
            color="primary"
            iconLeading={Phone01}
            onClick={handleDial}
            isDisabled={!isRegistered || isInCall || !phoneNumber || dialing}
            isLoading={dialing}
        >
            {label ?? 'Call'}
        </Button>
    );
};
