@extends('layouts.app')

@section('title', 'Manajemen Database & Pemeliharaan')

@section('page_header')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
    <div>
        <h4 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
            <i class="fa-solid fa-database text-warning"></i> Manajemen & Pemeliharaan Database
        </h4>
        <small class="text-muted">Cadangkan data (backup .SQL), pulihkan sistem (restore), dan kelola pembersihan log telemetri</small>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('database.backup') }}" class="btn btn-success">
            <i class="fa-solid fa-cloud-arrow-down me-1"></i> Unduh Cadangan Database (.SQL)
        </a>
    </div>
</div>
@endsection

@section('content')
<!-- Metric Cards Database -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="metric-box bg-white">
            <div class="metric-label">NAMA DATABASE</div>
            <div class="metric-val text-primary fs-5">{{ $databaseName }}</div>
            <small class="text-muted font-mono">MySQL v{{ substr($mysqlVersion, 0, 8) }}</small>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="metric-box bg-white">
            <div class="metric-label">UKURAN STORAGE</div>
            <div class="metric-val text-success">{{ $dbSizeKb }} <span class="metric-unit">KB</span></div>
            <small class="text-muted font-mono">({{ $dbSizeMb }} MB)</small>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="metric-box bg-white">
            <div class="metric-label">TOTAL LOG TELEMETRI</div>
            <div class="metric-val text-dark font-mono">{{ $tables[0]['count'] }}</div>
            <small class="text-muted">Catatan harian tersimpan</small>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="metric-box bg-white">
            <div class="metric-label">MASTER DATA AKTIF</div>
            <div class="metric-val text-warning font-mono">{{ $tables[3]['count'] + $tables[4]['count'] + $tables[5]['count'] }}</div>
            <small class="text-muted">Pemancar, Shift & Pegawai</small>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Kolom Kiri: Tabel Statistik & Restore -->
    <div class="col-lg-6">
        <!-- Card 1: Status Tabel Database -->
        <div class="card card-engineering mb-4">
            <div class="card-header">
                <div>
                    <i class="fa-solid fa-table-cells me-2 text-primary"></i>
                    <strong>Statistik & Kapasitas Tabel Database</strong>
                </div>
                <span class="badge bg-secondary font-mono">{{ count($tables) }} Tabel Inti</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 font-mono small">
                        <thead class="table-light">
                            <tr>
                                <th>Nama Tabel</th>
                                <th>Keterangan</th>
                                <th class="text-center">Kategori</th>
                                <th class="text-end">Jumlah Data</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($tables as $tbl)
                            <tr>
                                <td>
                                    <strong class="text-dark">{{ $tbl['name'] }}</strong>
                                </td>
                                <td class="font-sans text-secondary">{{ $tbl['label'] }}</td>
                                <td class="text-center">
                                    <span class="badge {{ $tbl['category'] === 'operasional' ? 'bg-info text-dark' : 'bg-secondary' }}">
                                        {{ ucfirst($tbl['category']) }}
                                    </span>
                                </td>
                                <td class="text-end fw-bold {{ $tbl['count'] > 0 ? 'text-primary' : 'text-muted' }}">
                                    {{ number_format($tbl['count']) }} baris
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Card 2: Restore Database -->
        <div class="card card-engineering">
            <div class="card-header bg-white">
                <div>
                    <i class="fa-solid fa-cloud-arrow-up me-2 text-info"></i>
                    <strong>Pulihkan Database (Restore .SQL)</strong>
                </div>
                <span class="badge bg-info text-dark font-mono">Impor Data</span>
            </div>
            <div class="card-body p-4">
                <div class="alert alert-info py-2 px-3 small border-0 d-flex gap-2 align-items-start mb-3">
                    <i class="fa-solid fa-circle-info fs-5 mt-1 text-info"></i>
                    <div>
                        Unggah berkas cadangan database berformat <code>.sql</code> untuk mengembalikan struktur dan data tabel.
                        Pastikan berkas berasal dari backup aplikasi ini.
                    </div>
                </div>

                <form id="restoreForm" action="{{ route('database.restore') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-secondary">PILIH BERKAS SQL (.SQL) *</label>
                        <input type="file" name="sql_file" id="sql_file_input" class="form-control font-mono" accept=".sql,.txt" required>
                        <small class="text-muted">Maksimal ukuran berkas: 50 MB.</small>
                    </div>

                    <button type="button" class="btn btn-primary w-100" id="btnTriggerRestore">
                        <i class="fa-solid fa-rotate me-1"></i> Mulai Pulihkan Database (Restore)
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Kolom Kanan: Backup & Pembersihan / Reset -->
    <div class="col-lg-6">
        <!-- Card 3: Backup Cepat -->
        <div class="card card-engineering mb-4">
            <div class="card-header bg-white">
                <div>
                    <i class="fa-solid fa-file-shield me-2 text-success"></i>
                    <strong>Cadangkan Database (Backup .SQL)</strong>
                </div>
                <span class="badge bg-success font-mono">Ekspor Aman</span>
            </div>
            <div class="card-body p-4">
                <p class="text-secondary small mb-3">
                    Membuat berkas salinan utuh seluruh tabel, relasi, dan baris data telemetri pemancar dalam format standar SQL.
                    Disarankan untuk mengunduh cadangan secara berkala sebelum melakukan pembersihan data.
                </p>
                <div class="p-3 bg-light border rounded mb-3 font-mono small text-secondary">
                    <div><i class="fa-solid fa-check text-success me-2"></i>Mencakup struktur skema & data seluruh tabel</div>
                    <div><i class="fa-solid fa-check text-success me-2"></i>Kompatibel dengan MySQL, MariaDB, & phpMyAdmin</div>
                    <div><i class="fa-solid fa-check text-success me-2"></i>Bebas foreign-key locking selama restore</div>
                </div>
                <a href="{{ route('database.backup') }}" class="btn btn-outline-success w-100 fw-semibold">
                    <i class="fa-solid fa-download me-1"></i> Unduh Berkas Backup Sekarang
                </a>
            </div>
        </div>

        <!-- Card 4: Pembersihan & Reset Database (Hapus) -->
        <div class="card card-engineering border-danger-subtle">
            <div class="card-header bg-danger text-white">
                <div>
                    <i class="fa-solid fa-triangle-exclamation me-2"></i>
                    <strong>Pembersihan & Reset Database (Hapus Data)</strong>
                </div>
                <span class="badge bg-white text-danger font-mono fw-bold">Perhatian Khusus</span>
            </div>
            <div class="card-body p-4">
                <div class="alert alert-warning py-2 px-3 small border-0 d-flex gap-2 align-items-start mb-3">
                    <i class="fa-solid fa-shield-halved fs-5 mt-1 text-warning"></i>
                    <div>
                        <strong>Peringatan Keamanan:</strong> Tindakan pembersihan database bersifat permanen dan tidak dapat dibatalkan.
                        Pastikan Anda telah mengunduh backup <code>.sql</code> terlebih dahulu!
                    </div>
                </div>

                <form id="wipeDatabaseForm" action="{{ route('database.wipe') }}" method="POST">
                    @csrf
                    
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-secondary">PILIH JENIS PEMBERSIHAN *</label>
                        <div class="form-check p-3 border rounded mb-2 bg-light">
                            <input class="form-check-input" type="radio" name="mode" id="mode_operational" value="operational_only" checked>
                            <label class="form-check-label fw-bold text-dark d-block" for="mode_operational">
                                <i class="fa-solid fa-broom text-primary me-1"></i> Bersihkan Data Operasional Saja (Direkomendasikan)
                            </label>
                            <small class="text-muted d-block mt-1 font-sans">
                                Mengosongkan data logbook telemetri harian, gangguan off-air, dan catatan maintenance.
                                <strong>Master data pemancar, jam shift, dan akun teknisi/pegawai tetap aman.</strong>
                            </small>
                        </div>

                        <div class="form-check p-3 border rounded mb-2 bg-light">
                            <input class="form-check-input" type="radio" name="mode" id="mode_by_date" value="by_date">
                            <label class="form-check-label fw-bold text-dark d-block" for="mode_by_date">
                                <i class="fa-solid fa-calendar-xmark text-warning me-1"></i> Hapus Log Sebelum Tanggal Tertentu
                            </label>
                            <small class="text-muted d-block mt-1 font-sans">
                                Menghapus catatan log telemetri yang lebih lama dari tanggal batas yang Anda tentukan.
                            </small>
                            <div class="mt-2 d-none" id="dateInputContainer">
                                <label class="form-label small text-secondary">Hapus log tercatat sebelum / sama dengan:</label>
                                <input type="date" name="before_date" id="before_date" class="form-control form-control-sm font-mono" value="{{ date('Y-m-01') }}">
                            </div>
                        </div>

                        <div class="form-check p-3 border rounded mb-3 bg-light">
                            <input class="form-check-input" type="radio" name="mode" id="mode_factory" value="factory_reset">
                            <label class="form-check-label fw-bold text-danger d-block" for="mode_factory">
                                <i class="fa-solid fa-fire text-danger me-1"></i> Reset Total Database (Kondisi Awal Pabrik)
                            </label>
                            <small class="text-muted d-block mt-1 font-sans">
                                Menjalankan migrasi ulang dan seeder awal. Seluruh data operasional dan master kustom akan dikembalikan ke pengaturan stasiun default.
                            </small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-danger">
                            KONFIRMASI KEAMANAN: KETIK <span class="badge bg-danger">HAPUS</span> DI BAWAH INI *
                        </label>
                        <input type="text" name="confirm_text" id="confirm_text_input" class="form-control font-mono border-danger" placeholder="Ketik kata: HAPUS" required autocomplete="off">
                        <small class="text-muted">Ketik kata <strong>HAPUS</strong> dengan huruf kapital untuk mengaktifkan tombol eksekusi.</small>
                    </div>

                    <button type="button" class="btn btn-danger w-100" id="btnTriggerWipe">
                        <i class="fa-solid fa-trash-can me-1"></i> Eksekusi Pembersihan / Hapus Database
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Toggle input tanggal saat mode dipilih
        $('input[name="mode"]').on('change', function() {
            if ($(this).val() === 'by_date') {
                $('#dateInputContainer').removeClass('d-none');
            } else {
                $('#dateInputContainer').addClass('d-none');
            }
        });

        // Trigger Restore dengan SweetAlert2
        $('#btnTriggerRestore').on('click', function() {
            const fileInput = $('#sql_file_input')[0];
            if (!fileInput.files.length) {
                Swal.fire('Peringatan', 'Silakan pilih berkas cadangan .sql terlebih dahulu!', 'warning');
                return;
            }

            const fileName = fileInput.files[0].name;

            Swal.fire({
                title: 'Pulihkan Database?',
                html: `Anda akan memulihkan data dari berkas <strong>${fileName}</strong>.<br><span class="text-danger small">Tindakan ini akan menimpa/memperbarui data pada database saat ini.</span>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#0284c7',
                cancelButtonColor: '#64748b',
                confirmButtonText: '<i class="fa-solid fa-rotate me-1"></i> Ya, Jalankan Restore',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Memproses Pemulihan Data...',
                        text: 'Harap tunggu beberapa saat hingga seluruh kueri SQL selesai dieksekusi.',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    $('#restoreForm').submit();
                }
            });
        });

        // Trigger Wipe / Hapus Database dengan SweetAlert2
        $('#btnTriggerWipe').on('click', function() {
            const confirmVal = $('#confirm_text_input').val().trim().toUpperCase();
            if (confirmVal !== 'HAPUS') {
                Swal.fire('Kata Kunci Tidak Sesuai', 'Harap ketik kata "HAPUS" dengan huruf kapital pada kolom konfirmasi!', 'warning');
                return;
            }

            const selectedMode = $('input[name="mode"]:checked').val();
            let modeTitle = 'Hapus / Bersihkan Database?';
            let modeDesc = 'Apakah Anda yakin ingin melanjutkan tindakan ini?';

            if (selectedMode === 'operational_only') {
                modeTitle = 'Kosongkan Seluruh Data Operasional?';
                modeDesc = 'Semua data logbook harian telemetri, gangguan, dan maintenance akan dihapus permanen. Master pemancar dan akun pegawai tetap aman.';
            } else if (selectedMode === 'by_date') {
                const dateVal = $('#before_date').val();
                modeTitle = 'Hapus Logbook Sebelum Tanggal ' + dateVal + '?';
                modeDesc = 'Seluruh entri logbook telemetri sebelum atau sama dengan tanggal tersebut akan dihapus permanen.';
            } else if (selectedMode === 'factory_reset') {
                modeTitle = 'Reset Total ke Kondisi Awal Pabrik?';
                modeDesc = 'PERINGATAN TINGKAT TINGGI: Seluruh database akan dimigrasi ulang dan dikembalikan ke seeder stasiun default.';
            }

            Swal.fire({
                title: modeTitle,
                text: modeDesc,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                cancelButtonColor: '#64748b',
                confirmButtonText: '<i class="fa-solid fa-trash me-1"></i> Ya, Lanjutkan Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Memproses Pembersihan...',
                        text: 'Sistem sedang membersihkan data database...',
                        allowOutsideClick: false,
                        didOpen: () => {
                            Swal.showLoading();
                        }
                    });
                    $('#wipeDatabaseForm').submit();
                }
            });
        });
    });
</script>
@endpush