import { useState, useEffect, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhoneHangup, faHeadset, faCommentDots, faUsers } from '@fortawesome/pro-duotone-svg-icons';
import { faIcon } from '@/lib/icon-wrapper';
import { Button } from '@/components/base/buttons/button';
import { supervisorSip } from '@/lib/supervisor-sip-client';
import { apiClient } from '@/lib/api-client';
import { notify } from '@/lib/toast';
import { cx } from '@/utils/cx';

const HangupIcon = faIcon(faPhoneHangup);
const HeadsetIcon = faIcon(faHeadset);

type BargeStatus = 'idle' | 'connecting' | 'connected' | 'ended';
type BargeMode = 'listen' | 'whisper' | 'barge';

const MODE_DTMF: Record<BargeMode, string> = { listen: '4', whisper: '5', barge: '6' };

const MODE_CONFIG: Record<BargeMode, {
    label: string;
    description: string;
    icon: any;
    activeClass: string;
}> = {
    listen: {
        label: 'Listen',
        description: 'Silent monitoring — nobody knows you are here',
        icon: faHeadset,
        activeClass: 'border-secondary bg-secondary',
    },
    whisper: {
        label: 'Whisper',
        description: 'Only the agent can hear you',
        icon: faCommentDots,
        activeClass: 'border-brand bg-brand-primary',
    },
    barge: {
        label: 'Barge',
        description: 'Both agent and patient can hear you',
        icon: faUsers,
        activeClass: 'border-error bg-error-primary',
    },
};

type BargeControlsProps = {
    ucid: string;
    agentId: string;
    agentNumber: string;
    agentName: string;
    onDisconnected?: () => void;
};

