@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>
                    <span class="value api-key">{{ 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">
                    <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">
                            <pre>API_KEY = "{{ $device->api_key }}"
SERVER_URL = "{{ url('/api/gateway/data') }}"</pre>
                        </div>
                        <li>Your device will appear online automatically</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Data Section -->
    <div class="data-section">
        <h2>Recent Data</h2>
        <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 data...</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 apiKey = '{{ $device->api_key }}';

function copyApiKey() {
    navigator.clipboard.writeText(apiKey);
    alert('API Key copied!');
}

function copyFullApiKey() {
    const apiKeyFull = document.getElementById('apiKeyFull').innerText;
    navigator.clipboard.writeText(apiKeyFull);
    alert('API Key copied!');
}

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') }}';
            }
        });
    }
}

function sendCommand() {
    const command = document.getElementById('commandSelect').value;
    if (!command) {
        alert('Please select a command');
        return;
    }
    
    const params = document.getElementById('commandParams').value;
    const responseDiv = document.getElementById('commandResponse');
    
    responseDiv.innerHTML = '<div class="loading">Sending command...</div>';
    
    fetch(`/api/devices/${deviceId}/command`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ command: 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 to send command: ' + (data.message || 'Unknown error') + '</div>';
        }
    })
    .catch(error => {
        responseDiv.innerHTML = '<div class="error">Error sending command</div>';
    });
}

function loadDeviceData() {
    fetch(`/api/devices/${deviceId}`, {
        headers: {
            'Authorization': 'Bearer {{ auth()->user()->api_token ?? "" }}'
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.success && data.recent_data) {
            const tbody = document.getElementById('deviceDataTable');
            tbody.innerHTML = '';
            
            if (data.recent_data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4" class="text-center">No data yet</td></tr>';
                return;
            }
            
            data.recent_data.forEach(item => {
                const row = tbody.insertRow();
                row.insertCell(0).textContent = new Date(item.recorded_at).toLocaleString();
                row.insertCell(1).textContent = item.data_type;
                row.insertCell(2).textContent = typeof item.value === 'object' ? JSON.stringify(item.value) : item.value;
                row.insertCell(3).innerHTML = '<button class="btn-detail" onclick="showDetail(\'' + item.id + '\')">View</button>';
            });
        }
    });
}

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

// Load data every 10 seconds
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;
}

.back-link:hover { color: #dc2626; }

.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;
}

.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 {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.card-body { padding: 1.5rem; }

.info-row {
    display: flex;
    justify-content: space-between;
    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; }

.code-block {
    background: #1f2937;
    padding: 0.75rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
}

.code-block code {
    color: #e5e7eb;
    font-family: monospace;
    font-size: 0.75rem;
}

.copy-btn {
    background: #374151;
    color: white;
    border: none;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
}

.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;
}

.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.25rem;
    margin-bottom: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}

.command-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.command-select, .command-input {
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.btn-send {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
}

.command-response {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 8px;
}

.success { background: #d1fae5; color: #065f46; }
.error { background: #fee2e2; color: #991b1b; }
.loading { background: #e0e7ff; color: #3730a3; }

.text-center { text-align: center; }
</style>
@endsection