@extends('layouts.app')

@section('title', 'Matrix ID Settings')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Matrix ID Settings</h1>
        <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">Configure how Matrix IDs are generated for new agents</p>
    </div>

    <!-- Preview Card -->
    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg shadow-lg p-6 mb-6 text-white">
        <div class="text-indigo-100 text-sm mb-1">Next Matrix ID Preview</div>
        <div class="text-3xl font-mono font-bold">{{ $preview }}</div>
        <p class="text-indigo-200 text-sm mt-2">This is what the next generated Matrix ID will look like.</p>
    </div>

    <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
        <form action="{{ route('agents.update-matrix-id-settings') }}" method="POST">
            @csrf
            @method('PUT')

            <div class="space-y-6">
                <!-- Prefix -->
                <div>
                    <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Prefix *</label>
                    <input type="text" name="prefix" value="{{ old('prefix', $settings['prefix']) }}" required
                           maxlength="10"
                           class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono uppercase"
                           placeholder="AGT"
                           oninput="this.value = this.value.toUpperCase().replace(/[^A-Z]/g, ''); updatePreview();">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Letters only, max 10 characters. Example: AGT, AGENT, MM</p>
                    @error('prefix')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Format -->
                <div>
                    <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Format *</label>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="radio" name="format" value="numeric" {{ $settings['format'] === 'numeric' ? 'checked' : '' }}
                                   class="mr-3 text-indigo-600" onchange="updatePreview();">
                            <span class="text-gray-700 dark:text-gray-300">Numeric Only</span>
                            <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">(e.g., AGT0001, AGT0002)</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="format" value="alphanumeric" {{ $settings['format'] === 'alphanumeric' ? 'checked' : '' }}
                                   class="mr-3 text-indigo-600" onchange="updatePreview();">
                            <span class="text-gray-700 dark:text-gray-300">Alphanumeric (Base 36)</span>
                            <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">(e.g., AGT0001, AGT000A, AGT000Z)</span>
                        </label>
                    </div>
                    @error('format')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Length -->
                <div>
                    <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Number Length *</label>
                    <select name="length" required
                            class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            onchange="updatePreview();">
                        @for($i = 3; $i <= 10; $i++)
                            <option value="{{ $i }}" {{ $settings['length'] == $i ? 'selected' : '' }}>
                                {{ $i }} digits ({{ str_pad('1', $i, '0', STR_PAD_LEFT) }} - {{ str_repeat('9', $i) }})
                            </option>
                        @endfor
                    </select>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Number of digits/characters after the prefix</p>
                    @error('length')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Next Number -->
                <div>
                    <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Next Sequential Number *</label>
                    <input type="number" name="next_number" value="{{ old('next_number', $settings['next_number']) }}" required
                           min="1"
                           class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           onchange="updatePreview();">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        The next number to be used. Useful when importing existing agents with higher IDs.
                    </p>
                    @error('next_number')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Info Box -->
                <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                    <div class="flex">
                        <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mr-3 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <div class="text-sm text-blue-700 dark:text-blue-300">
                            <p class="font-medium mb-1">About Matrix IDs</p>
                            <ul class="list-disc list-inside space-y-1 text-xs">
                                <li>Matrix IDs are automatically generated when creating new agents</li>
                                <li>Existing Matrix IDs will not be affected by these settings</li>
                                <li>Matrix IDs also serve as coupon codes for customer discounts</li>
                                <li>You can manually import agents with custom Matrix IDs via SQL</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <a href="{{ route('agents.index') }}"
                   class="inline-flex items-center gap-2 px-5 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors font-medium">
                    Cancel
                </a>
                <button type="submit"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 shadow-md hover:shadow-lg transition-all font-medium focus:ring-2 focus:ring-indigo-500">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    Save Settings
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function updatePreview() {
    // This is a simple client-side preview. The actual generation happens server-side.
    const prefix = document.querySelector('input[name="prefix"]').value.toUpperCase();
    const format = document.querySelector('input[name="format"]:checked').value;
    const length = parseInt(document.querySelector('select[name="length"]').value);
    const nextNumber = parseInt(document.querySelector('input[name="next_number"]').value) || 1;

    let suffix;
    if (format === 'alphanumeric') {
        suffix = nextNumber.toString(36).toUpperCase();
    } else {
        suffix = nextNumber.toString();
    }
    suffix = suffix.padStart(length, '0');

    // Update preview if we have a preview element
    const previewEl = document.querySelector('.text-3xl.font-mono');
    if (previewEl) {
        previewEl.textContent = prefix + suffix;
    }
}
</script>
@endsection