export const BargeControls = ({ ucid, agentId, agentNumber, agentName, onDisconnected }: BargeControlsProps) => {
    const [status, setStatus] = useState<BargeStatus>('idle');
    const [mode, setMode] = useState<BargeMode>('listen');
    const [duration, setDuration] = useState(0);
    const connectedAtRef = useRef<number | null>(null);

    // Duration counter
    useEffect(() => {
        if (status !== 'connected') return;
        connectedAtRef.current = Date.now();
        const interval = setInterval(() => {
            setDuration(Math.floor((Date.now() - (connectedAtRef.current ?? Date.now())) / 1000));
        }, 1000);
        return () => clearInterval(interval);
    }, [status]);

    // Cleanup on unmount
    useEffect(() => {
        return () => {
            if (supervisorSip.isCallActive()) {
                supervisorSip.close();
                apiClient.post('/api/supervisor/barge/end', { agentId }, { silent: true }).catch(() => {});
            }
        };
    }, [agentId]);

    const handleConnect = async () => {
        setStatus('connecting');
        setMode('listen');
        setDuration(0);

        try {
            const result = await apiClient.post<{
                sipNumber: string;
                sipPassword: string;
                sipDomain: string;
                sipPort: string;
            }>('/api/supervisor/barge', { ucid, agentId, agentNumber });

            supervisorSip.on('registered', () => {
                // Ozonetel will send incoming call after SIP registration
            });

            supervisorSip.on('callConnected', () => {
                setStatus('connected');
                supervisorSip.sendDTMF('4'); // default: listen mode
                notify.success('Connected', `Monitoring ${agentName}'s call`);
            });

            supervisorSip.on('callEnded', () => {
                setStatus('ended');
                apiClient.post('/api/supervisor/barge/end', { agentId }, { silent: true }).catch(() => {});
                onDisconnected?.();
            });

            supervisorSip.on('callFailed', (cause: string) => {
                setStatus('ended');
                notify.error('Connection Failed', cause ?? 'Could not connect to call');
                apiClient.post('/api/supervisor/barge/end', { agentId }, { silent: true }).catch(() => {});
            });

            supervisorSip.on('registrationFailed', (cause: string) => {
                setStatus('ended');
                notify.error('SIP Registration Failed', cause ?? 'Could not register');
            });

            supervisorSip.init({
                domain: result.sipDomain,
                port: result.sipPort,
                number: result.sipNumber,
                password: result.sipPassword,
            });
            supervisorSip.register();
        } catch (err: any) {
            setStatus('idle');
            notify.error('Barge Failed', err.message ?? 'Could not initiate barge');
        }
    };

    const handleModeChange = (newMode: BargeMode) => {
        if (newMode === mode) return;
        supervisorSip.sendDTMF(MODE_DTMF[newMode]);
        setMode(newMode);
        apiClient.post('/api/supervisor/barge/mode', { agentId, mode: newMode }, { silent: true }).catch(() => {});
    };

    const handleHangup = () => {
        supervisorSip.close();
        setStatus('ended');
        apiClient.post('/api/supervisor/barge/end', { agentId }, { silent: true }).catch(() => {});
        onDisconnected?.();
    };

    const formatDuration = (sec: number) => {
        const m = Math.floor(sec / 60);
        const s = sec % 60;
        return `${m}:${s.toString().padStart(2, '0')}`;
    };

    // Idle / ended state
    if (status === 'idle' || status === 'ended') {
        return (
            <div className="flex flex-col items-center gap-3 py-6">
                <FontAwesomeIcon icon={faHeadset} className="size-8 text-fg-quaternary" />
                <p className="text-sm text-secondary">{status === 'ended' ? 'Session ended' : 'Ready to monitor'}</p>
                <Button size="sm" color="primary" iconLeading={HeadsetIcon} onClick={handleConnect}>
                    {status === 'ended' ? 'Reconnect' : 'Connect'}
                </Button>
            </div>
        );
    }

    // Connecting state
    if (status === 'connecting') {
        return (
            <div className="flex flex-col items-center gap-3 py-6">
                <div className="flex items-center gap-2">
                    <span className="size-2 animate-pulse rounded-full bg-warning-solid" />
                    <span className="text-sm font-medium text-warning-primary">Connecting...</span>
                </div>
                <p className="text-xs text-tertiary">Registering SIP and joining call</p>
            </div>
        );
    }

    // Connected state
    return (
        <div className="flex flex-col gap-3">
            {/* Status bar */}
            <div className="flex items-center justify-between rounded-lg bg-success-primary px-3 py-2">
                <div className="flex items-center gap-2">
                    <span className="size-2 rounded-full bg-success-solid" />
                    <span className="text-xs font-semibold text-success-primary">Connected</span>
                </div>
                <span className="font-mono text-xs text-success-primary">{formatDuration(duration)}</span>
            </div>

            {/* Mode tabs */}
            <div className="flex gap-1">
                {(['listen', 'whisper', 'barge'] as BargeMode[]).map((m) => {
                    const config = MODE_CONFIG[m];
                    const isActive = mode === m;
                    return (
                        <button
                            key={m}
                            onClick={() => handleModeChange(m)}
                            className={cx(
                                'flex flex-1 flex-col items-center gap-1 rounded-lg border-2 px-2 py-2.5 text-center transition duration-100 ease-linear',
                                isActive ? config.activeClass : 'border-secondary hover:bg-primary_hover',
                            )}
                        >
                            <FontAwesomeIcon
                                icon={config.icon}
                                className={cx('size-4', isActive ? 'text-fg-primary' : 'text-fg-quaternary')}
                            />
                            <span className={cx('text-xs font-semibold', isActive ? 'text-primary' : 'text-tertiary')}>
                                {config.label}
                            </span>
                        </button>
                    );
                })}
            </div>

            {/* Mode description */}
            <p className="text-center text-xs text-tertiary">{MODE_CONFIG[mode].description}</p>

            {/* Hang up */}
            <Button size="sm" color="primary-destructive" iconLeading={HangupIcon} onClick={handleHangup} className="w-full">
                Hang Up
            </Button>
        </div>
    );
};