@extends('parts.container')

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/light/components/modal.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/dark/components/modal.css') }}" />
    <style>
        .api-user-page .api-key-card {
            border: 1px solid rgba(34, 120, 255, 0.18);
            border-radius: 16px;
            padding: 1.25rem;
            background: linear-gradient(135deg, rgba(34, 120, 255, 0.12), rgba(0, 186, 148, 0.08));
            box-shadow: 0 10px 30px rgba(34, 120, 255, 0.08);
        }

        .api-user-page .api-key-card h6,
        .api-user-page .api-key-card p,
        .api-user-page .api-key-card small,
        .api-user-page .api-key-card .api-key-meta {
            color: inherit;
        }

        .api-user-page .api-key-display {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            padding: 0.75rem;
            border-radius: 12px;
            border: 1px dashed rgba(34, 120, 255, 0.28);
            background-color: rgba(255, 255, 255, 0.7);
        }

        .api-user-page .api-key-display input {
            border: 0;
            box-shadow: none;
            background: transparent;
            font-family: monospace;
            font-size: 0.95rem;
            padding: 0;
        }

        .api-user-page .api-key-display input:focus {
            box-shadow: none;
        }

        .api-user-page .modal-subtitle {
            color: #6c757d;
            font-size: 0.92rem;
        }

        .api-user-page .form-hint {
            font-size: 0.82rem;
        }

        .api-user-page .table td small {
            display: block;
            margin-top: 0.15rem;
        }

        body.dark .api-user-page .api-key-card {
            border-color: rgba(103, 156, 255, 0.3);
            background: linear-gradient(135deg, rgba(18, 48, 99, 0.88), rgba(13, 87, 78, 0.72));
            box-shadow: none;
        }

        body.dark .api-user-page .api-key-display {
            border-color: rgba(151, 194, 255, 0.28);
            background-color: rgba(8, 18, 38, 0.72);
        }

        body.dark .api-user-page .modal-subtitle,
        body.dark .api-user-page .form-hint,
        body.dark .api-user-page .api-key-meta,
        body.dark .api-user-page .text-muted {
            color: #c2c8d0 !important;
        }
    </style>
@endsection

