@extends('layouts.app')

@php
    $pageTitle = 'Device Errors';
    $pageHeading = 'Device Bug Notices';
    $pageDescription = 'Notifikasi otomatis ketika endpoint device (/iclock/*) mengalami error 500 agar mudah ditindaklanjuti saat development.';
@endphp

@section('content')
    <section class="hero">
        <h3 style="margin: 0 0 10px; font-size: 22px;">Bug notice untuk integrasi device.</h3>
        <p style="margin: 0; color: var(--muted); line-height: 1.7;">
            Halaman ini menampilkan error 500 yang terjadi saat device memanggil endpoint <code>/iclock/*</code>.
            Tujuannya supaya kamu cepat tahu ada BUG program ketika ada firmware yang kirim payload berbeda dari asumsi.
        </p>
    </section>

    @if (session('status'))
        <section class="hero" style="border-color: rgba(45, 106, 79, 0.24); background: rgba(45, 106, 79, 0.08);">
            <strong style="display: block; color: var(--green-deep); margin-bottom: 6px;">Info</strong>
            <div>{{ session('status') }}</div>
        </section>
    @endif

    @if ($errors->any())
        <section class="hero" style="border-color: rgba(180, 35, 24, 0.2); background: rgba(180, 35, 24, 0.06);">
            <strong style="display: block; color: var(--red); margin-bottom: 8px;">Ada error</strong>
            <ul style="margin: 0; padding-left: 18px; color: var(--ink);">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </section>
    @endif

    <section class="table-card">
        <h3 style="margin-top:0;">Pengaturan Bug Notice & Raw Logs</h3>
        <div class="muted" style="margin-top:6px; line-height: 1.7;">
            Supaya hemat storage, kamu bisa matikan pencatatan raw log ke <code>storage/logs/*raw-*.txt</code> dan/atau matikan Bug Notice.
        </div>

        <div style="display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px;">
            <form method="POST" action="{{ route('device-errors.settings') }}" style="padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.62);">
                @csrf
                <div style="display:grid; gap:10px;">
                    <label style="display:flex; gap:10px; align-items:flex-start; cursor:pointer;">
                        <input type="checkbox" name="bug_notice_enabled" value="1" style="margin-top: 3px;" @checked(!empty($featureFlags['bug_notice_enabled']))>
                        <div>
                            <div style="font-weight:800;">Bug Notice Enabled</div>
                            <div class="muted" style="margin-top:4px; font-size: 13px;">Simpan notifikasi error 500 endpoint <code>/iclock/*</code> ke tabel <code>device_error_notices</code>.</div>
                        </div>
                    </label>
                    <label style="display:flex; gap:10px; align-items:flex-start; cursor:pointer;">
                        <input type="checkbox" name="raw_log_cdata_enabled" value="1" style="margin-top: 3px;" @checked(!empty($featureFlags['raw_log_cdata_enabled']))>
                        <div>
                            <div style="font-weight:800;">Raw Log CDATA Enabled</div>
                            <div class="muted" style="margin-top:4px; font-size: 13px;">Tulis <code>cdata-raw-YYYY-MM-DD.txt</code> (OPERLOG/USERINFO/FP/OPTIONS).</div>
                        </div>
                    </label>
                    <label style="display:flex; gap:10px; align-items:flex-start; cursor:pointer;">
                        <input type="checkbox" name="raw_log_devicecmd_enabled" value="1" style="margin-top: 3px;" @checked(!empty($featureFlags['raw_log_devicecmd_enabled']))>
                        <div>
                            <div style="font-weight:800;">Raw Log DEVICECMD Enabled</div>
                            <div class="muted" style="margin-top:4px; font-size: 13px;">Tulis <code>devicecmd-raw-YYYY-MM-DD.txt</code> (ACK Return).</div>
                        </div>
                    </label>
                    <label style="display:flex; gap:10px; align-items:flex-start; cursor:pointer;">
                        <input type="checkbox" name="raw_log_operlog_enabled" value="1" style="margin-top: 3px;" @checked(!empty($featureFlags['raw_log_operlog_enabled']))>
                        <div>
                            <div style="font-weight:800;">Raw Log OPERLOG Enabled</div>
                            <div class="muted" style="margin-top:4px; font-size: 13px;">Tulis <code>operlog-raw-YYYY-MM-DD.txt</code> (audit OPLOG).</div>
                        </div>
                    </label>
                </div>

                <div style="display:flex; justify-content:flex-end; gap:10px; margin-top: 12px; flex-wrap:wrap;">
                    <button type="submit" class="pill-link primary" style="cursor:pointer;">Simpan Pengaturan</button>
                </div>
            </form>

            <div style="padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,0.62);">
                <div style="font-weight: 800;">Ringkasan Storage Raw Logs</div>
                <div class="muted" style="margin-top:6px; font-size: 13px;">
                    Total: {{ number_format((int) ($rawLogStats['total_files'] ?? 0)) }} file,
                    {{ number_format(((int) ($rawLogStats['total_bytes'] ?? 0)) / 1024 / 1024, 2) }} MB.
                </div>
                <div style="display:grid; gap:8px; margin-top: 12px; font-size: 13px;">
                    @foreach (($rawLogStats['by_prefix'] ?? []) as $prefix => $row)
                        <div style="display:flex; justify-content:space-between; gap:10px;">
                            <strong>{{ $prefix }}</strong>
                            <span class="muted">{{ number_format((int) ($row['files'] ?? 0)) }} file · {{ number_format(((int) ($row['bytes'] ?? 0)) / 1024 / 1024, 2) }} MB</span>
                        </div>
                    @endforeach
                </div>

                <hr style="border:0; border-top:1px solid rgba(29, 42, 36, 0.10); margin: 14px 0;">

                <form method="POST" action="{{ route('device-errors.purge-raw-logs') }}" style="display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;">
                    @csrf
                    <label style="display:grid; gap:6px; min-width: 240px;">
                        <span class="muted" style="font-size: 13px;">Hapus raw logs lebih lama dari (hari)</span>
                        <input type="number" name="days" min="1" max="3650" value="30" style="padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                    </label>
                    <button type="submit" class="pill-link secondary" style="cursor:pointer;" onclick="return confirm('Hapus file raw logs lama? Ini akan mengurangi storage di storage/logs.')">
                        Bersihkan Raw Logs
                    </button>
                </form>
            </div>
        </div>
    </section>

    <section class="table-card">
        <form method="GET" action="{{ route('device-errors.index') }}" class="filters">
            <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="Cari SN / path / message...">
            <select name="status">
                <option value="open" @selected(($filters['status'] ?? 'open') === 'open')>Open</option>
                <option value="resolved" @selected(($filters['status'] ?? 'open') === 'resolved')>Resolved</option>
                <option value="all" @selected(($filters['status'] ?? 'open') === 'all')>All</option>
            </select>
            <select name="per_page">
                @foreach ([25,50,100,250] as $size)
                    <option value="{{ $size }}" @selected((int) ($filters['per_page'] ?? 50) === $size)>{{ $size }} rows</option>
                @endforeach
            </select>
            <button type="submit" class="primary">Filter</button>
            <a href="{{ route('device-errors.index') }}" class="pill-link secondary">Reset</a>
        </form>
    </section>

    <section class="table-card">
        <h3>Device Error Notices</h3>
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Last Seen</th>
                        <th>SN</th>
                        <th>Endpoint</th>
                        <th>Status</th>
                        <th>Occurrences</th>
                        <th>Message</th>
                        <th>Source</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $row)
                        <tr>
                            <td>
                                <div>{{ $row->last_seen_at ?: '-' }}</div>
                                <div class="muted" style="font-size:12px;">First: {{ $row->first_seen_at ?: '-' }}</div>
                            </td>
                            <td>{{ $row->sn ?: '-' }}</td>
                            <td>
                                <div style="font-weight:800;">{{ $row->method }} {{ $row->path }}</div>
                                <div class="muted" style="font-size:12px;">HTTP {{ $row->status_code }}</div>
                            </td>
                            <td>
                                @if ($row->resolved_at)
                                    <span class="status success">Resolved</span>
                                    <div class="muted" style="font-size:12px;">{{ $row->resolved_at }}</div>
                                @else
                                    <span class="status stale">Open</span>
                                @endif
                            </td>
                            <td>{{ number_format((int) ($row->occurrences ?? 0)) }}</td>
                            <td style="max-width: 420px;">
                                <div style="font-weight:800;">{{ $row->exception_class }}</div>
                                <div class="muted" style="margin-top:6px; font-size:12px; line-height:1.6;">
                                    {{ \Illuminate\Support\Str::limit((string) $row->message, 220) }}
                                </div>
                            </td>
                            <td style="max-width: 320px;">
                                <div class="muted" style="font-size:12px; line-height:1.6;">
                                    {{ $row->file }}:{{ $row->line }}
                                </div>
                            </td>
                            <td>
                                @if (! $row->resolved_at)
                                    <form method="POST" action="{{ route('device-errors.resolve', ['notice' => $row->id]) }}">
                                        @csrf
                                        <button type="submit" class="pill-link secondary" style="cursor:pointer;">Mark Resolved</button>
                                    </form>
                                @else
                                    <span class="muted">-</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8" class="muted">Belum ada device error notice.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div style="margin-top: 14px;">
            {{ $rows->links() }}
        </div>
    </section>
@endsection