@extends('admin.layouts.app')

@section('title', 'Settings')
@section('page_title', 'Global Settings')

@section('content')
@php
    $platformOptions = ['linkedin','facebook','instagram','youtube','x','tiktok','threads','pinterest','github','dribbble','behance','whatsapp','telegram','discord','reddit','custom'];
@endphp

<div class="settings-studio">
    <div class="settings-studio__hero">
        <p class="settings-studio__eyebrow">Site configuration</p>
        <h1 class="settings-studio__title">Global settings</h1>
        <p class="settings-studio__lead">
            Control branding, SEO fallbacks, social profiles, CTAs, analytics, and more — without touching code.
        </p>
    </div>

    <div class="settings-studio__shell">
        <nav class="settings-studio__tabs" aria-label="Settings sections">
            @foreach ($tabs as $key => $meta)
                <a href="{{ route('admin.settings.edit', ['tab' => $key]) }}"
                   class="settings-studio__tab {{ $tab === $key ? 'is-active' : '' }}">
                    <span class="settings-studio__tab-dot"></span>
                    <span>
                        {{ $meta['label'] }}
                        <span class="block text-[10px] font-medium opacity-70">{{ $meta['hint'] }}</span>
                    </span>
                </a>
            @endforeach
        </nav>

        <form method="POST" action="{{ route('admin.settings.update') }}" class="settings-studio__body">
            @csrf
            @method('PUT')
            <input type="hidden" name="tab" value="{{ $tab }}">

            @foreach ($sections as $section => $sectionFields)
                <section class="settings-panel">
                    <header class="settings-panel__head">
                        <h2>{{ $section }}</h2>
                    </header>
                    <div class="settings-panel__grid">
                        @foreach ($sectionFields as $field)
                            @php
                                $key = $field['key'];
                                $type = $field['type'];
                                $value = old($key, $values[$key] ?? ($field['default'] ?? ''));
                                $span = in_array($type, ['text', 'media', 'social_profiles', 'json'], true) || ($field['span'] ?? null) === 2;
                            @endphp
                            <div class="settings-field {{ $span ? 'settings-field--wide' : '' }}">
                                <label class="settings-label" for="field-{{ $key }}">
                                    {{ $field['label'] ?? Str::title(str_replace('_', ' ', $key)) }}
                                </label>
                                @if (! empty($field['help']))
                                    <p class="settings-help">{{ $field['help'] }}</p>
                                @endif

                                @if ($type === 'boolean')
                                    <input type="hidden" name="{{ $key }}" value="0">
                                    <label class="settings-switch">
                                        <input type="checkbox" name="{{ $key }}" id="field-{{ $key }}" value="1" @checked(filter_var($value, FILTER_VALIDATE_BOOLEAN))>
                                        <span>Enabled</span>
                                    </label>
                                @elseif ($type === 'color')
                                    <div class="settings-color">
                                        <input type="color" name="{{ $key }}" id="field-{{ $key }}" value="{{ $value ?: '#000000' }}">
                                        <input type="text" value="{{ $value }}" class="settings-input" readonly onclick="this.previousElementSibling.click()">
                                    </div>
                                @elseif ($type === 'text')
                                    <textarea name="{{ $key }}" id="field-{{ $key }}" rows="4" class="settings-textarea">{{ is_array($value) ? json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) : $value }}</textarea>
                                @elseif ($type === 'json')
                                    <textarea name="{{ $key }}" id="field-{{ $key }}" rows="5" class="settings-textarea font-mono text-xs">{{ is_array($value) ? json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) : (string) $value }}</textarea>
                                @elseif ($type === 'select')
                                    <select name="{{ $key }}" id="field-{{ $key }}" class="settings-select">
                                        @foreach (($field['options'] ?? []) as $optVal => $optLabel)
                                            <option value="{{ $optVal }}" @selected((string) $value === (string) $optVal)>{{ $optLabel }}</option>
                                        @endforeach
                                    </select>
                                @elseif ($type === 'media')
                                    <x-admin.media-picker
                                        mode="url"
                                        :name="$key"
                                        :value="is_string($value) ? $value : ''"
                                        :label="$field['label'] ?? 'Select image'"
                                        :help="$field['help'] ?? null"
                                    />
                                @elseif ($type === 'social_profiles')
                                    @php $profiles = is_array($value) ? array_values($value) : []; @endphp
                                    <div
                                        class="social-builder"
                                        x-data="socialProfilesEditor(@js($profiles))"
                                    >
                                        <template x-for="(row, index) in rows" :key="index">
                                            <div class="social-builder__row">
                                                <div class="social-builder__grid">
                                                    <div>
                                                        <label class="settings-label">Platform</label>
                                                        <input type="text" list="social-platforms" :name="'{{ $key }}['+index+'][platform]'" x-model="row.platform" class="settings-input" placeholder="linkedin">
                                                    </div>
                                                    <div>
                                                        <label class="settings-label">Label</label>
                                                        <input type="text" :name="'{{ $key }}['+index+'][label]'" x-model="row.label" class="settings-input" placeholder="LinkedIn">
                                                    </div>
                                                    <div class="social-builder__url">
                                                        <label class="settings-label">URL</label>
                                                        <input type="url" :name="'{{ $key }}['+index+'][url]'" x-model="row.url" class="settings-input" placeholder="https://…">
                                                    </div>
                                                    <div class="social-builder__toggle">
                                                        <input type="hidden" :name="'{{ $key }}['+index+'][enabled]'" :value="row.enabled ? 1 : 0">
                                                        <label class="settings-switch">
                                                            <input type="checkbox" x-model="row.enabled">
                                                            <span>On</span>
                                                        </label>
                                                        <button type="button" class="social-builder__remove" @click="remove(index)" aria-label="Remove">Remove</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>

                                        <datalist id="social-platforms">
                                            @foreach ($platformOptions as $p)
                                                <option value="{{ $p }}"></option>
                                            @endforeach
                                        </datalist>

                                        <button type="button" class="home-btn home-btn--ghost home-btn--sm mt-3" @click="add()">
                                            + Add social profile
                                        </button>
                                        <p class="settings-help mt-2">Add as many networks as you need. Empty URL rows are ignored on save. Enabled profiles sync into Schema → sameAs.</p>
                                    </div>
                                @elseif ($type === 'integer')
                                    <input type="number" name="{{ $key }}" id="field-{{ $key }}" value="{{ $value }}" class="settings-input">
                                @else
                                    <input type="{{ $type === 'url' ? 'url' : 'text' }}" name="{{ $key }}" id="field-{{ $key }}" value="{{ is_array($value) ? json_encode($value) : $value }}" class="settings-input">
                                @endif
                            </div>
                        @endforeach
                    </div>
                </section>
            @endforeach

            @can('update', \App\Modules\Settings\Models\Setting::class)
                <div class="settings-studio__footer">
                    <button type="submit" class="home-btn home-btn--primary">Save {{ $tabs[$tab]['label'] ?? 'settings' }}</button>
                </div>
            @endcan
        </form>
    </div>
</div>
@endsection