{% extends "admin/layout.html" %}

{% block title %}{% if staff %}Edit Staff{% else %}Add Staff{% endif %} - Admin{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="admin-page-header fade-in-on-scroll">
    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
        <div>
            <h1>{% if staff %}Edit Staff Member{% else %}Add New Staff{% endif %}</h1>
            <p class="admin-page-subtitle">{% if staff %}Update staff member details{% else %}Create a new staff account{% endif %}</p>
        </div>
        <a href="{{ url_for('admin_staff.staff') }}" class="admin-btn admin-btn-secondary">
            ← Back to Staff List
        </a>
    </div>
</div>

<!-- Staff Form -->
<div class="admin-table-section fade-in-on-scroll" style="animation-delay: 0.2s;">
    <form method="POST" action="{% if staff %}{{ url_for('admin_staff.edit_staff', staff_id=staff.id) }}{% else %}{{ url_for('admin_staff.create_staff') }}{% endif %}">
        <div style="display: grid; gap: 1.5rem;">
            <div class="form-group">
                <label for="username">Username *</label>
                <input 
                    type="text" 
                    id="username" 
                    name="username" 
                    required
                    value="{{ staff.username if staff else (form.username if form else '') }}"
                    placeholder="Enter username"
                >
            </div>

            <div class="form-group">
                <label for="email">Email Address *</label>
                <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    required
                    value="{{ staff.email if staff else (form.email if form else '') }}"
                    placeholder="Enter email address"
                >
            </div>

            <div class="form-group">
                <label for="product_category">Product Category</label>
                <select id="product_category" name="product_category">
                    <option value="">None (Superadmin)</option>
                    {% for category in product_categories %}
                    <option value="{{ category }}" {% if staff and staff.product_category == category %}selected{% endif %}>{{ category }}</option>
                    {% endfor %}
                </select>
                <small style="color: var(--text-gray); display: block; margin-top: 0.5rem;">
                    Select a product category to assign this admin to that category. Leave blank for superadmin.
                </small>
            </div>

            {% if not staff %}
            <div class="form-group">
                <label for="password">Password *</label>
                <input 
                    type="password" 
                    id="password" 
                    name="password"
                    required
                    placeholder="Enter password"
                    minlength="6"
                >
            </div>
            {% endif %}

            <div class="form-group">
                <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <input 
                        type="checkbox" 
                        name="is_active" 
                        {% if staff and staff.is_active or not staff %}checked{% endif %}
                        style="width: auto;"
                    >
                    <span>Active Account</span>
                </label>
            </div>

            <div style="display: flex; gap: 1rem; margin-top: 1rem;">
                <button type="submit" class="admin-btn admin-btn-primary">
                    <span>💾</span>
                    {% if staff %}Update Staff{% else %}Create Staff{% endif %}
                </button>
                <a href="{{ url_for('admin_staff.staff') }}" class="admin-btn admin-btn-secondary">
                    Cancel
                </a>
            </div>
        </div>
    </form>
</div>

{% if staff %}
<!-- Reset Password Card (Edit only) -->
<div class="admin-table-section fade-in-on-scroll" style="animation-delay: 0.25s;">
    <h2 style="margin-bottom: 1.5rem; color: var(--text-white);">Reset Password</h2>
    <div id="resetPasswordToast" class="flash-messages" style="display: none; margin-bottom: 1rem;"></div>
    <div style="max-width: 400px;">
        <div style="margin-bottom: 1rem;">
            <label for="newPassword" style="display: block; color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">New Password</label>
            <input type="password" id="newPassword" name="new_password" class="admin-input" placeholder="Min 8 characters" autocomplete="new-password" style="width: 100%; padding: 0.5rem 0.75rem;">
        </div>
        <div style="margin-bottom: 1rem;">
            <label for="confirmPassword" style="display: block; color: var(--text-gray); font-size: 0.875rem; margin-bottom: 0.5rem;">Confirm Password</label>
            <input type="password" id="confirmPassword" name="confirm_password" class="admin-input" placeholder="Re-enter password" autocomplete="new-password" style="width: 100%; padding: 0.5rem 0.75rem;">
        </div>
        <button type="button" id="resetPasswordBtn" class="admin-btn admin-btn-primary" disabled>
            Reset Password
        </button>
    </div>
</div>
{% endif %}
{% endblock %}

{% if staff %}
{% block extra_js %}
<script>
(function() {
    var staffId = {{ staff.id }};
    var staffName = {{ staff.username|tojson }};
    var newPasswordEl = document.getElementById('newPassword');
    var confirmPasswordEl = document.getElementById('confirmPassword');
    var resetBtn = document.getElementById('resetPasswordBtn');
    var toastEl = document.getElementById('resetPasswordToast');

    function showToast(message, isSuccess) {
        toastEl.style.display = 'block';
        toastEl.innerHTML = '<div class="alert alert-' + (isSuccess ? 'success' : 'error') + '">' + (message || '') + '</div>';
        setTimeout(function() {
            toastEl.style.display = 'none';
            toastEl.innerHTML = '';
        }, 5000);
    }

    function canSubmit() {
        var newP = (newPasswordEl && newPasswordEl.value) ? newPasswordEl.value : '';
        var confirmP = (confirmPasswordEl && confirmPasswordEl.value) ? confirmPasswordEl.value : '';
        return newP.length >= 8 && newP === confirmP;
    }

    function updateButton() {
        if (resetBtn) resetBtn.disabled = !canSubmit();
    }

    if (newPasswordEl) newPasswordEl.addEventListener('input', updateButton);
    if (confirmPasswordEl) confirmPasswordEl.addEventListener('input', updateButton);

    if (resetBtn) {
        resetBtn.addEventListener('click', function() {
            if (!canSubmit()) return;
            if (!confirm('Reset password for ' + staffName + '? They will need to use the new password to sign in.')) return;

            resetBtn.disabled = true;
            fetch('/admin/staff/' + staffId + '/reset-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    new_password: newPasswordEl.value,
                    confirm_password: confirmPasswordEl.value
                })
            })
            .then(function(r) { return r.json().then(function(data) { return { status: r.status, data: data }; }); })
            .then(function(result) {
                if (result.data.success) {
                    showToast(result.data.message || 'Password reset successfully.', true);
                    newPasswordEl.value = '';
                    confirmPasswordEl.value = '';
                } else {
                    showToast(result.data.error || 'Failed to reset password.', false);
                }
            })
            .catch(function() {
                showToast('Something went wrong. Please try again.', false);
            })
            .finally(function() {
                updateButton();
            });
        });
    }
})();
</script>
{% endblock %}
{% endif %}