import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faXmark } from '@fortawesome/pro-duotone-svg-icons';
import { Input } from '@/components/base/input/input';
import { Button } from '@/components/base/buttons/button';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';

type TransferDialogProps = {
    ucid: string;
    onClose: () => void;
    onTransferred: () => void;
};

export const TransferDialog = ({ ucid, onClose, onTransferred }: TransferDialogProps) => {
    const [number, setNumber] = useState('');
    const [transferring, setTransferring] = useState(false);
    const [stage, setStage] = useState<'input' | 'connected'>('input');

    const handleConference = async () => {
        if (!number.trim()) return;
        setTransferring(true);
        try {
            await apiClient.post('/api/ozonetel/call-control', {
                action: 'CONFERENCE',
                ucid,
                conferenceNumber: `0${number.replace(/\D/g, '')}`,
            });
            notify.success('Connected', 'Third party connected. Click Complete to transfer.');
            setStage('connected');
        } catch {
            notify.error('Transfer Failed', 'Could not connect to the target number');
        } finally {
            setTransferring(false);
        }
    };

    const handleComplete = async () => {
        setTransferring(true);
        try {
            await apiClient.post('/api/ozonetel/call-control', {
                action: 'KICK_CALL',
                ucid,
                conferenceNumber: `0${number.replace(/\D/g, '')}`,
            });
            notify.success('Transferred', 'Call transferred successfully');
            onTransferred();
        } catch {
            notify.error('Transfer Failed', 'Could not complete transfer');
        } finally {
            setTransferring(false);
        }
    };

    return (
        <div className="mt-3 rounded-lg border border-secondary bg-secondary p-3">
            <div className="flex items-center justify-between mb-2">
                <span className="text-xs font-semibold text-secondary">Transfer Call</span>
                <button onClick={onClose} className="text-fg-quaternary hover:text-fg-secondary transition duration-100 ease-linear">
                    <FontAwesomeIcon icon={faXmark} className="size-3" />
                </button>
            </div>
            {stage === 'input' ? (
                <div className="flex gap-2">
                    <Input
                        size="sm"
                        placeholder="Enter phone number"
                        value={number}
                        onChange={setNumber}
                    />
                    <Button
                        size="sm"
                        color="primary"
                        isLoading={transferring}
                        onClick={handleConference}
                        isDisabled={!number.trim()}
                    >
                        Connect
                    </Button>
                </div>
            ) : (
                <div className="flex items-center justify-between">
                    <span className="text-xs text-tertiary">Connected to {number}</span>
                    <Button size="sm" color="primary" isLoading={transferring} onClick={handleComplete}>
                        Complete Transfer
                    </Button>
                </div>
            )}
        </div>
    );
};
