@extends('dashboard.layouts.app')

@section('content')
    <div class="container-fluid app-bg">
        <div class="page-shell">
            <x-page-title title="Softphone" description="Make and receive SIP calls from the HR dashboard.">
                <form method="GET" action="{{ route('softphone.index') }}" class="softphone-extension-form">
                    <select name="ext" class="form-select" onchange="this.form.submit()">
                        @foreach ($accounts as $account)
                            <option value="{{ $account['extension'] }}" @selected($selectedExtension === $account['extension'])>
                                Ext {{ $account['extension'] }} - {{ $account['display_name'] ?? $account['extension'] }}
                            </option>
                        @endforeach
                    </select>
                </form>
            </x-page-title>

            <audio id="remoteStream" autoplay playsinline style="display:none;"></audio>

            <div class="softphone-wrap">
                <div class="softphone-shell">
                    <div class="softphone-header">
                        <div>
                            <div class="softphone-title">Ext {{ $bootstrap['extension'] }}</div>
                            <div class="softphone-subtitle">{{ $bootstrap['displayName'] }}</div>
                        </div>

                        <span class="softphone-pill">
                            <span class="softphone-pill-dot" id="spStatusDot"></span>
                            <span id="spStatusText">Offline</span>
                        </span>
                    </div>

                    <div class="softphone-body">
                        <div class="softphone-actions">
                            <button type="button" id="spConnectBtn" class="softphone-btn softphone-btn--connect">Connect</button>
                            <button type="button" id="spDisconnectBtn" class="softphone-btn softphone-btn--disconnect">Disconnect</button>
                        </div>

                        <div class="softphone-display-row">
                            <button type="button" id="spBackspaceBtn" class="softphone-icon-btn" title="Backspace">
                                <iconify-icon icon="mdi:backspace-outline"></iconify-icon>
                            </button>
                            <input type="text" id="spNumber" class="softphone-number-input" placeholder="Enter number" autocomplete="off" inputmode="tel">
                            <button type="button" id="spDialBtn" class="softphone-icon-btn" title="Dial">
                                <iconify-icon icon="mdi:phone-outline"></iconify-icon>
                            </button>
                        </div>

                        <div class="softphone-stats">
                            <div class="softphone-stat">
                                <span>Duration</span>
                                <strong id="spCallDuration">00:00</strong>
                            </div>
                            <div class="softphone-stat">
                                <span>Status</span>
                                <strong id="spCallStatus">Idle</strong>
                            </div>
                        </div>

                        <div class="softphone-dialpad">
                            @foreach ([['1', ''], ['2', 'ABC'], ['3', 'DEF'], ['4', 'GHI'], ['5', 'JKL'], ['6', 'MNO'], ['7', 'PQRS'], ['8', 'TUV'], ['9', 'WXYZ'], ['*', ''], ['0', ''], ['#', '']] as [$key, $letters])
                                <button type="button" class="softphone-key" data-key="{{ $key }}">
                                    {{ $key }}
                                    @if ($letters)
                                        <small>{{ $letters }}</small>
                                    @endif
                                </button>
                            @endforeach
                        </div>

                        <div class="softphone-call-actions">
                            <button type="button" id="spAnswerBtn" class="softphone-btn softphone-btn--call">Call / Answer</button>
                            <button type="button" id="spHangupBtn" class="softphone-btn softphone-btn--hangup">Hangup</button>
                        </div>

                        <div class="softphone-actions softphone-secondary-actions">
                            <button type="button" id="spMuteBtn" class="softphone-btn softphone-btn--neutral">Mute</button>
                            <button type="button" id="spHoldBtn" class="softphone-btn softphone-btn--neutral">Hold</button>
                        </div>

                        <div id="spDebugBox" class="softphone-debug">
                            <div class="softphone-debug-ok">Ready.</div>
                        </div>
                    </div>
                </div>

                <div class="softphone-panel">
                    <div class="softphone-panel-title">Connection</div>
                    <div class="softphone-meta">
                        <span>SIP Domain</span>
                        <strong>{{ $bootstrap['sipDomain'] }}</strong>
                    </div>
                    <div class="softphone-meta">
                        <span>WSS</span>
                        <strong>{{ $bootstrap['wssUrl'] }}</strong>
                    </div>
                    <div class="softphone-meta">
                        <span>Auth User</span>
                        <strong>{{ $bootstrap['authUser'] }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .softphone-extension-form { min-width: min(100%, 260px); }
        .softphone-wrap { display: grid; grid-template-columns: minmax(320px, 420px) minmax(280px, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
        .softphone-shell, .softphone-panel { border: 1px solid #e5e7eb; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); overflow: hidden; }
        .softphone-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid #eef2f7; }
        .softphone-title { font-size: 1.1rem; font-weight: 800; color: #111827; }
        .softphone-subtitle { color: #64748b; font-size: 0.85rem; }
        .softphone-pill { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid #e5e7eb; color: #334155; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
        .softphone-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; }
        .softphone-body, .softphone-panel { padding: 1rem; }
        .softphone-actions, .softphone-call-actions, .softphone-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
        .softphone-display-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 0.65rem; margin-top: 0.75rem; }
        .softphone-number-input { width: 100%; min-width: 0; height: 46px; border: 1px solid #dbe2ea; border-radius: 12px; text-align: center; font-size: 1.15rem; font-weight: 700; color: #111827; }
        .softphone-icon-btn, .softphone-btn, .softphone-key { border: 0; border-radius: 12px; min-height: 42px; font-weight: 800; transition: 0.18s ease; }
        .softphone-icon-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #dbe2ea; background: #f8fafc; color: #111827; font-size: 1.25rem; }
        .softphone-btn:hover, .softphone-icon-btn:hover, .softphone-key:hover { transform: translateY(-1px); }
        .softphone-btn { color: #fff; }
        .softphone-btn--connect { background: #2563eb; }
        .softphone-btn--disconnect, .softphone-btn--neutral { background: #475569; }
        .softphone-btn--call { background: #16a34a; }
        .softphone-btn--hangup { background: #dc2626; }
        .softphone-stats, .softphone-call-actions, .softphone-secondary-actions { margin-top: 0.75rem; }
        .softphone-stat { border: 1px solid #e5e7eb; border-radius: 12px; padding: 0.75rem; background: #f8fafc; }
        .softphone-stat span, .softphone-meta span { display: block; color: #64748b; font-size: 0.75rem; font-weight: 700; }
        .softphone-stat strong, .softphone-meta strong { display: block; color: #111827; font-size: 0.95rem; overflow-wrap: anywhere; }
        .softphone-dialpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.75rem; }
        .softphone-key { height: 58px; border: 1px solid #dbe2ea; background: #fff; color: #111827; font-size: 1.15rem; }
        .softphone-key small { display: block; color: #64748b; font-size: 0.62rem; line-height: 1; }
        .softphone-debug { margin-top: 0.75rem; max-height: 130px; overflow: auto; border-radius: 12px; background: #0f172a; color: #cbd5e1; padding: 0.75rem; font-size: 0.75rem; white-space: pre-wrap; }
        .softphone-debug-ok { color: #86efac; }
        .softphone-debug-err { color: #fca5a5; }
        .softphone-panel-title { color: #111827; font-weight: 800; margin-bottom: 0.75rem; }
        .softphone-meta + .softphone-meta { margin-top: 0.85rem; }
        @media (max-width: 900px) { .softphone-wrap { grid-template-columns: 1fr; } }
    </style>
@endpush

@push('scripts')
    <script src="{{ asset('assets/softphone/jssip-3.10.0.js') }}"></script>
    <script>
        window.__SOFTPHONE_BOOTSTRAP__ = @json($bootstrap);
    </script>
    <script>
        (function() {
            var cfg = window.__SOFTPHONE_BOOTSTRAP__;
            var sp = {
                ua: null, session: null, uaStarted: false, isConnecting: false, isMuted: false, isOnHold: false,
                callTimer: null, callStartTs: null, manualDisconnect: false, reconnectTimer: null,
                log: function(msg, isErr) {
                    var box = document.getElementById('spDebugBox');
                    var line = document.createElement('div');
                    line.className = isErr ? 'softphone-debug-err' : 'softphone-debug-ok';
                    line.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
                    box.appendChild(line);
                    box.scrollTop = box.scrollHeight;
                },
                setState: function(label, dotColor) {
                    document.getElementById('spStatusText').textContent = label;
                    document.getElementById('spStatusDot').style.background = dotColor;
                },
                setCallStatus: function(label) {
                    document.getElementById('spCallStatus').textContent = label;
                },
                updateDuration: function(secs) {
                    var m = Math.floor(secs / 60), s = secs % 60;
                    document.getElementById('spCallDuration').textContent = (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
                },
                startTimer: function() {
                    var self = this;
                    this.callStartTs = Date.now();
                    this.updateDuration(0);
                    if (this.callTimer) clearInterval(this.callTimer);
                    this.callTimer = setInterval(function() {
                        self.updateDuration(Math.floor((Date.now() - self.callStartTs) / 1000));
                    }, 1000);
                },
                stopTimer: function() {
                    if (this.callTimer) clearInterval(this.callTimer);
                    this.callTimer = null;
                    this.updateDuration(0);
                },
                hasCreds: function() {
                    var login = String(cfg.extension || cfg.authUser || '').trim();
                    var hasAuth = (cfg.password && cfg.password.length > 0) || (cfg.ha1 && cfg.realm && cfg.ha1.length > 0 && cfg.realm.length > 0);
                    return login.length > 0 && hasAuth && cfg.sipDomain.length > 0 && cfg.wssUrl.length > 0;
                },
                connect: function(silent, force) {
                    var self = this;
                    if (this.isConnecting && !force) return;
                    if (!this.hasCreds()) {
                        this.log('Missing SIP credentials in config.', true);
                        if (!silent) alert('SIP account is not fully configured.');
                        return;
                    }
                    if (!window.JsSIP || !JsSIP.UA || !JsSIP.WebSocketInterface) {
                        this.log('JsSIP failed to load.', true);
                        return;
                    }
                    if (this.ua && !force) {
                        this.setState('Online', '#22c55e');
                        return;
                    }
                    if (this.ua) {
                        try { this.ua.stop(); } catch (e) {}
                        this.ua = null;
                    }
                    this.isConnecting = true;
                    this.manualDisconnect = false;
                    this.setState('Connecting', '#f59e0b');
                    var socket = new JsSIP.WebSocketInterface(cfg.wssUrl);
                    var configuration = {
                        sockets: [socket],
                        uri: 'sip:' + cfg.authUser + '@' + cfg.sipDomain,
                        display_name: cfg.displayName || cfg.extension,
                        session_timers: false,
                        registrar_server: 'sip:' + cfg.sipDomain,
                        register: true,
                        authorization_user: cfg.authUser,
                        connection_recovery_enabled: true,
                        connection_recovery_min_interval: 2,
                        connection_recovery_max_interval: 30
                    };
                    if (cfg.ha1 && cfg.realm) {
                        configuration.ha1 = cfg.ha1;
                        configuration.realm = cfg.realm;
                    } else {
                        configuration.password = cfg.password;
                    }
                    this.log('WSS: ' + cfg.wssUrl);
                    this.log('URI: ' + configuration.uri);
                    this.ua = new JsSIP.UA(configuration);
                    this.ua.on('connecting', function() { self.setState('Connecting', '#f59e0b'); });
                    this.ua.on('registered', function() {
                        self.isConnecting = false;
                        self.uaStarted = true;
                        self.setState('Online', '#22c55e');
                        self.log('Registered.');
                    });
                    this.ua.on('unregistered', function() {
                        self.setState('Offline', '#94a3b8');
                        self.log('Unregistered.');
                    });
                    this.ua.on('registrationFailed', function(e) {
                        self.isConnecting = false;
                        self.setState('Offline', '#ef4444');
                        self.log('Registration failed: ' + (e && e.cause), true);
                    });
                    this.ua.on('disconnected', function() {
                        self.uaStarted = false;
                        self.setState('Offline', '#94a3b8');
                        if (!self.manualDisconnect && cfg.autoConnect) {
                            self.reconnectTimer = setTimeout(function() { self.connect(true, true); }, 3000);
                        }
                    });
                    this.ua.on('newRTCSession', function(e) { self.handleSession(e); });
                    this.ua.start();
                },
                disconnect: function() {
                    this.manualDisconnect = true;
                    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
                    if (this.session) {
                        try { this.session.terminate(); } catch (e) {}
                    }
                    if (this.ua) {
                        try { this.ua.stop(); } catch (e) {}
                    }
                    this.ua = null;
                    this.setState('Offline', '#94a3b8');
                },
                handleSession: function(e) {
                    var self = this;
                    var session = e.session;
                    this.session = session;
                    this.isMuted = false;
                    this.isOnHold = false;
                    this.setCallStatus(session.direction === 'incoming' ? 'Incoming' : 'Calling');
                    session.on('accepted', function() { self.setCallStatus('Live'); self.startTimer(); });
                    session.on('confirmed', function() { self.setCallStatus('Live'); self.startTimer(); });
                    session.on('ended', function() { self.setCallStatus('Ended'); self.stopTimer(); self.session = null; });
                    session.on('failed', function(d) {
                        self.setCallStatus('Failed');
                        self.stopTimer();
                        self.session = null;
                        self.log('Call failed: ' + (d && d.cause), true);
                    });
                    try {
                        if (session.connection) {
                            session.connection.addEventListener('track', function(ev) {
                                if (ev.streams && ev.streams[0]) {
                                    var el = document.getElementById('remoteStream');
                                    el.srcObject = ev.streams[0];
                                    el.play().catch(function() {});
                                }
                            });
                        }
                    } catch (err) {}
                },
                dial: function(number) {
                    number = String(number || '').trim();
                    if (!number) {
                        alert('Enter a number.');
                        return;
                    }
                    if (!this.ua || !this.uaStarted) {
                        alert('Not registered yet.');
                        return;
                    }
                    this.session = this.ua.call('sip:' + number + '@' + cfg.sipDomain, {
                        mediaConstraints: { audio: true, video: false }
                    });
                    this.setCallStatus('Ringing');
                },
                answer: function() {
                    if (this.session && this.session.answer) {
                        this.session.answer({ mediaConstraints: { audio: true, video: false } });
                    }
                },
                hangup: function() {
                    if (this.session) {
                        try {
                            if (this.session.terminate) this.session.terminate();
                        } catch (e) {}
                    }
                    this.stopTimer();
                    this.setCallStatus('Ended');
                },
                toggleMute: function() {
                    var pc = this.session && this.session.connection ? this.session.connection : null;
                    if (!pc || !pc.getSenders) return;
                    pc.getSenders().forEach(function(sender) {
                        if (sender.track && sender.track.kind === 'audio') {
                            sender.track.enabled = !sender.track.enabled;
                        }
                    });
                    this.isMuted = !this.isMuted;
                    this.setCallStatus(this.isMuted ? 'Muted' : 'Live');
                },
                toggleHold: function() {
                    if (!this.session) return;
                    if (!this.isOnHold && this.session.hold) {
                        this.session.hold();
                        this.isOnHold = true;
                        this.setCallStatus('On Hold');
                    } else if (this.isOnHold && this.session.unhold) {
                        this.session.unhold();
                        this.isOnHold = false;
                        this.setCallStatus('Live');
                    }
                }
            };
            document.getElementById('spConnectBtn').addEventListener('click', function() { sp.connect(); });
            document.getElementById('spDisconnectBtn').addEventListener('click', function() { sp.disconnect(); });
            document.getElementById('spDialBtn').addEventListener('click', function() { sp.dial(document.getElementById('spNumber').value); });
            document.getElementById('spAnswerBtn').addEventListener('click', function() {
                if (sp.session) sp.answer();
                else sp.dial(document.getElementById('spNumber').value);
            });
            document.getElementById('spHangupBtn').addEventListener('click', function() { sp.hangup(); });
            document.getElementById('spMuteBtn').addEventListener('click', function() { sp.toggleMute(); });
            document.getElementById('spHoldBtn').addEventListener('click', function() { sp.toggleHold(); });
            document.getElementById('spBackspaceBtn').addEventListener('click', function() {
                var input = document.getElementById('spNumber');
                input.value = input.value.slice(0, -1);
            });
            document.querySelectorAll('.softphone-key').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    document.getElementById('spNumber').value += btn.getAttribute('data-key');
                });
            });
            if (cfg.autoConnect) {
                setTimeout(function() { sp.connect(true); }, 300);
            }
        })();
    </script>
@endpush