@extends('layouts.app')

@section('title', 'Device Details - ' . $device->name)

@section('content')
<div class="device-detail-container">
    <div class="page-header">
        <div class="header-left">
            <a href="{{ route('devices.index') }}" class="back-link">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <polyline points="15 18 9 12 15 6"/>
                </svg>
                Back to Devices
            </a>
            <h1>{{ $device->name }}</h1>
            <p class="device-id">Device ID: {{ $device->device_id }}</p>
        </div>
        <div class="header-actions">
            <button class="btn-secondary" onclick="copyApiKey()">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                </svg>
                Copy API Key
            </button>
            <button class="btn-danger" onclick="confirmDelete()">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <polyline points="3 6 5 6 21 6"/>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                </svg>
                Delete Device
            </button>
        </div>
    </div>

    <div class="device-info-grid">
        <!-- Status Card -->
        <div class="info-card">
            <div class="card-header">
                <div class="status-badge status-{{ $device->status }}">
                    {{ ucfirst($device->status) }}
                </div>
                <span class="device-type">{{ ucfirst($device->type) }}</span>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <span class="label">Last Heartbeat:</span>
                    <span class="value">{{ $device->last_heartbeat ? $device->last_heartbeat->diffForHumans() : 'Never' }}</span>
                </div>
                <div class="info-row">
                    <span class="label">API Key:</span>
                    {{-- ✅ FIX: Langsung tampilkan dari PHP, bukan realtime --}}
                    <span class="value api-key" id="apiKeyShort">{{ substr($device->api_key, 0, 20) }}...</span>
                </div>
                <div class="info-row">
                    <span class="label">Created:</span>
                    <span class="value">{{ $device->created_at->format('d M Y H:i') }}</span>
                </div>
            </div>
        </div>

        <!-- Connection Guide Card -->
        <div class="info-card connection-guide">
            <div class="card-header">
                <h3>Connection Guide</h3>
            </div>
            <div class="card-body">
                <p>Use this API Key to connect your device:</p>
                <div class="code-block">
                    {{-- ✅ FIX: Langsung isi dari Blade (PHP), tidak perlu fetch API --}}
                    <code id="apiKeyFull">{{ $device->api_key }}</code>
                    <button onclick="copyFullApiKey()" class="copy-btn">Copy</button>
                </div>
                <div class="guide-steps">
                    <h4>Quick Setup:</h4>
                    <ol>
                        <li>Copy the API Key above</li>
                        <li>Configure your device with:</li>
                        <div class="code-block-small">
                            {{-- ✅ FIX: Render JSON config langsung dari Blade --}}
                            <pre id="configJson">{
  "server": "{{ config('app.url') }}",
  "api_key": "{{ $device->api_key }}",
  "device_id": "{{ $device->device_id }}"
}</pre>
                        </div>
                        <li>Your device will appear online automatically</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Data Section -->
    <div class="data-section">
        <div class="section-header">
            <h2>Recent Data</h2>
            <span class="refresh-indicator" id="refreshIndicator">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="spin-icon" id="spinIcon" style="display:none">
                    <polyline points="23 4 23 10 17 10"/>
                    <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
                </svg>
                <span id="lastUpdated">Loading...</span>
            </span>
        </div>
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Type</th>
                        <th>Value</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody id="deviceDataTable">
                    <tr>
                        <td colspan="4" class="text-center loading-row">
                            <div class="loading-dots"><span></span><span></span><span></span></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Commands Section -->
    <div class="commands-section">
        <h2>Send Command to Device</h2>
        <div class="command-form">
            <select id="commandSelect" class="command-select">
                <option value="">Select Command</option>
                <option value="led_on">Turn LED On</option>
                <option value="led_off">Turn LED Off</option>
                <option value="calibrate">Calibrate Sensor</option>
                <option value="status">Get Status</option>
                <option value="restart">Restart Device</option>
            </select>
            <input type="text" id="commandParams" placeholder="Parameters (optional)" class="command-input">
            <button onclick="sendCommand()" class="btn-send">Send Command</button>
        </div>
        <div id="commandResponse" class="command-response"></div>
    </div>
</div>

<script>
const deviceId    = '{{ $device->device_id }}';
const deviceDbId  = '{{ $device->id }}';
// ✅ FIX: API Key sudah tersedia dari PHP, tidak perlu fetch
const fullApiKey  = '{{ $device->api_key }}';

