@section('title', $routeName)
<div>
    <div class="mb-4">
        <input
            wire:model.live="name"
            type="text"
            placeholder="Bot Name"
            class="border p-2 rounded mb-2 w-full"
        />
        @error('name')
            <span class="text-red-500">{{ $message }}</span>
        @enderror
    </div>

    <div>
        <select wire:model.live="class" class="border p-2 rounded mb-2 w-full">
            <option hidden selected>Select Bot Schema</option>
            @foreach ($classList as $class => $label)
                <option class="text-black" value="{{ $class }}">
                    {{ $label }}
                </option>
            @endforeach
        </select>
        @error('class')
            <span class="text-red-500">{{ $message }}</span>
        @enderror
    </div>

    <div class="mt-6">
        <input
            wire:model.live="schedule"
            type="text"
            placeholder="Schedule (CRON)"
            class="border p-2 rounded mb-2 w-full"
        />
        <span>
            {{ $cron_text }}
        </span>
        @error('schedule')
            <span class="text-red-500">{{ $message }}</span>
        @enderror
    </div>

    <div class="mt-4">
        <div class="mb-4 text-xl">
            <h2>Config</h2>
        </div>
        @forelse ($configSchema as $field => $meta)
            <div class="mb-4">
                <label>{{ $meta['label'] }}</label>

                @if ($meta['type'] === 'json')
                    <div x-data="jsonEditor(@entangle('config.' . $field))">
                        <textarea
                            id="config-body"
                            x-model="value"
                            wire:model.live="config.{{ $field }}"
                            @keydown="handleKeydown($event)"
                            class="w-full h-40 p-2 font-mono border rounded-md"
                        ></textarea>
                    </div>
                    <span
                        class="text-blue-300 cursor-pointer"
                        wire:click="prettify('{{ $field }}')"
                    >
                        Prettify
                    </span>
                @else
                    <input
                        wire:model.live="config.{{ $field }}"
                        class="border p-2 rounded mb-2 w-full"
                        type="text"
                        name="config[{{ $field }}]"
                        value="{{ old("config.$field", $bot->config[$field] ?? '') }}"
                    />
                @endif
            </div>
            @error('config.' . $field)
                <span class="text-red-500">{{ $message }}</span>
            @enderror
        @empty
            <i class="text-gray-400">Select a bot first</i>
        @endforelse
    </div>

    <div class="mt-6">
        <label class="inline-flex items-center">
            <input type="checkbox" wire:model="enabled" class="form-checkbox" />
            <span class="ml-2">Enabled</span>
        </label>
    </div>

    <div>
        <button
            wire:click="save"
            class="mt-6 bg-blue-500 text-white px-4 py-2 rounded cursor-pointer"
        >
            {{ $routeName }}
        </button>
    </div>
</div>

<script>
    function jsonEditor(model) {
        return {
            value: model,
            handleKeydown(e) {
                const textarea = e.target;
                const val = textarea.value;
                const start = textarea.selectionStart;
                const end = textarea.selectionEnd;

                // Map of pairs
                const pairs = {
                    '{': '}',
                    '[': ']',
                    '"': '"',
                    "'": "'",
                };

                if (pairs[e.key]) {
                    e.preventDefault();
                    const open = e.key;
                    const close = pairs[e.key];

                    textarea.setRangeText(open + close, start, end, 'end');
                    textarea.selectionStart = textarea.selectionEnd = start + 1;
                    this.value = textarea.value;
                }

                // Auto-indent new line inside braces
                if (
                    e.key === 'Enter' &&
                    val[start - 1] === '{' &&
                    val[end] === '}'
                ) {
                    e.preventDefault();
                    const indent = '  ';
                    const newText = `\n${indent}\n`;
                    textarea.setRangeText(newText, start, end, 'end');
                    textarea.selectionStart = textarea.selectionEnd =
                        start + newText.length - 1;
                    this.value = textarea.value;
                }
            },
        };
    }
</script>