@extends('layouts.adminlte')

@section('title', 'MASTER API KEY')
@section('page_title', 'MASTER API KEY')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/responsive.bootstrap5.min.css') }}" />
    <style>
        .key-masked-wrap {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
        }
        .btn-copy-key {
            padding: .1rem .38rem;
            line-height: 1;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Master API Key Attendance</h3>
            @if (!empty($canCreate))
                <button class="btn btn-primary btn-sm" id="btnAddApiKey"><i class="fas fa-plus me-1"></i>Tambah API Key</button>
            @endif
        </div>
        <div class="card-body">
            <div class="alert alert-warning py-2 mb-3">
                API key hanya ditampilkan sekali saat create/regenerate. Simpan di tempat aman.
            </div>
            <div class="table-responsive">
                <table id="apiKeyTable" class="table table-striped table-hover align-middle w-100">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Name</th>
                            <th>Key Masked</th>
                            <th>Active</th>
                            <th>Expires At</th>
                            <th>Last Used</th>
                            <th>Last IP</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="apiKeyModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="apiKeyModalTitle">Tambah API Key</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="apiKeyForm">
                    <div class="modal-body">
                        <input type="hidden" id="apiKeyId" />
                        <div class="mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" id="apiKeyName" maxlength="120" required />
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Expired At</label>
                            <input type="datetime-local" class="form-control" id="apiKeyExpiresAt" />
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input class="form-check-input" type="checkbox" role="switch" id="apiKeyNeverExpired" checked />
                            <label class="form-check-label" for="apiKeyNeverExpired">Never Expired</label>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Notes</label>
                            <textarea class="form-control" id="apiKeyNotes" rows="2"></textarea>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" id="apiKeyActive" checked />
                            <label class="form-check-label" for="apiKeyActive">Active</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/responsive.bootstrap5.min.js') }}"></script>
    <script>
        $(function () {
            const canCreate = @json((bool) ($canCreate ?? false));
            const canUpdate = @json((bool) ($canUpdate ?? false));
            const canDelete = @json((bool) ($canDelete ?? false));
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            const modal = new bootstrap.Modal(document.getElementById('apiKeyModal'));
            const table = $('#apiKeyTable').DataTable({
                responsive: true,
                data: [],
                columns: [
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: 'name' },
                    {
                        data: 'key_masked',
                        render: (v, t, r) => {
                            const masked = (v || '-').toString();
                            const safe = $('<div>').text(masked).html();
                            return `
                                <span class="key-masked-wrap">
                                    <span>${safe}</span>
                                    <button
                                        type="button"
                                        class="btn btn-sm btn-outline-secondary btn-copy-key"
                                        data-key="${safe}"
                                        title="Copy masked key"
                                    >
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </span>
                            `;
                        }
                    },
                    { data: 'is_active', render: (v) => `<span class="badge text-bg-${v ? 'success' : 'secondary'}">${v ? 'Aktif' : 'Nonaktif'}</span>` },
                    { data: null, render: (r) => r.never_expired ? '<span class="badge text-bg-info">Never</span>' : (r.expires_at || '-') },
                    { data: 'last_used_at', render: (v) => v || '-' },
                    { data: 'last_used_ip', render: (v) => v || '-' },
                    {
                        data: null,
                        orderable: false,
                        render: (d, t, r) => `
                            ${canUpdate ? `<button class="btn btn-sm btn-outline-primary btn-edit" data-id="${r.id}">Edit</button>` : ''}
                            ${canUpdate ? `<button class="btn btn-sm btn-outline-warning btn-regen" data-id="${r.id}">Regenerate</button>` : ''}
                            ${canDelete ? `<button class="btn btn-sm btn-outline-danger btn-delete" data-id="${r.id}">Delete</button>` : ''}
                        `
                    }
                ]
            });

            let rowsCache = [];
            const toDateTimeLocal = (value) => value ? value.replace(' ', 'T').slice(0, 16) : '';
            const fromDateTimeLocal = (value) => value ? value.replace('T', ' ') + ':00' : '';
            const syncExpiresInputState = () => {
                const never = $('#apiKeyNeverExpired').is(':checked');
                $('#apiKeyExpiresAt').prop('disabled', never);
                if (never) {
                    $('#apiKeyExpiresAt').val('');
                }
            };
            const fallbackCopyText = (text) => {
                const input = document.createElement('textarea');
                input.value = text;
                input.setAttribute('readonly', '');
                input.style.position = 'fixed';
                input.style.opacity = '0';
                input.style.pointerEvents = 'none';
                document.body.appendChild(input);
                input.focus();
                input.select();
                input.setSelectionRange(0, input.value.length);
                let copied = false;
                try {
                    copied = document.execCommand('copy');
                } catch (e) {
                    copied = false;
                }
                document.body.removeChild(input);
                return copied;
            };

            const showApiKey = (plainKey, warning) => {
                Swal.fire({
                    title: 'API Key Baru',
                    html: `<div class="text-start"><p class="mb-1">${warning || ''}</p><code style="word-break:break-all;display:block;">${plainKey}</code></div>`,
                    icon: 'success',
                    confirmButtonText: 'Copy',
                    showCancelButton: true,
                    cancelButtonText: 'Close'
                }).then((res) => {
                    if (res.isConfirmed && navigator.clipboard) {
                        navigator.clipboard.writeText(plainKey);
                        Swal.fire('Copied', 'API key disalin ke clipboard', 'success');
                    }
                });
            };

            const loadData = () => {
                $.getJSON('{{ route('master_api_key.data') }}')
                    .done((resp) => {
                        rowsCache = resp.data || [];
                        table.clear().rows.add(rowsCache).draw();
                    })
                    .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Failed load data', 'error'));
            };

            $('#btnAddApiKey').on('click', function () {
                if (!canCreate) return;
                $('#apiKeyModalTitle').text('Tambah API Key');
                $('#apiKeyId').val('');
                $('#apiKeyName').val('');
                $('#apiKeyExpiresAt').val('');
                $('#apiKeyNeverExpired').prop('checked', true);
                syncExpiresInputState();
                $('#apiKeyNotes').val('');
                $('#apiKeyActive').prop('checked', true);
                modal.show();
            });

            $('#apiKeyTable').on('click', '.btn-edit', function () {
                if (!canUpdate) return;
                const id = Number($(this).data('id'));
                const row = rowsCache.find((x) => Number(x.id) === id);
                if (!row) return;
                $('#apiKeyModalTitle').text('Edit API Key');
                $('#apiKeyId').val(row.id);
                $('#apiKeyName').val(row.name || '');
                $('#apiKeyExpiresAt').val(toDateTimeLocal(row.expires_at || ''));
                $('#apiKeyNeverExpired').prop('checked', !!row.never_expired);
                syncExpiresInputState();
                $('#apiKeyNotes').val(row.notes || '');
                $('#apiKeyActive').prop('checked', !!row.is_active);
                modal.show();
            });

            $('#apiKeyNeverExpired').on('change', function () {
                syncExpiresInputState();
            });

            $('#apiKeyForm').on('submit', function (e) {
                e.preventDefault();
                const id = $('#apiKeyId').val();
                if (!id && !canCreate) {
                    Swal.fire('No Access', 'Tidak memiliki akses create API key.', 'warning');
                    return;
                }
                if (id && !canUpdate) {
                    Swal.fire('No Access', 'Tidak memiliki akses update API key.', 'warning');
                    return;
                }
                const payload = {
                    name: ($('#apiKeyName').val() || '').toString().trim(),
                    expires_at: fromDateTimeLocal($('#apiKeyExpiresAt').val() || ''),
                    never_expired: $('#apiKeyNeverExpired').is(':checked') ? 1 : 0,
                    notes: ($('#apiKeyNotes').val() || '').toString().trim(),
                    is_active: $('#apiKeyActive').is(':checked') ? 1 : 0
                };
                if (!payload.name) {
                    Swal.fire('Warning', 'Name wajib diisi', 'warning');
                    return;
                }

                $.ajax({
                    url: id ? `{{ url('/master-api-key') }}/${id}` : '{{ route('master_api_key.store') }}',
                    type: id ? 'PUT' : 'POST',
                    data: payload
                }).done((resp) => {
                    modal.hide();
                    loadData();
                    if (!id && resp?.api_key) {
                        showApiKey(resp.api_key, resp.warning || '');
                        return;
                    }
                    Swal.fire('Success', resp?.message || 'Saved', 'success');
                }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Save failed', 'error'));
            });

            $('#apiKeyTable').on('click', '.btn-regen', function () {
                if (!canUpdate) return;
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Regenerate API key?',
                    text: 'Key lama tidak bisa dipakai lagi.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, regenerate'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ url('/master-api-key') }}/${id}/regenerate`)
                        .done((resp) => {
                            loadData();
                            showApiKey(resp?.api_key || '', resp?.warning || '');
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Regenerate failed', 'error'));
                });
            });

            $('#apiKeyTable').on('click', '.btn-delete', function () {
                if (!canDelete) return;
                const id = Number($(this).data('id'));
                Swal.fire({
                    title: 'Delete API key?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, delete'
                }).then((res) => {
                    if (!res.isConfirmed) return;
                    $.ajax({
                        url: `{{ url('/master-api-key') }}/${id}`,
                        type: 'DELETE'
                    }).done((resp) => {
                        loadData();
                        Swal.fire('Deleted', resp?.message || 'Deleted', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Delete failed', 'error'));
                });
            });

            $('#apiKeyTable').on('click', '.btn-copy-key', function () {
                const key = ($(this).data('key') || '').toString().trim();
                if (!key || key === '-') {
                    Swal.fire('Info', 'Masked key tidak tersedia untuk disalin.', 'info');
                    return;
                }
                const finishSuccess = () => Swal.fire('Copied', 'Masked key disalin ke clipboard', 'success');
                const finishError = () => Swal.fire('Error', 'Gagal menyalin key', 'error');
                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(key)
                        .then(finishSuccess)
                        .catch(() => {
                            if (fallbackCopyText(key)) finishSuccess();
                            else finishError();
                        });
                    return;
                }
                if (fallbackCopyText(key)) {
                    finishSuccess();
                    return;
                }
                Swal.fire('Info', 'Clipboard browser tidak tersedia.', 'info');
            });

            loadData();
        });
    </script>
@endpush