{{--
 *
 * @version     1.0.0
 * @package     bplan-base/globals
 * @subpackage  Views
 * @author      Wassilios Meletiadis <wassilios.meletiadis@bplan-solutions.de>
 * @copyright   Copyright (C) 2025, 2026 bplan-solutions GmbH & Co. KG <https://www.bplan-solutions.de/>
 * /Δ\
--}}

<div class="p-6 space-y-6">

    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">@lang('globals::dynamic-form.designer.heading')</h1>

    {{-- DB Source selector --}}
    <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 space-y-4">

        <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300">@lang('globals::dynamic-form.designer.section.db')</h2>

        <div class="grid gap-4 sm:grid-cols-3">

            {{-- Source --}}
            <div>
                <label for="designer-source" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    @lang('globals::dynamic-form.designer.label.source')
                </label>
                <select id="designer-source" wire:model.live="selectedSource"
                    class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                    <option value="">{{ __('globals::dynamic-form.designer.option.select-source') }}</option>
                    @foreach ($this->sources as $key => $displayName)
                        <option value="{{ $key }}">{{ $displayName }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Record --}}
            <div>
                <label for="designer-record" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    @lang('globals::dynamic-form.designer.label.record')
                </label>
                <select id="designer-record" wire:model.live="selectedRecordId"
                    @if ($selectedSource === '') disabled @endif
                    class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 disabled:opacity-50 disabled:cursor-not-allowed">
                    <option value="">{{ __('globals::dynamic-form.designer.option.select-record') }}</option>
                    @foreach ($this->records as $id => $label)
                        <option value="{{ $id }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Actions --}}
            <div class="flex items-end gap-2">
                <button wire:click="loadFromDb" type="button"
                    @if ($selectedSource === '' || $selectedRecordId === null) disabled @endif
                    class="px-4 py-2.5 text-sm font-medium text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 rounded-lg dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 disabled:opacity-50 disabled:cursor-not-allowed">
                    @lang('globals::dynamic-form.designer.action.load')
                </button>
                <button wire:click="saveToDb" type="button"
                    @if ($selectedSource === '' || $selectedRecordId === null || !$jsonIsValid) disabled @endif
                    class="px-4 py-2.5 text-sm font-medium text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 rounded-lg dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 disabled:opacity-50 disabled:cursor-not-allowed">
                    @lang('globals::dynamic-form.designer.action.save')
                </button>
            </div>

        </div>

        {{-- Save feedback --}}
        @if ($saveMessage !== '')
            <p @class([
                'text-sm',
                'text-green-700 dark:text-green-400' => $saveMessageType === 'success',
                'text-red-600 dark:text-red-400'     => $saveMessageType === 'error',
            ])>{{ $saveMessage }}</p>
        @endif

    </div>

    {{-- Controls --}}
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

        {{-- Display mode --}}
        <div>
            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Display</label>
            <div class="flex gap-4">
                <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                    <input type="radio" wire:model.live="display" value="sections" class="text-primary-600" />
                    sections
                </label>
                <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                    <input type="radio" wire:model.live="display" value="tabs" class="text-primary-600" />
                    tabs
                </label>
            </div>
        </div>

        {{-- Wire model prefix --}}
        <div>
            <label for="designer-prefix" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                wire:model prefix
            </label>
            <input type="text" id="designer-prefix" wire:model.live="wireModelPrefix"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" />
        </div>

    </div>

    {{-- JSON input --}}
    <div>
        <div class="flex items-center justify-between mb-2">
            <label for="designer-json" class="text-sm font-medium text-gray-900 dark:text-white">
                config_template JSON
                @if ($configTemplateJson !== '' && !$jsonIsValid)
                    <span class="ml-2 text-xs font-normal text-red-600 dark:text-red-400">@lang('globals::dynamic-form.designer.hint.invalid-json')</span>
                @endif
            </label>
            <button wire:click="loadExample" type="button"
                class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 underline">
                @lang('globals::dynamic-form.designer.action.load-example')
            </button>
        </div>
        <textarea id="designer-json" wire:model.live="configTemplateJson" rows="14"
            @class([
                'font-mono text-sm rounded-lg block w-full p-2.5',
                'bg-gray-50 border border-gray-300 text-gray-900 focus:ring-primary-600 focus:border-primary-600 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500' => $jsonIsValid || $configTemplateJson === '',
                'bg-red-50 border border-red-400 text-gray-900 focus:ring-red-500 focus:border-red-500 dark:bg-gray-700 dark:border-red-500 dark:text-white' => $configTemplateJson !== '' && !$jsonIsValid,
            ])></textarea>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">

        {{-- Rendered form --}}
        <div>
            <h2 class="text-base font-semibold text-gray-900 dark:text-white mb-4">Rendered Form</h2>

            @if ($preparedTemplate !== null)
                <x-globals::dynamic-form.form
                    :template="$preparedTemplate"
                    :sections="$configSections"
                    :wire-model-prefix="$wireModelPrefix"
                    :display="$display" />
            @else
                <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                    @lang('globals::dynamic-form.designer.hint.no-template')
                </p>
            @endif
        </div>

        {{-- Debug: prepared template --}}
        <div>
            <h2 class="text-base font-semibold text-gray-900 dark:text-white mb-4">Prepared Template (Debug)</h2>
            <pre class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 text-xs rounded-lg p-4 overflow-auto max-h-96">{{ json_encode(['template' => $preparedTemplate, 'sections' => $configSections], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
        </div>

    </div>

    {{-- Current testData values --}}
    <div>
        <h2 class="text-base font-semibold text-gray-900 dark:text-white mb-2">testData Values</h2>
        <pre class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 text-xs rounded-lg p-4 overflow-auto max-h-48">{{ json_encode($testData, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
    </div>

</div>
