@extends('layouts.admin')

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

@section('content')
<div class="admin-device-detail">
    <div class="page-header">
        <div>
            <a href="{{ route('admin.devices.index') }}" class="back-link">← Back to Devices</a>
            <h1>{{ $device->name }}</h1>
            <p class="device-id">Device ID: {{ $device->device_id }}</p>
        </div>
        <div class="actions">
            <a href="{{ route('admin.devices.edit', $device) }}" class="btn-secondary">Edit Device</a>
            <button onclick="regenerateApiKey()" class="btn-warning">Regenerate API Key</button>
            <button onclick="deleteDevice()" class="btn-danger">Delete Device</button>
        </div>
    </div>

    <!-- Device Information -->
    <div class="info-grid">
        <div class="info-card">
            <h3>Device Information</h3>
            <div class="info-row">
                <span class="label">Status:</span>
                <select id="deviceStatus" onchange="updateStatus()" class="status-select">
                    <option value="online" {{ $device->status == 'online' ? 'selected' : '' }}>Online</option>
                    <option value="offline" {{ $device->status == 'offline' ? 'selected' : '' }}>Offline</option>
                    <option value="pending" {{ $device->status == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="maintenance" {{ $device->status == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                </select>
            </div>
            <div class="info-row">
                <span class="label">Type:</span>
                <span>{{ ucfirst($device->type) }}</span>
            </div>
            <div class="info-row">
                <span class="label">Owner:</span>
                <span>{{ $device->user->name ?? 'N/A' }} ({{ $device->user->email ?? 'N/A' }})</span>
            </div>
            <div class="info-row">
                <span class="label">API Key:</span>
                <code class="api-key" id="adminApiKey" data-realtime-url="/api/v1/devices/{{ $device->id }}" data-realtime-key="data.api_key" data-realtime-interval="15000">Loading...</code>
            </div>
            <div class="info-row">
                <span class="label">Firmware:</span>
                <span>{{ $device->firmware_version ?? '1.0.0' }}</span>
            </div>
            <div class="info-row">
                <span class="label">Created:</span>
                <span>{{ $device->created_at->format('d M Y H:i:s') }}</span>
            </div>
            <div class="info-row">
                <span class="label">Last Heartbeat:</span>
                <span>{{ $device->last_heartbeat ? $device->last_heartbeat->format('d M Y H:i:s') : 'Never' }}</span>
            </div>
        </div>

        <div class="stats-card">
            <h3>Device Statistics</h3>
            <div class="stat-item">
                <span class="stat-label">Total Readings:</span>
                <span class="stat-value" data-realtime-url="/api/v1/devices/{{ $device->id }}/statistics" data-realtime-key="data.total_data">Loading...</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Last 24 Hours:</span>
                <span class="stat-value" data-realtime-url="/api/v1/devices/{{ $device->id }}/statistics" data-realtime-key="data.last_24h">Loading...</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Avg Intensity:</span>
                <span class="stat-value" data-realtime-url="/api/v1/devices/{{ $device->id }}/statistics" data-realtime-key="data.avg_value">Loading...</span>
            </div>
        </div>
    </div>

    <!-- Capabilities -->
    @if($device->capabilities)
    <div class="capabilities-card">
        <h3>Capabilities</h3>
        <div class="capabilities-list">
            @foreach($device->capabilities as $cap)
                <span class="capability-badge">{{ ucfirst($cap) }}</span>
            @endforeach
        </div>
    </div>
    @endif

    <!-- Recent Data -->
    <div class="data-card">
        <h3>Recent Data (Last 50 readings)</h3>
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Recorded At</th>
                        <th>Data Type</th>
                        <th>Value</th>
                        <th>Raw Data</th>
                    </tr>
                </thead>
                <tbody 
    data-realtime-url="/api/v1/devices/{{ $device->id }}/data"
    @verbatim
    data-realtime-template="<tr>
        <td>{{ recorded_at }}</td>
        <td><span class='type-badge'>{{ data_type }}</span></td>
        <td>{{ value }}</td>
        <td><button class='btn-detail' onclick='showRawData({{ id }})'>View Raw</button></td>
    </tr>"
    @endverbatim
>
                    <tr><td colspan="4" class="text-center">Loading...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function regenerateApiKey() {
    if (confirm('Regenerating API key will disconnect all active connections. Continue?')) {
        fetch('{{ route('admin.devices.regenerate-key', $device) }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        }).then(response => response.json())
          .then(data => {
              if (data.success) {
                  alert('New API Key: ' + data.api_key);
                  window.location.reload();
              }
          });
    }
}

function updateStatus() {
    const newStatus = document.getElementById('deviceStatus').value;
    fetch('{{ route('admin.devices.update-status', $device) }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ status: newStatus })
    }).then(response => response.json())
      .then(data => {
          if (data.success) {
              alert('Status updated to ' + data.status);
          }
      });
}

function deleteDevice() {
    if (confirm('Are you sure you want to delete this device? This action cannot be undone.')) {
        fetch('{{ route('admin.devices.destroy', $device) }}', {
            method: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).then(response => {
            if (response.ok) {
                window.location.href = '{{ route('admin.devices.index') }}';
            }
        });
    }
}
</script>

<style>
.admin-device-detail { max-width: 1200px; margin: 0 auto; padding: 2rem; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.info-card, .stats-card, .capabilities-card, .data-card {
    background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem;
}
.info-card h3, .stats-card h3, .capabilities-card h3, .data-card h3 {
    font-size: 1rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #dc2626; display: inline-block;
}
.info-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #f3f4f6; }
.stat-item { display: flex; justify-content: space-between; padding: 0.5rem 0; }
.stat-value { font-weight: 700; color: #dc2626; }
.capabilities-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.capability-badge { background: #fef2f2; color: #dc2626; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; }
.type-badge { background: #e0e7ff; color: #3730a3; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem; }
.value-preview { font-size: 0.7rem; background: #f9fafb; padding: 0.25rem; border-radius: 4px; max-width: 200px; overflow-x: auto; }
</style>
@endsection