@extends('admin.layouts.app')

@section('admin-content')
    <div class="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">System Settings</h1>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Update payments, AI Studio and WhatsApp configuration.</p>
        </div>
    </div>

    @if (session('status'))
        <div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200">
            {{ session('status') }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.settings.update') }}" class="mt-6 space-y-8">
        @csrf

        <!-- Payments -->
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="text-lg font-semibold">Payments</h2>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Deposit amount, currency, gateway toggles & API keys.</p>

            <div class="mt-5 grid gap-4 md:grid-cols-2">
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="payments.deposit_amount">
                        Deposit Amount (TND)
                    </label>
                    <input
                        id="payments.deposit_amount"
                        name="payments.deposit_amount"
                        type="number"
                        step="0.01"
                        min="0"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('payments.deposit_amount', $settings['payments.deposit_amount'] ?? '20') }}"
                        required
                    />
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-zinc-800 dark:text-zinc-100" for="payments.currency">
                        Currency
                    </label>
                    <input
                        id="payments.currency"
                        name="payments.currency"
                        type="text"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('payments.currency', $settings['payments.currency'] ?? 'TND') }}"
                        required
                        maxlength="3"
                    />
                    <div class="text-xs text-zinc-500 dark:text-zinc-400">
                        PRD default is `TND`.
                    </div>
                </div>
            </div>

            <div class="mt-6 grid gap-4 lg:grid-cols-3">
                <!-- Stripe -->
                <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900/40">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold">Stripe</div>
                            <div class="text-xs text-zinc-500 dark:text-zinc-400">Deposit checkout</div>
                        </div>
                        <div>
                            <input type="hidden" name="payments.gateway.stripe.active" value="0">
                            <label class="inline-flex items-center gap-2 text-sm">
                                <input
                                    type="checkbox"
                                    name="payments.gateway.stripe.active"
                                    value="1"
                                    {{ ($settings['payments.gateway.stripe.active'] ?? '0') === '1' ? 'checked' : '' }}
                                    class="h-4 w-4 accent-[#FF2D20]"
                                />
                                Active
                            </label>
                        </div>
                    </div>

                    <div class="mt-4 space-y-2">
                        <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-200" for="payments.gateway.stripe.secret_key">Secret Key</label>
                        <input
                            id="payments.gateway.stripe.secret_key"
                            name="payments.gateway.stripe.secret_key"
                            type="text"
                            class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100"
                            value="{{ old('payments.gateway.stripe.secret_key', $settings['payments.gateway.stripe.secret_key'] ?? '') }}"
                        />
                    </div>
                </div>

                <!-- PayPal -->
                <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900/40">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold">PayPal</div>
                            <div class="text-xs text-zinc-500 dark:text-zinc-400">Approval redirect</div>
                        </div>
                        <div>
                            <input type="hidden" name="payments.gateway.paypal.active" value="0">
                            <label class="inline-flex items-center gap-2 text-sm">
                                <input
                                    type="checkbox"
                                    name="payments.gateway.paypal.active"
                                    value="1"
                                    {{ ($settings['payments.gateway.paypal.active'] ?? '0') === '1' ? 'checked' : '' }}
                                    class="h-4 w-4 accent-[#FF2D20]"
                                />
                                Active
                            </label>
                        </div>
                    </div>

                    <div class="mt-4 space-y-3">
                        <div class="space-y-2">
                            <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-200" for="payments.gateway.paypal.client_id">Client ID</label>
                            <input
                                id="payments.gateway.paypal.client_id"
                                name="payments.gateway.paypal.client_id"
                                type="text"
                                class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100"
                                value="{{ old('payments.gateway.paypal.client_id', $settings['payments.gateway.paypal.client_id'] ?? '') }}"
                            />
                        </div>
                        <div class="space-y-2">
                            <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-200" for="payments.gateway.paypal.client_secret">Client Secret</label>
                            <input
                                id="payments.gateway.paypal.client_secret"
                                name="payments.gateway.paypal.client_secret"
                                type="text"
                                class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100"
                                value="{{ old('payments.gateway.paypal.client_secret', $settings['payments.gateway.paypal.client_secret'] ?? '') }}"
                            />
                        </div>
                        <div class="space-y-2">
                            <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-200" for="payments.gateway.paypal.environment">Environment</label>
                            <select
                                id="payments.gateway.paypal.environment"
                                name="payments.gateway.paypal.environment"
                                class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100"
                            >
                                @php $env = old('payments.gateway.paypal.environment', $settings['payments.gateway.paypal.environment'] ?? 'sandbox'); @endphp
                                <option value="sandbox" {{ $env === 'sandbox' ? 'selected' : '' }}>sandbox</option>
                                <option value="live" {{ $env === 'live' ? 'selected' : '' }}>live</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- PayTabs -->
                <div class="rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900/40">
                    <div class="flex items-start justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold">PayTabs</div>
                            <div class="text-xs text-zinc-500 dark:text-zinc-400">Hosted Payment Page</div>
                        </div>
                        <div>
                            <input type="hidden" name="payments.gateway.paytabs.active" value="0">
                            <label class="inline-flex items-center gap-2 text-sm">
                                <input
                                    type="checkbox"
                                    name="payments.gateway.paytabs.active"
                                    value="1"
                                    {{ ($settings['payments.gateway.paytabs.active'] ?? '0') === '1' ? 'checked' : '' }}
                                    class="h-4 w-4 accent-[#FF2D20]"
                                />
                                Active
                            </label>
                        </div>
                    </div>

                    <div class="mt-4 space-y-3">
                        <div class="space-y-2">
                            <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-200" for="payments.gateway.paytabs.api_key">API Key</label>
                            <input
                                id="payments.gateway.paytabs.api_key"
                                name="payments.gateway.paytabs.api_key"
                                type="text"
                                class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100"
                                value="{{ old('payments.gateway.paytabs.api_key', $settings['payments.gateway.paytabs.api_key'] ?? '') }}"
                            />
                        </div>
                        <div class="space-y-2">
                            <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-200" for="payments.gateway.paytabs.profile_id">Profile ID</label>
                            <input
                                id="payments.gateway.paytabs.profile_id"
                                name="payments.gateway.paytabs.profile_id"
                                type="text"
                                class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100"
                                value="{{ old('payments.gateway.paytabs.profile_id', $settings['payments.gateway.paytabs.profile_id'] ?? '') }}"
                            />
                        </div>
                        <div class="space-y-2">
                            <label class="block text-xs font-medium text-zinc-700 dark:text-zinc-200" for="payments.gateway.paytabs.endpoint">Endpoint URL</label>
                            <input
                                id="payments.gateway.paytabs.endpoint"
                                name="payments.gateway.paytabs.endpoint"
                                type="text"
                                class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100"
                                value="{{ old('payments.gateway.paytabs.endpoint', $settings['payments.gateway.paytabs.endpoint'] ?? 'https://secure.paytabs.sa/payment/request') }}"
                            />
                        </div>
                    </div>
                </div>
            </div>

            <!-- Paymee toggle (inactive until implemented) -->
            <div class="mt-4">
                <div class="flex items-center justify-between rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-900/40">
                    <div>
                        <div class="text-sm font-semibold">Paymee / Flouci (placeholder)</div>
                        <div class="text-xs text-zinc-500 dark:text-zinc-400">Integration not implemented yet in Phase 4/5.</div>
                    </div>
                    <div>
                        <input type="hidden" name="payments.gateway.paymee.active" value="0">
                        <label class="inline-flex items-center gap-2 text-sm">
                            <input
                                type="checkbox"
                                name="payments.gateway.paymee.active"
                                value="1"
                                {{ ($settings['payments.gateway.paymee.active'] ?? '0') === '1' ? 'checked' : '' }}
                                class="h-4 w-4 accent-[#FF2D20]"
                            />
                            Active
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- AI Studio -->
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="text-lg font-semibold">AI Studio</h2>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Gemini API configuration used by `/ai-studio/generate`.</p>

            <div class="mt-5 grid gap-4 md:grid-cols-2">
                <div class="space-y-2">
                    <label for="ai.gemini.api_key" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Gemini API Key</label>
                    <input
                        id="ai.gemini.api_key"
                        name="ai.gemini.api_key"
                        type="text"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('ai.gemini.api_key', $settings['ai.gemini.api_key'] ?? '') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label for="ai.gemini.model" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Model</label>
                    <select
                        id="ai.gemini.model"
                        name="ai.gemini.model"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    >
                        @php $model = old('ai.gemini.model', $settings['ai.gemini.model'] ?? 'gemini-1.5-pro-vision-latest'); @endphp
                        <option value="gemini-1.5-pro-vision-latest" {{ $model === 'gemini-1.5-pro-vision-latest' ? 'selected' : '' }}>
                            gemini-1.5-pro-vision-latest
                        </option>
                        <option value="gemini-1.5-flash-latest" {{ $model === 'gemini-1.5-flash-latest' ? 'selected' : '' }}>
                            gemini-1.5-flash-latest
                        </option>
                        <option value="gemini-1.5-pro-latest" {{ $model === 'gemini-1.5-pro-latest' ? 'selected' : '' }}>
                            gemini-1.5-pro-latest
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <!-- WhatsApp -->
        <div class="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-950">
            <h2 class="text-lg font-semibold">WhatsApp</h2>
            <p class="mt-1 text-sm text-zinc-600 dark:text-zinc-300">Messages are sent using stateless HTTP REST calls.</p>

            <div class="mt-5 grid gap-4 md:grid-cols-2">
                <div class="space-y-2">
                    <label for="whatsapp.provider" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Provider</label>
                    @php $provider = old('whatsapp.provider', $settings['whatsapp.provider'] ?? 'cloud'); @endphp
                    <select
                        id="whatsapp.provider"
                        name="whatsapp.provider"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                    >
                        <option value="cloud" {{ $provider === 'cloud' ? 'selected' : '' }}>cloud</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="whatsapp.cloud.api_key" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">API Key</label>
                    <input
                        id="whatsapp.cloud.api_key"
                        name="whatsapp.cloud.api_key"
                        type="text"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('whatsapp.cloud.api_key', $settings['whatsapp.cloud.api_key'] ?? '') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label for="whatsapp.cloud.phone_number_id" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Phone Number ID</label>
                    <input
                        id="whatsapp.cloud.phone_number_id"
                        name="whatsapp.cloud.phone_number_id"
                        type="text"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('whatsapp.cloud.phone_number_id', $settings['whatsapp.cloud.phone_number_id'] ?? '') }}"
                    />
                </div>

                <div class="space-y-2">
                    <label for="whatsapp.cloud.api_version" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">API Version</label>
                    <input
                        id="whatsapp.cloud.api_version"
                        name="whatsapp.cloud.api_version"
                        type="text"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('whatsapp.cloud.api_version', $settings['whatsapp.cloud.api_version'] ?? 'v20.0') }}"
                    />
                </div>

                <div class="space-y-2 md:col-span-2">
                    <label for="whatsapp.cloud.endpoint_base" class="block text-sm font-medium text-zinc-800 dark:text-zinc-100">Endpoint Base</label>
                    <input
                        id="whatsapp.cloud.endpoint_base"
                        name="whatsapp.cloud.endpoint_base"
                        type="text"
                        class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100"
                        value="{{ old('whatsapp.cloud.endpoint_base', $settings['whatsapp.cloud.endpoint_base'] ?? 'https://graph.facebook.com') }}"
                    />
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3">
            <button type="submit" class="rounded-xl bg-[#FF2D20] px-6 py-3 text-sm font-semibold text-white hover:opacity-95">
                Save Settings
            </button>
        </div>
    </form>
@endsection