<script setup lang="ts">
import { Head, useForm } from '@inertiajs/vue3';
import { onMounted, nextTick } from 'vue';
import CasinoAdminLayout from '@/layouts/admin/CasinoAdminLayout.vue';

const props = defineProps<{
    settings: {
        site_name: string;
        site_tagline: string;
        primary_color: string;
        logo_url: string;
        favicon_url: string;
        maintenance_mode: boolean;
        registration_open: boolean;
        min_deposit_usd: number;
        max_deposit_usd: number;
        min_withdrawal_usd: number;
        max_withdrawal_usd: number;
        max_bet_usd: number;
        house_edge_percent: number;
        footer_text: string;
        support_email: string;
        terms_url: string;
        privacy_url: string;
        currency_symbol: string;
    };
}>();

const form = useForm({ ...props.settings });

function submit() {
    form.post('/admin/settings/site', { preserveScroll: true });
}

onMounted(() => {
    nextTick(() => { if ((window as any).lucide) (window as any).lucide.createIcons(); });
});
</script>

<template>
    <CasinoAdminLayout>
        <Head title="Admin – Site Settings" />

        <template #title>Site Einstellungen</template>

        <div class="page-wrap">
            <!-- Flash -->
            <div v-if="($page.props as any).flash?.success" class="alert-success">
                <i data-lucide="check-circle"></i>
                {{ ($page.props as any).flash.success }}
            </div>

            <!-- General -->
            <div class="card">
                <div class="card-head">
                    <div>
                        <h2>Allgemein</h2>
                        <p class="card-subtitle">Name, Branding und Design.</p>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-grid">
                        <div class="field">
                            <label class="field-label">Site-Name</label>
                            <input type="text" v-model="form.site_name" class="field-input" maxlength="100">
                            <div class="field-error" v-if="form.errors.site_name">{{ form.errors.site_name }}</div>
                        </div>
                        <div class="field">
                            <label class="field-label">Slogan</label>
                            <input type="text" v-model="form.site_tagline" class="field-input" maxlength="200">
                        </div>
                        <div class="field">
                            <label class="field-label">Primärfarbe (Hex)</label>
                            <div class="color-row">
                                <input type="color" v-model="form.primary_color" class="color-picker">
                                <input type="text" v-model="form.primary_color" class="field-input" maxlength="7" placeholder="#df006a">
                            </div>
                        </div>
                        <div class="field">
                            <label class="field-label">Währungssymbol</label>
                            <input type="text" v-model="form.currency_symbol" class="field-input" maxlength="10" placeholder="BTX">
                        </div>
                        <div class="field full">
                            <label class="field-label">Logo-URL</label>
                            <input type="url" v-model="form.logo_url" class="field-input" placeholder="https://...">
                        </div>
                        <div class="field full">
                            <label class="field-label">Favicon-URL</label>
                            <input type="url" v-model="form.favicon_url" class="field-input" placeholder="https://...">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Status Toggles -->
            <div class="card">
                <div class="card-head">
                    <div>
                        <h2>Status</h2>
                        <p class="card-subtitle">Wartungsmodus und Registrierung.</p>
                    </div>
                </div>
                <div class="card-body">
                    <div class="toggle-list">
                        <div class="toggle-row">
                            <div class="toggle-info">
                                <div class="toggle-label">
                                    <i data-lucide="wrench"></i>
                                    Wartungsmodus
                                </div>
                                <div class="toggle-desc">Nur Admins haben Zugang zur Seite.</div>
                            </div>
                            <button class="toggle-btn" :class="{ active: form.maintenance_mode }" @click="form.maintenance_mode = !form.maintenance_mode">
                                <span class="toggle-knob"></span>
                            </button>
                        </div>
                        <div class="toggle-row">
                            <div class="toggle-info">
                                <div class="toggle-label">
                                    <i data-lucide="user-plus"></i>
                                    Registrierung offen
                                </div>
                                <div class="toggle-desc">Neue Nutzer können sich registrieren.</div>
                            </div>
                            <button class="toggle-btn" :class="{ active: form.registration_open }" @click="form.registration_open = !form.registration_open">
                                <span class="toggle-knob"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Limits -->
            <div class="card">
                <div class="card-head">
                    <div>
                        <h2>Limits & House Edge</h2>
                        <p class="card-subtitle">Einzahlungs-, Auszahlungs- und Wettlimits sowie den Hausvorteil.</p>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-grid">
                        <div class="field">
                            <label class="field-label">Min. Einzahlung (USD)</label>
                            <input type="number" step="0.01" min="0" v-model.number="form.min_deposit_usd" class="field-input">
                        </div>
                        <div class="field">
                            <label class="field-label">Max. Einzahlung (USD)</label>
                            <input type="number" step="0.01" min="0" v-model.number="form.max_deposit_usd" class="field-input">
                        </div>
                        <div class="field">
                            <label class="field-label">Min. Auszahlung (USD)</label>
                            <input type="number" step="0.01" min="0" v-model.number="form.min_withdrawal_usd" class="field-input">
                        </div>
                        <div class="field">
                            <label class="field-label">Max. Auszahlung (USD)</label>
                            <input type="number" step="0.01" min="0" v-model.number="form.max_withdrawal_usd" class="field-input">
                        </div>
                        <div class="field">
                            <label class="field-label">Max. Wette (USD)</label>
                            <input type="number" step="0.01" min="0" v-model.number="form.max_bet_usd" class="field-input">
                        </div>
                        <div class="field">
                            <label class="field-label">House Edge (%)</label>
                            <input type="number" step="0.01" min="0" max="100" v-model.number="form.house_edge_percent" class="field-input">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact & Legal -->
            <div class="card">
                <div class="card-head">
                    <div>
                        <h2>Kontakt & Rechtliches</h2>
                        <p class="card-subtitle">Support-E-Mail, Fußzeilentext und Links zu AGB/Datenschutz.</p>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-grid">
                        <div class="field">
                            <label class="field-label">Support-E-Mail</label>
                            <input type="email" v-model="form.support_email" class="field-input" placeholder="support@example.com">
                        </div>
                        <div class="field">
                            <label class="field-label">AGB-URL</label>
                            <input type="text" v-model="form.terms_url" class="field-input" placeholder="/terms">
                        </div>
                        <div class="field">
                            <label class="field-label">Datenschutz-URL</label>
                            <input type="text" v-model="form.privacy_url" class="field-input" placeholder="/privacy">
                        </div>
                        <div class="field full">
                            <label class="field-label">Fußzeilentext</label>
                            <textarea v-model="form.footer_text" rows="3" class="field-input" maxlength="1000" placeholder="© 2024 BetiX Casino. Alle Rechte vorbehalten."></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="save-bar">
                <button class="btn-primary" @click="submit" :disabled="form.processing">
                    <i data-lucide="save"></i>
                    {{ form.processing ? 'Wird gespeichert...' : 'Alle Einstellungen speichern' }}
                </button>
            </div>
        </div>
    </CasinoAdminLayout>