// ── Copy Buttons ────────────────────────────────────────────
function copyApiKey() {
    navigator.clipboard.writeText(fullApiKey)
        .then(() => showToast('API Key copied!'))
        .catch(() => fallbackCopy(fullApiKey));
}

function copyFullApiKey() {
    navigator.clipboard.writeText(fullApiKey)
        .then(() => showToast('API Key copied!'))
        .catch(() => fallbackCopy(fullApiKey));
}

function fallbackCopy(text) {
    const ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
    showToast('API Key copied!');
}

// ── Toast notification ──────────────────────────────────────
function showToast(msg) {
    let toast = document.getElementById('toast');
    if (!toast) {
        toast = document.createElement('div');
        toast.id = 'toast';
        toast.style.cssText = `
            position:fixed;bottom:2rem;right:2rem;background:#1f2937;color:white;
            padding:.75rem 1.25rem;border-radius:8px;font-size:.875rem;
            z-index:9999;opacity:0;transition:opacity .3s;`;
        document.body.appendChild(toast);
    }
    toast.textContent = msg;
    toast.style.opacity = '1';
    setTimeout(() => { toast.style.opacity = '0'; }, 2500);
}

// ── Delete ──────────────────────────────────────────────────
function confirmDelete() {
    if (confirm('Are you sure you want to delete this device?')) {
        fetch('{{ route('devices.destroy', $device) }}', {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        }).then(response => {
            if (response.ok) {
                window.location.href = '{{ route('devices.index') }}';
            } else {
                showToast('Failed to delete device.');
            }
        }).catch(() => showToast('Network error.'));
    }
}

// ── Send Command ────────────────────────────────────────────
function sendCommand() {
    const command = document.getElementById('commandSelect').value;
    if (!command) { showToast('Please select a command'); return; }

    const params      = document.getElementById('commandParams').value;
    const responseDiv = document.getElementById('commandResponse');
    responseDiv.innerHTML = '<div class="loading-msg">Sending command...</div>';

    // Gunakan route yang benar: POST /api/v1/gateway/commands (queue command)
    // deviceDbId dipakai karena route sendCommand butuh DB id, bukan device_id string
    fetch(`/api/v1/devices/${deviceDbId}/command`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ command, params: params ? { value: params } : {} })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            responseDiv.innerHTML = '<div class="success">✓ Command sent successfully!</div>';
        } else {
            responseDiv.innerHTML = `<div class="error">✗ Failed: ${data.message || 'Unknown error'}</div>`;
        }
    })
    .catch(() => {
        responseDiv.innerHTML = '<div class="error">✗ Network error sending command.</div>';
    });
}

// ── Load Recent Data ────────────────────────────────────────
function loadDeviceData() {
    const spinIcon   = document.getElementById('spinIcon');
    const lastUpdated = document.getElementById('lastUpdated');

    if (spinIcon) spinIcon.style.display = 'inline';

    // Gunakan endpoint public history yang tersedia di api.php
    // GET /api/v1/public/earthquakes/history — filter by lokasi jika tersedia
    fetch(`/api/v1/public/earthquakes/history?limit=20`, {
        headers: {
            'Accept': 'application/json'
        }
    })
    .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
    })
    .then(data => {
        const tbody = document.getElementById('deviceDataTable');

        // Response dari SensorDataController@getHistoryPublic:
        // { success: true, data: [...], total: N }
        const recentData = data.data ?? [];

        if (!Array.isArray(recentData) || recentData.length === 0) {
            tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">No data recorded yet</td></tr>';
        } else {
            tbody.innerHTML = '';
            recentData.forEach(item => {
                const row = tbody.insertRow();
                // Kolom: Time | Type | Value | Details
                row.insertCell(0).textContent = item.waktu_kejadian
                    ? new Date(item.waktu_kejadian).toLocaleString('id-ID')
                    : '-';
                row.insertCell(1).textContent = 'gempa';
                row.insertCell(2).textContent = item.intensitas
                    ? item.intensitas.toLocaleString('id-ID') + ' unit'
                    : '-';
                const detailCell = row.insertCell(3);
                detailCell.innerHTML = `
                    <span style="font-size:0.75rem;color:#6b7280;">
                        M${item.magnitude ?? '-'} · ${item.status ?? '-'}
                        ${item.lokasi ? '· ' + item.lokasi : ''}
                    </span>`;
            });
        }

        if (lastUpdated) lastUpdated.textContent = 'Updated ' + new Date().toLocaleTimeString('id-ID');
    })
    .catch(err => {
        console.error('Failed to load device data:', err);
        const tbody = document.getElementById('deviceDataTable');
        tbody.innerHTML = `<tr><td colspan="4" class="text-center text-muted">Failed to load data (${err.message})</td></tr>`;
        if (lastUpdated) lastUpdated.textContent = 'Update failed';
    })
    .finally(() => {
        if (spinIcon) spinIcon.style.display = 'none';
    });
}