@section('content')
<div class="api-user-page layout-px-spacing">
    <div class="middle-content container-xxl p-0">
        <div class="row layout-top-spacing">
            <div class="col-12">
                <div id="apiKeyFlash" class="api-key-card mb-4 d-none" role="status" aria-live="polite">
                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
                        <div>
                            <h6 class="mb-2">API key created</h6>
                            <p class="mb-2">This key is shown once. Copy it now and store it securely.</p>
                            <div class="api-key-display">
                                <input id="apiKeyFlashValue" type="text" class="form-control" readonly>
                                <button type="button" class="btn btn-primary" id="copyApiKeyButton">Copy key</button>
                            </div>
                            <small id="apiKeyCopyFeedback" class="form-hint d-block mt-2 api-key-meta"></small>
                        </div>
                        <button type="button" class="btn btn-outline-secondary" id="dismissApiKeyFlash">Dismiss</button>
                    </div>
                </div>

                <div class="widget-content widget-content-area br-8 p-3">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                        <div>
                            <h5 class="mb-1">API Users</h5>
                            <small class="text-muted">Manage API credentials for organization users.</small>
                        </div>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#apiUserModal">Create API User</button>
                    </div>
                    <table class="table style-3 dt-table-hover" id="apiUsersTable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Organization</th>
                                <th>Contact</th>
                                <th>Email</th>
                                <th>Last Rotated</th>
                                <th>Created</th>
                                <th>Updated</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="apiUserModal" tabindex="-1" aria-labelledby="apiUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="apiUserModalLabel">Create API User</h5>
                    <div class="modal-subtitle mt-1">Create the user, then the generated API key will be shown once on the users list.</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="apiUserForm">
                    <div id="apiUserFormAlert" class="alert alert-danger d-none mb-3" role="alert"></div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="orgName" class="form-label">Organization name<span class="text-danger">*</span></label>
                            <input id="orgName" name="organization_name" type="text" class="form-control" autocomplete="organization" required>
                        </div>
                        <div class="col-md-6">
                            <label for="email" class="form-label">Email address<span class="text-danger">*</span></label>
                            <input id="email" name="email" type="email" class="form-control" autocomplete="email" required>
                        </div>
                        <div class="col-md-6">
                            <label for="contactName" class="form-label">Contact name<span class="text-danger">*</span></label>
                            <input id="contactName" name="contact_name" type="text" class="form-control" autocomplete="name" required>
                        </div>
                        <div class="col-md-6">
                            <label for="contactPhone" class="form-label">Contact phone</label>
                            <input id="contactPhone" name="contact_phone" type="text" class="form-control" autocomplete="tel" placeholder="e.g. +254700000000">
                        </div>
                        <div class="col-md-6">
                            <label for="password" class="form-label">Password<span class="text-danger">*</span></label>
                            <input id="password" name="password" type="password" class="form-control" autocomplete="new-password" minlength="8" required>
                            <small class="form-hint text-muted">Use at least 8 characters.</small>
                        </div>
                        <div class="col-md-6">
                            <label for="currency" class="form-label">Wallet currency</label>
                            <select id="currency" name="currency_code" class="form-control">
                                <option value="">Select currency (optional)</option>
                                @foreach(($currencies ?? []) as $currency)
                                    <option value="{{ strtoupper($currency->code) }}" @selected(strtoupper($currency->code) === 'KES')>
                                        {{ strtoupper($currency->code) }} - {{ $currency->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="form-hint text-muted">Only currencies created in the system are available.</small>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveApiUser">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
<script>
let table;

const apiUsersListUrl = '{{ route('api-users.list') }}';
const apiUsersStoreUrl = '{{ route('api-users.store') }}';
const apiUsersRotateBaseUrl = '{{ url('/admin/api-users') }}';
const flashStorageKey = 'api-user-created-credentials';

const apiUserModalElement = document.getElementById('apiUserModal');
const apiUserForm = document.getElementById('apiUserForm');
const apiUserFormAlert = document.getElementById('apiUserFormAlert');
const saveApiUserButton = document.getElementById('saveApiUser');
const apiKeyFlash = document.getElementById('apiKeyFlash');
const apiKeyFlashValue = document.getElementById('apiKeyFlashValue');
const apiKeyCopyFeedback = document.getElementById('apiKeyCopyFeedback');
const copyApiKeyButton = document.getElementById('copyApiKeyButton');
const dismissApiKeyFlashButton = document.getElementById('dismissApiKeyFlash');

function loadApiUsers() {
    fetch(apiUsersListUrl)
        .then((response) => response.json())
        .then((resp) => {
            const rows = Array.isArray(resp?.data) ? resp.data : [];

            if (!table) {
                table = $('#apiUsersTable').DataTable({
                    data: rows,
                    columns: [
                        {
                            data: 'organization_name',
                            render: (value) => value || '<span class="text-muted">-</span>',
                        },
                        {
                            data: null,
                            render: (row) => {
                                const name = row.api_contact_name || '-';
                                const phone = row.api_contact_phone ? `<small class="text-muted">${row.api_contact_phone}</small>` : '';
                                return `${name}${phone}`;
                            },
                        },
                        { data: 'email' },
                        {
                            data: 'api_key_last_rotated_at',
                            render: (value) => formatDateTime(value),
                        },
                        {
                            data: 'created_at',
                            render: (value) => formatDateTime(value),
                        },
                        {
                            data: 'updated_at',
                            render: (value) => formatDateTime(value),
                        },
                        {
                            data: null,
                            orderable: false,
                            searchable: false,
                            render: (row) => `<button type="button" class="btn btn-sm btn-outline-primary btnRotateApiKey" data-user-id="${row.id}" data-org="${escapeAttribute(row.organization_name || '')}" data-email="${escapeAttribute(row.email || '')}">Regenerate key</button>`,
                        },
                    ],
                });
            } else {
                table.clear();
                table.rows.add(rows);
                table.draw();
            }
        });
}

function formatDateTime(value) {
    if (!value) {
        return '<span class="text-muted">-</span>';
    }

    const date = new Date(value);
    if (Number.isNaN(date.getTime())) {
        return value;
    }

    return date.toLocaleString(undefined, {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: 'numeric',
        minute: '2-digit',
    });
}

function escapeAttribute(value) {
    return String(value)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

function resetApiUserForm() {
    apiUserForm.reset();
    if ([...document.getElementById('currency').options].some((option) => option.value === 'KES')) {
        document.getElementById('currency').value = 'KES';
    }
    apiUserFormAlert.classList.add('d-none');
    apiUserFormAlert.innerHTML = '';
}

function setSaveState(isSaving) {
    saveApiUserButton.disabled = isSaving;
    saveApiUserButton.textContent = isSaving ? 'Saving...' : 'Save';
}

function showFormError(message) {
    apiUserFormAlert.classList.remove('d-none');
    apiUserFormAlert.innerHTML = message;
}

function storeApiKeyFlash(data) {
    sessionStorage.setItem(flashStorageKey, JSON.stringify({
        api_key: data.api_key,
        email: data.email,
        organization_name: data.organization_name,
        event: data.event || 'created',
        created_at: new Date().toISOString(),
    }));
}

function dismissApiKeyFlash() {
    sessionStorage.removeItem(flashStorageKey);
    apiKeyFlash.classList.add('d-none');
    apiKeyFlashValue.value = '';
    apiKeyCopyFeedback.textContent = '';
}

function renderStoredApiKeyFlash() {
    const stored = sessionStorage.getItem(flashStorageKey);
    if (!stored) {
        return;
    }

    try {
        const data = JSON.parse(stored);
        apiKeyFlash.classList.remove('d-none');
        apiKeyFlashValue.value = data.api_key || '';
        const action = data.event === 'rotated' ? 'Regenerated for' : 'Created for';
        apiKeyCopyFeedback.textContent = data.email
            ? `${action} ${data.organization_name || 'the user'} (${data.email}).`
            : 'Copy this key now and store it securely.';
    } catch (error) {
        dismissApiKeyFlash();
    }
}

async function copyApiKey() {
    const value = apiKeyFlashValue.value;
    if (!value) {
        return;
    }

    try {
        if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(value);
        } else {
            apiKeyFlashValue.focus();
            apiKeyFlashValue.select();
            apiKeyFlashValue.setSelectionRange(0, value.length);
            document.execCommand('copy');
        }

        apiKeyCopyFeedback.textContent = 'API key copied.';
        copyApiKeyButton.textContent = 'Copied';
        window.setTimeout(() => {
            copyApiKeyButton.textContent = 'Copy key';
        }, 1600);
    } catch (error) {
        apiKeyCopyFeedback.textContent = 'Copy failed. Select the key and copy it manually.';
    }
}

apiUserModalElement.addEventListener('hidden.bs.modal', resetApiUserForm);
apiUserForm.addEventListener('submit', async (event) => {
    event.preventDefault();
    await submitApiUserForm();
});
copyApiKeyButton.addEventListener('click', copyApiKey);
dismissApiKeyFlashButton.addEventListener('click', dismissApiKeyFlash);

saveApiUserButton.addEventListener('click', async () => {
    await submitApiUserForm();
});

async function submitApiUserForm() {
    if (!apiUserForm.reportValidity()) {
        return;
    }

    setSaveState(true);
    apiUserFormAlert.classList.add('d-none');

    const payload = {
        organization_name: document.getElementById('orgName').value.trim(),
        contact_name: document.getElementById('contactName').value.trim(),
        contact_phone: document.getElementById('contactPhone').value.trim(),
        email: document.getElementById('email').value.trim(),
        password: document.getElementById('password').value,
        currency_code: document.getElementById('currency').value.trim(),
    };

    try {
        const response = await fetch(apiUsersStoreUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify(payload),
        });

        const resp = await response.json();

        if (!response.ok) {
            if (resp.errors && typeof resp.errors === 'object') {
                const errors = Object.values(resp.errors).flat().map((message) => `<div>${message}</div>`).join('');
                showFormError(errors || 'Unable to create API user.');
            } else {
                showFormError(resp.message || 'Unable to create API user.');
            }
            return;
        }

        const modal = bootstrap.Modal.getInstance(apiUserModalElement);
        storeApiKeyFlash({
            api_key: resp?.data?.api_key,
            email: resp?.data?.user?.email || '',
            organization_name: resp?.data?.user?.organization_name || '',
            event: 'created',
        });

        if (modal) {
            modal.hide();
        }

        renderStoredApiKeyFlash();
        loadApiUsers();
    } catch (error) {
        showFormError('A network error occurred while creating the API user.');
    } finally {
        setSaveState(false);
    }
}

async function rotateApiKey(userId, organizationName, email) {
    const confirmed = window.confirm(`Regenerate the API key for ${organizationName || email || 'this user'}? The previous key will stop working.`);
    if (!confirmed) {
        return;
    }

    try {
        const response = await fetch(`${apiUsersRotateBaseUrl}/${userId}/rotate-key`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
        });

        const resp = await response.json();

        if (!response.ok || !resp.success) {
            showFormError(resp.message || 'Unable to regenerate the API key.');
            return;
        }

        storeApiKeyFlash({
            api_key: resp?.data?.api_key,
            email: resp?.data?.email || email || '',
            organization_name: resp?.data?.organization_name || organizationName || '',
            event: 'rotated',
        });
        renderStoredApiKeyFlash();
        loadApiUsers();
    } catch (error) {
        showFormError('A network error occurred while regenerating the API key.');
    }
}

document.getElementById('apiUsersTable').addEventListener('click', async (event) => {
    const button = event.target.closest('.btnRotateApiKey');
    if (!button) {
        return;
    }

    await rotateApiKey(button.dataset.userId, button.dataset.org, button.dataset.email);
});

renderStoredApiKeyFlash();
loadApiUsers();
</script>
@endsection