<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <flux:heading size="xl" class="text-zinc-900 dark:text-zinc-100">
                Edit Setting
            </flux:heading>
            <flux:text class="text-zinc-600 dark:text-zinc-400 mt-1">
                Update system setting configuration
            </flux:text>
        </div>
        <div class="flex gap-3">
            <flux:button
                href="{{ route('admin.settings.index') }}"
                variant="outline"
                icon="arrow-left"
            >
                Back to Settings
            </flux:button>
        </div>
    </div>

    <!-- Success Message -->
    @if (session()->has('success'))
        <flux:callout variant="success">
            <flux:callout.text>{{ session('success') }}</flux:callout.text>
        </flux:callout>
    @endif

    <form wire:submit="updateSetting" class="space-y-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Basic Information -->
            <flux:card class="p-6">
                <flux:heading size="lg" class="text-zinc-900 dark:text-zinc-100 mb-6">
                    Basic Information
                </flux:heading>

                <div class="space-y-4">
                    <!-- Key -->
                    <flux:field>
                        <flux:label>Setting Key</flux:label>
                        <flux:input
                            wire:model="key"
                            placeholder="Enter setting key"
                            :error="$errors->first('key')"
                        />
                    </flux:field>

                    <!-- Group -->
                    <flux:field>
                        <flux:label>Group</flux:label>
                        <flux:input
                            wire:model="group"
                            placeholder="Enter group name"
                            :error="$errors->first('group')"
                        />
                    </flux:field>

                    <!-- Type -->
                    <flux:field>
                        <flux:label>Type</flux:label>
                        <flux:select wire:model="type" variant="listbox">
                            <flux:select.option value="string">String</flux:select.option>
                            <flux:select.option value="integer">Integer</flux:select.option>
                            <flux:select.option value="boolean">Boolean</flux:select.option>
                            <flux:select.option value="file">File</flux:select.option>
                            <flux:select.option value="text">Text</flux:select.option>
                        </flux:select>
                    </flux:field>
                </div>
            </flux:card>

            <!-- Value and Description -->
            <flux:card class="p-6">
                <flux:heading size="lg" class="text-zinc-900 dark:text-zinc-100 mb-6">
                    Value & Description
                </flux:heading>

                <div class="space-y-4">
                    <!-- Value -->
                    @if ($type === 'boolean')
                        <flux:switch
                            wire:model.live="value"
                            label="Enabled"
                            description="Toggle this setting on or off"
                        />
                    @elseif ($type === 'file')
                        <flux:field>
                            <flux:label>Image URL or path</flux:label>
                            <flux:input
                                wire:model="value"
                                type="text"
                                placeholder="https://example.com/logo.png or /images/logo.png"
                                :error="$errors->first('value')"
                            />
                            <flux:text class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">
                                Paste a full <strong>https://</strong> URL, a site path starting with <strong>/</strong>, or a storage path like <strong>settings/your-file.png</strong>. Uploading a file below replaces this value.
                            </flux:text>
                        </flux:field>
                        <flux:field>
                            <flux:label>Upload image</flux:label>
                            <flux:input
                                wire:model="file"
                                type="file"
                                accept="image/*"
                                :error="$errors->first('file')"
                            />
                            @if ($setting->value)
                                @php($previewUrl = $setting->fileValuePublicUrl())
                                <div class="mt-3">
                                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">Current preview:</flux:text>
                                    <div class="flex flex-wrap items-center gap-3 mt-2">
                                        @if ($previewUrl)
                                            <img src="{{ $previewUrl }}" alt="" class="w-16 h-16 object-contain rounded border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-1">
                                        @endif
                                        <flux:text class="text-xs text-zinc-600 dark:text-zinc-400 font-mono break-all max-w-full">{{ Str::limit($setting->value, 120) }}</flux:text>
                                    </div>
                                </div>
                            @endif
                        </flux:field>
                    @elseif ($type === 'text')
                        <flux:field>
                            <flux:label>Value</flux:label>
                            <flux:textarea
                                wire:model="value"
                                placeholder="Enter setting value"
                                rows="4"
                                :error="$errors->first('value')"
                            />
                        </flux:field>
                    @else
                        <flux:field>
                            <flux:label>Value</flux:label>
                            <flux:input
                                wire:model="value"
                                placeholder="Enter setting value"
                                :error="$errors->first('value')"
                            />
                        </flux:field>
                    @endif

                    <!-- Description -->
                    <flux:field>
                        <flux:label>Description</flux:label>
                        <flux:textarea
                            wire:model="description"
                            placeholder="Enter setting description"
                            rows="3"
                            :error="$errors->first('description')"
                        />
                    </flux:field>
                </div>
            </flux:card>
        </div>

        <!-- Current Setting Info -->
        <flux:card class="p-6">
            <flux:heading size="lg" class="text-zinc-900 dark:text-zinc-100 mb-4">
                Current Setting Information
            </flux:heading>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <flux:text class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Created</flux:text>
                    <flux:text class="text-sm text-zinc-900 dark:text-zinc-100">
                        {{ $setting->created_at->format('M j, Y g:i A') }}
                    </flux:text>
                </div>
                <div>
                    <flux:text class="text-sm font-medium text-zinc-500 dark:text-zinc-400">Last Updated</flux:text>
                    <flux:text class="text-sm text-zinc-900 dark:text-zinc-100">
                        {{ $setting->updated_at->format('M j, Y g:i A') }}
                    </flux:text>
                </div>
            </div>
        </flux:card>

        <!-- Submit Button -->
        <div class="flex justify-end">
            <flux:button
                type="submit"
                variant="primary"
                icon="check"
            >
                Update Setting
            </flux:button>
        </div>
    </form>
</div>
