@extends('layouts.webphone')

@push('style')
<style>
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
html body .wp-standalone-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background: #0f172a;
}
.wallboard-shell {
    height: 100vh;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1.25fr) minmax(0, .9fr) auto;
    gap: 14px;
    padding: 18px;
    color: #e2e8f0;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 28%), #0f172a;
}
.wallboard-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.18), transparent 30%), #0f172a;
}
.wallboard-login-card,
.wallboard-panel,
.wallboard-kpi,
.wallboard-stat {
    background: #1e293b;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.35);
}
.wallboard-login-card {
    width: min(460px, 100%);
    border-radius: 20px;
    padding: 28px;
}
.wallboard-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.wallboard-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.wallboard-brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
    color: #fff;
    font-weight: 800;
    font-size: 20px;
}
.wallboard-brand-title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.wallboard-brand-subtitle,
.wallboard-muted,
.wallboard-table td,
.wallboard-agent-meta,
.wallboard-ticker-meta,
.wallboard-footer {
    color: #94a3b8;
}
.wallboard-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.wallboard-kpi {
    border-radius: 18px;
    padding: 18px 20px;
}
.wallboard-kpi-label {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .08em;
    color: #94a3b8;
    margin-bottom: 10px;
}
.wallboard-kpi-value {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
    font-weight: 800;
    color: #f8fafc;
}
.wallboard-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, .95fr);
    gap: 14px;
}
.wallboard-panel {
    border-radius: 18px;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wallboard-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.wallboard-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
}
.wallboard-panel-body {
    min-height: 0;
    flex: 1;
    padding: 14px 18px 18px;
    overflow: auto;
}
.wallboard-table {
    width: 100%;
    border-collapse: collapse;
}
.wallboard-table th,
.wallboard-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    white-space: nowrap;
}
.wallboard-table th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
}
.wallboard-table td {
    font-size: .98rem;
    color: #e2e8f0;
}
.wallboard-alert {
    color: #fca5a5 !important;
    font-weight: 700;
}
.wallboard-alert-flash {
    animation: wallboardFlash 1.1s ease-in-out infinite;
}
.wallboard-warning {
    color: #facc15 !important;
    font-weight: 700;
}
.wallboard-success {
    color: #4ade80 !important;
    font-weight: 700;
}
.wallboard-agent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.wallboard-agent-card {
    border-radius: 16px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.14);
    padding: 14px;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.wallboard-agent-name {
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
}
.wallboard-agent-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}
.wallboard-status-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    display: inline-block;
}
.wallboard-status-available { color: #4ade80; }
.wallboard-status-available .wallboard-status-dot { background: #22c55e; }
.wallboard-status-busy { color: #f87171; }
.wallboard-status-busy .wallboard-status-dot { background: #ef4444; }
.wallboard-status-wrap { color: #facc15; }
.wallboard-status-wrap .wallboard-status-dot { background: #eab308; }
.wallboard-status-offline { color: #94a3b8; }
.wallboard-status-offline .wallboard-status-dot { background: #64748b; }
.wallboard-ticker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wallboard-ticker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.12);
}
.wallboard-ticker-text {
    font-size: 1rem;
    color: #f8fafc;
}
.wallboard-stats-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.wallboard-stat {
    border-radius: 18px;
    padding: 16px 18px;
}
.wallboard-stat-label {
    color: #94a3b8;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.wallboard-stat-value {
    color: #f8fafc;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}
.wallboard-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wallboard-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
}
.wallboard-debug {
    color: #facc15;
    font-size: .8rem;
}
@keyframes wallboardFlash {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(248, 113, 113, 0); }
    50% { opacity: .4; box-shadow: 0 0 18px rgba(248, 113, 113, 0.45); }
}
@media (max-width: 1200px) {
    .wallboard-kpi-row,
    .wallboard-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .wallboard-grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endpush

@section('content')
@if (!$authenticated)
    @php($brand = $wallboardConfig['branding'] ?? [])
    <div class="wallboard-login-shell">
        <div class="wallboard-login-card">
            <div class="wallboard-brand mb-4">
                @if (!empty($brand['logo_url']))
                    <img src="{{ $brand['logo_url'] }}" alt="Logo" class="wallboard-logo">
                @else
                    <div class="wallboard-brand-mark">{{ $brand['brand_mark'] ?? 'WB' }}</div>
                @endif
                <div>
                    <div class="wallboard-brand-title">{{ $brand['brand_name'] ?? 'Call Center Wallboard' }}</div>
                    <div class="wallboard-brand-subtitle">{{ $brand['brand_subtitle'] ?? 'Standalone display login for live call center metrics.' }}</div>
                </div>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('wallboard.authenticate') }}">
                @csrf
                <div class="mb-3">
                    <label class="form-label text-light">Username</label>
                    <input type="text" class="form-control" name="username" value="{{ old('username') }}" placeholder="wallboard">
                </div>
                <div class="mb-3">
                    <label class="form-label text-light">Password</label>
                    <input type="password" class="form-control" name="password" required>
                </div>
                <button type="submit" class="btn btn-primary w-100">Open Wallboard</button>
            </form>
        </div>
    </div>
@else
    @php($brand = $wallboardConfig['branding'] ?? [])
    @php($display = $wallboardConfig['display'] ?? [])
    <div class="wallboard-shell" id="wallboardApp" data-live-url="{{ route('wallboard.live') }}" data-stream-url="{{ route('wallboard.stream') }}" data-manage-url="{{ route('wallboard.manage') }}" data-auto-fullscreen="{{ !empty($display['auto_fullscreen']) ? '1' : '0' }}" data-tv-rotation-seconds="{{ $display['tv_rotation_seconds'] ?? 20 }}" data-idle-reload-seconds="{{ $display['idle_reload_seconds'] ?? 900 }}" data-waiting-threshold="{{ $display['waiting_alert_threshold'] ?? 5 }}" data-wait-threshold="{{ $display['wait_alert_seconds'] ?? 60 }}">
        <div class="wallboard-topbar">
            <div class="wallboard-brand">
                @if (!empty($brand['logo_url']))
                    <img src="{{ $brand['logo_url'] }}" alt="Logo" class="wallboard-logo">
                @else
                    <div class="wallboard-brand-mark">{{ $brand['brand_mark'] ?? 'CC' }}</div>
                @endif
                <div>
                    <div class="wallboard-brand-title">{{ $brand['brand_name'] ?? 'Call Center Wallboard' }}</div>
                    <div class="wallboard-brand-subtitle">{{ $brand['brand_subtitle'] ?? 'Enterprise live visibility for queues, agents, and activity.' }}</div>
                </div>
            </div>
            <div class="wallboard-toolbar">
                <div class="badge bg-dark-subtle text-light border" id="wallboardTimestamp">Live</div>
                <a href="{{ route('wallboard.manage') }}" class="btn btn-outline-light btn-sm">Manage</a>
                <button type="button" class="btn btn-outline-light btn-sm" id="wallboardFullscreenButton">Fullscreen</button>
                <form method="POST" action="{{ route('wallboard.logout') }}">
                    @csrf
                    <button type="submit" class="btn btn-outline-light btn-sm">Logout</button>
                </form>
            </div>
        </div>

        <div class="wallboard-kpi-row" id="wallboardOverviewRow"></div>

        <div class="wallboard-grid">
            <section class="wallboard-panel">
                <div class="wallboard-panel-header">
                    <div class="wallboard-panel-title">Queue Performance</div>
                    <div class="wallboard-muted small">Live queue metrics</div>
                </div>
                <div class="wallboard-panel-body p-0">
                    <div class="table-responsive">
                        <table class="wallboard-table mb-0">
                            <thead>
                                <tr>
                                    <th>Queue</th>
                                    <th>Waiting</th>
                                    <th>Longest</th>
                                    <th>Agents In</th>
                                    <th>Available</th>
                                    <th>Answered</th>
                                    <th>Missed</th>
                                </tr>
                            </thead>
                            <tbody id="wallboardQueueTable"></tbody>
                        </table>
                    </div>
                </div>
            </section>

            <section class="wallboard-panel">
                <div class="wallboard-panel-header">
                    <div class="wallboard-panel-title">Live Call Activity</div>
                    <div class="wallboard-muted small">Queue waits and connected calls</div>
                </div>
                <div class="wallboard-panel-body">
                    <div class="wallboard-ticker-list" id="wallboardTicker"></div>
                </div>
            </section>
        </div>

        <div class="wallboard-grid">
            <section class="wallboard-panel">
                <div class="wallboard-panel-header">
                    <div class="wallboard-panel-title">Agent Status</div>
                    <div class="wallboard-muted small">Available, busy, wrap-up, and offline</div>
                </div>
                <div class="wallboard-panel-body">
                    <div class="wallboard-agent-grid" id="wallboardAgentGrid"></div>
                </div>
            </section>

            <section class="wallboard-panel">
                <div class="wallboard-panel-header">
                    <div class="wallboard-panel-title">Daily Stats</div>
                    <div class="wallboard-muted small">Today so far</div>
                </div>
                <div class="wallboard-panel-body">
                    <div class="wallboard-stats-row" id="wallboardDailyStats"></div>
                </div>
            </section>
        </div>

        <div class="wallboard-footer d-flex justify-content-between align-items-center">
            <div>Designed as a fullscreen wallboard for office TV display.</div>
            <div id="wallboardAmiState">AMI status</div>
        </div>
    </div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const app = document.getElementById('wallboardApp');
    if (!app) {
        return;
    }

    const overviewRow = document.getElementById('wallboardOverviewRow');
    const queueTable = document.getElementById('wallboardQueueTable');
    const agentGrid = document.getElementById('wallboardAgentGrid');
    const ticker = document.getElementById('wallboardTicker');
    const dailyStats = document.getElementById('wallboardDailyStats');
    const timestamp = document.getElementById('wallboardTimestamp');
    const amiState = document.getElementById('wallboardAmiState');
    const liveUrl = app.dataset.liveUrl;
    const streamUrl = app.dataset.streamUrl;
    const fullscreenButton = document.getElementById('wallboardFullscreenButton');
    const initialSnapshot = {!! json_encode($initialSnapshot, JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP|JSON_INVALID_UTF8_SUBSTITUTE) ?: 'null' !!};
    const waitingThreshold = Number(app.dataset.waitingThreshold || 5);
    const waitThreshold = Number(app.dataset.waitThreshold || 60);
    const autoFullscreen = app.dataset.autoFullscreen === '1';
    const idleReloadSeconds = Number(app.dataset.idleReloadSeconds || 900);
    let idleReloadTimer = null;
    let stream = null;

    const escapeHtml = (value) => String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');

    const resetIdleTimer = () => {
        if (idleReloadTimer) {
            window.clearTimeout(idleReloadTimer);
        }
        idleReloadTimer = window.setTimeout(() => window.location.reload(), idleReloadSeconds * 1000);
    };

    const requestFullscreen = async () => {
        try {
            if (!document.fullscreenElement) {
                await document.documentElement.requestFullscreen();
            }
        } catch (error) {
        }
    };

    const setUiError = (message, level = 'warning') => {
        amiState.textContent = message;
        amiState.className = level === 'alert' ? 'wallboard-alert' : (level === 'success' ? 'wallboard-success' : 'wallboard-debug');
    };

    const renderOverview = (overview) => {
        const items = [
            { label: 'Active Calls', value: overview.active_calls ?? 0 },
            { label: 'Calls Waiting', value: overview.calls_waiting ?? 0 },
            { label: 'Agents Available', value: overview.agents_available ?? 0 },
            { label: 'Agents Busy', value: overview.agents_busy ?? 0 },
            { label: 'SLA %', value: `${overview.sla_percent ?? 0}%` },
        ];

        overviewRow.innerHTML = items.map((item) => `
            <div class="wallboard-kpi">
                <div class="wallboard-kpi-label">${escapeHtml(item.label)}</div>
                <div class="wallboard-kpi-value">${escapeHtml(item.value)}</div>
            </div>
        `).join('');
    };

    const renderQueues = (queues) => {
        if (!queues.length) {
            queueTable.innerHTML = '<tr><td colspan="7" class="text-center py-4 wallboard-muted">No queues available.</td></tr>';
            return;
        }

        queueTable.innerHTML = queues.map((queue) => {
            const waitingClass = (queue.waiting ?? 0) >= waitingThreshold ? 'wallboard-alert wallboard-alert-flash' : ((queue.waiting ?? 0) > 0 ? 'wallboard-warning' : 'wallboard-success');
            const longestClass = (queue.longest_wait_seconds ?? 0) >= waitThreshold ? 'wallboard-alert wallboard-alert-flash' : ((queue.longest_wait_seconds ?? 0) > 20 ? 'wallboard-warning' : '');
            return `
                <tr>
                    <td>${escapeHtml(queue.name)}</td>
                    <td class="${waitingClass}">${escapeHtml(queue.waiting ?? 0)}</td>
                    <td class="${longestClass}">${escapeHtml(queue.longest_wait ?? '00:00')}</td>
                    <td>${escapeHtml(queue.agents_logged_in ?? 0)}</td>
                    <td>${escapeHtml(queue.agents_available ?? 0)}</td>
                    <td>${escapeHtml(queue.answered_today ?? 0)}</td>
                    <td>${escapeHtml(queue.missed_today ?? 0)}</td>
                </tr>
            `;
        }).join('');
    };

    const renderAgents = (agents) => {
        if (!agents.length) {
            agentGrid.innerHTML = '<div class="wallboard-muted">No agents available.</div>';
            return;
        }

        agentGrid.innerHTML = agents.map((agent) => `
            <div class="wallboard-agent-card">
                <div>
                    <div class="wallboard-agent-name">${escapeHtml(agent.name)}</div>
                    <div class="wallboard-agent-meta">${escapeHtml(agent.extension || 'No extension')}</div>
                </div>
                <div class="wallboard-agent-status wallboard-status-${escapeHtml(agent.status || 'offline')}">
                    <span class="wallboard-status-dot"></span>
                    <span>${escapeHtml(agent.status_label || 'Offline')}</span>
                </div>
                <div class="wallboard-agent-meta">${escapeHtml(agent.call_duration || agent.reason || agent.queue || '')}</div>
            </div>
        `).join('');
    };

    const renderTicker = (items) => {
        if (!items.length) {
            ticker.innerHTML = '<div class="wallboard-muted">No live activity right now.</div>';
            return;
        }

        ticker.innerHTML = items.map((item) => {
            const severityClass = item.severity === 'alert' ? 'wallboard-alert' : (item.severity === 'warning' ? 'wallboard-warning' : '');
            return `
                <div class="wallboard-ticker-item">
                    <div class="wallboard-ticker-text ${severityClass}">${escapeHtml(item.text)}</div>
                    <div class="wallboard-ticker-meta">${escapeHtml(item.meta || '')}</div>
                </div>
            `;
        }).join('');
    };

    const renderDailyStats = (stats) => {
        const items = [
            { label: 'Total Calls', value: stats.total_calls ?? 0 },
            { label: 'Answered', value: stats.answered ?? 0 },
            { label: 'Missed', value: stats.missed ?? 0 },
            { label: 'Avg Wait', value: stats.avg_wait_time ?? '00:00' },
            { label: 'Avg Talk', value: stats.avg_talk_time ?? '00:00' },
        ];

        dailyStats.innerHTML = items.map((item) => `
            <div class="wallboard-stat">
                <div class="wallboard-stat-label">${escapeHtml(item.label)}</div>
                <div class="wallboard-stat-value">${escapeHtml(item.value)}</div>
            </div>
        `).join('');
    };

    const renderSnapshot = (snapshot) => {
        renderOverview(snapshot.overview || {});
        renderQueues(snapshot.queues || []);
        renderAgents(snapshot.agents || []);
        renderTicker(snapshot.live_activity || []);
        renderDailyStats(snapshot.daily_stats || {});
        timestamp.textContent = snapshot.generated_at ? new Date(snapshot.generated_at).toLocaleTimeString() : 'Live';
        amiState.textContent = snapshot.ami_connected ? 'AMI connected' : 'AMI unavailable';
        amiState.className = snapshot.ami_connected ? 'wallboard-success' : 'wallboard-alert';
        resetIdleTimer();
    };

    const connectStream = () => {
        if (!window.EventSource || !streamUrl) {
            return false;
        }

        try {
            if (stream) {
                stream.close();
            }

            stream = new EventSource(streamUrl);
            stream.addEventListener('snapshot', (event) => {
                try {
                    renderSnapshot(JSON.parse(event.data));
                } catch (error) {
                    setUiError('Snapshot parse failed', 'warning');
                }
            });
            stream.onerror = () => {
                setUiError('Stream reconnecting', 'warning');
                if (stream) {
                    stream.close();
                }
                window.setTimeout(connectStream, 2500);
            };

            return true;
        } catch (error) {
            setUiError('Stream unavailable, using polling', 'warning');
            return false;
        }
    };

    const refreshSnapshot = async () => {
        try {
            const response = await fetch(liveUrl, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                credentials: 'same-origin',
            });

            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }

            const payload = await response.json();
            renderSnapshot(payload);
        } catch (error) {
            amiState.textContent = 'Live refresh failed';
            amiState.className = 'wallboard-alert';
        }
    };

    try {
        renderSnapshot(initialSnapshot || {});
    } catch (error) {
        setUiError('Initial wallboard render failed', 'alert');
    }

    try {
        if (!connectStream()) {
            setInterval(refreshSnapshot, 5000);
        }
    } catch (error) {
        setUiError('Live stream setup failed, using polling', 'warning');
        setInterval(refreshSnapshot, 5000);
    }

    if (fullscreenButton) {
        fullscreenButton.addEventListener('click', requestFullscreen);
    }

    ['mousemove', 'keydown', 'click', 'touchstart'].forEach((eventName) => {
        document.addEventListener(eventName, resetIdleTimer, { passive: true });
    });

    if (autoFullscreen) {
        window.setTimeout(requestFullscreen, 600);
    }

    resetIdleTimer();
});
</script>
@endpush