function showDetail(dataId) {
    showToast('Detail feature coming soon');
}

// Load data saat halaman dibuka & setiap 10 detik
loadDeviceData();
setInterval(loadDeviceData, 10000);
</script>

<style>
.device-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color .2s;
}
.back-link:hover { color: #dc2626; }

.header-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-secondary, .btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: opacity .2s;
}
.btn-secondary { background: #f3f4f6; color: #374151; }
.btn-danger    { background: #fee2e2; color: #991b1b; }
.btn-secondary:hover, .btn-danger:hover { opacity: .8; }

.device-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.card-header h3 { margin: 0; font-size: 1rem; }

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}
.status-online      { background: #d1fae5; color: #065f46; }
.status-offline     { background: #fee2e2; color: #991b1b; }
.status-pending     { background: #fed7aa; color: #92400e; }
.status-maintenance { background: #e0e7ff; color: #3730a3; }

.device-type { font-size: 0.75rem; color: #6b7280; }

.card-body { padding: 1.5rem; }

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}
.info-row:last-child { border-bottom: none; }

.label { color: #6b7280; font-size: 0.875rem; }
.value { font-weight: 500; font-size: 0.875rem; }
.api-key { font-family: monospace; font-size: 0.8rem; }

.code-block {
    background: #1f2937;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    gap: 1rem;
}
.code-block code {
    color: #e5e7eb;
    font-family: monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

.copy-btn {
    background: #374151;
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    white-space: nowrap;
    transition: background .2s;
}
.copy-btn:hover { background: #4b5563; }

.code-block-small {
    background: #1f2937;
    padding: 0.75rem;
    border-radius: 8px;
    margin: 0.5rem 0;
}
.code-block-small pre {
    color: #e5e7eb;
    font-size: 0.7rem;
    margin: 0;
    white-space: pre-wrap;
}

.guide-steps ol { padding-left: 1.25rem; }
.guide-steps li { margin-bottom: .5rem; color: #374151; font-size: .875rem; }

/* Section headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.refresh-indicator {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: #6b7280;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin-icon { animation: spin 1s linear infinite; }

.data-section, .commands-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.data-section h2, .commands-section h2 {
    font-size: 1.125rem;
    margin: 0 0 1rem;
}

.table-container { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table th {
    padding: 0.625rem 0.75rem;
    text-align: left;
    background: #f9fafb;
    color: #6b7280;
    font-weight: 500;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.data-table td {
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.loading-row { padding: 2rem !important; }
.loading-dots { display: inline-flex; gap: 4px; }
.loading-dots span {
    width: 6px; height: 6px;
    background: #dc2626;
    border-radius: 50%;
    animation: bounce 1.2s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40%           { transform: scale(1); }
}

.text-muted { color: #9ca3af; }

.btn-detail {
    background: #f3f4f6;
    border: none;
    padding: .25rem .6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .75rem;
    transition: background .2s;
}
.btn-detail:hover { background: #e5e7eb; }

.command-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}
.command-select, .command-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: .875rem;
    outline: none;
    transition: border-color .2s;
}
.command-select:focus, .command-input:focus { border-color: #dc2626; }
.command-input { flex: 1; min-width: 150px; }

.btn-send {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
    transition: background .2s;
}
.btn-send:hover { background: #b91c1c; }

.command-response { margin-top: 1rem; }
.command-response > div {
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .875rem;
}
.success     { background: #d1fae5; color: #065f46; }
.error       { background: #fee2e2; color: #991b1b; }
.loading-msg { background: #e0e7ff; color: #3730a3; }

.text-center { text-align: center; }

@media (max-width: 768px) {
    .device-info-grid { grid-template-columns: 1fr; }
    .page-header { flex-direction: column; gap: 1rem; }
    .command-form { flex-direction: column; }
    .command-input { min-width: unset; width: 100%; }
}
</style>
@endsection