</template>

<style scoped>
.page-wrap { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

.alert-success {
    background: rgba(0, 200, 100, 0.1); border: 1px solid rgba(0, 200, 100, 0.3);
    color: #00c864; padding: 12px 16px; border-radius: 10px;
    display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.alert-success i { width: 18px; height: 18px; flex-shrink: 0; }

.card { background: #0f0f10; border: 1px solid #18181b; border-radius: 14px; overflow: hidden; }
.card-head { padding: 20px 24px; border-bottom: 1px solid #18181b; }
.card-head h2 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.card-subtitle { color: #71717a; font-size: 12px; margin: 0; }
.card-body { padding: 20px 24px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field.full { grid-column: 1 / -1; }
.field-label { display: block; font-size: 11px; font-weight: 700; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.field-input {
    width: 100%; background: #18181b; border: 1px solid #27272a; border-radius: 8px;
    color: #e4e4e7; padding: 9px 12px; font-size: 13px; font-family: inherit;
    transition: border-color 0.15s; box-sizing: border-box;
}
.field-input:focus { outline: none; border-color: #df006a; }
textarea.field-input { resize: vertical; }
.field-error { color: #ff3e3e; font-size: 11px; margin-top: 4px; }

/* Color picker */
.color-row { display: flex; gap: 8px; align-items: center; }
.color-picker { width: 44px; height: 38px; padding: 2px; border: 1px solid #27272a; border-radius: 8px; background: #18181b; cursor: pointer; }
.color-row .field-input { flex: 1; }

/* Toggles */
.toggle-list { display: flex; flex-direction: column; gap: 0; }
.toggle-row {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 14px 0; border-bottom: 1px solid #18181b;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-info { display: flex; flex-direction: column; gap: 2px; }
.toggle-label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #e4e4e7; font-size: 14px; }
.toggle-label i { width: 16px; height: 16px; color: #71717a; }
.toggle-desc { color: #71717a; font-size: 12px; padding-left: 24px; }
.toggle-btn {
    width: 48px; height: 26px; border-radius: 99px; background: #27272a; border: none; cursor: pointer;
    position: relative; transition: background 0.2s; flex-shrink: 0;
}
.toggle-btn.active { background: #df006a; }
.toggle-knob {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.toggle-btn.active .toggle-knob { transform: translateX(22px); }

/* Save bar */
.save-bar { display: flex; justify-content: flex-end; padding: 4px 0; }
.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: #df006a; border: none; color: #fff; padding: 11px 22px;
    border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.btn-primary:hover { background: #b8005a; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary i { width: 16px; height: 16px; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .field.full { grid-column: 1; }
}
</style>
