<script setup lang="ts">
import { Head, router } from '@inertiajs/vue3'
import { AlertTriangle } from 'lucide-vue-next'
import { ref } from 'vue'
import Button from '@/components/ui/button.vue'
import Input from '@/components/ui/input.vue'
import Label from '@/components/ui/label.vue'
import Select from '@/components/ui/select.vue'
import UserLayout from '@/layouts/user/userlayout.vue'

// Local state for forms (no persistence yet — posts to placeholder endpoint)
const lossLimitDaily = ref<string>('')
const lossLimitWeekly = ref<string>('')
const lossLimitMonthly = ref<string>('')

const wagerLimitDaily = ref<string>('')

const sessionLimitMinutes = ref<string>('')

const timeoutDuration = ref<string>('')

function submitLimits() {
  router.post('/responsible/limits', {
    lossLimitDaily: lossLimitDaily.value || null,
    lossLimitWeekly: lossLimitWeekly.value || null,
    lossLimitMonthly: lossLimitMonthly.value || null,
    wagerLimitDaily: wagerLimitDaily.value || null,
    sessionLimitMinutes: sessionLimitMinutes.value || null,
    timeoutDuration: timeoutDuration.value || null,
  })
}
</script>

<template>
  <UserLayout>
    <Head title="Self Exclusion" />

    <section class="content">
      <div class="wrap">
        <!-- Intro panel -->
        <div class="panel">
          <div class="section-head">
            <h2>Responsible Gaming</h2>
            <div class="view-all">Self Exclusion</div>
          </div>
          <div class="panel-body">
            <p class="muted">Setze persönliche Limits und nimm bei Bedarf eine Spielpause. Behalte jederzeit die Kontrolle über dein Spielverhalten.</p>
          </div>
        </div>

        <!-- Verlustlimits -->
        <div class="panel">
          <div class="section-head">
            <h2>Verlustlimits</h2>
          </div>
          <div class="panel-body">
            <p class="muted">Begrenze, wie viel du in einem bestimmten Zeitraum maximal verlieren möchtest.</p>
            <div class="form-row three">
              <div class="field">
                <Label for="lossDaily">Tageslimit</Label>
                <Input id="lossDaily" v-model="lossLimitDaily" type="number" min="0" placeholder="z. B. 100" />
              </div>
              <div class="field">
                <Label for="lossWeekly">Wochenlimit</Label>
                <Input id="lossWeekly" v-model="lossLimitWeekly" type="number" min="0" placeholder="z. B. 300" />
              </div>
              <div class="field">
                <Label for="lossMonthly">Monatslimit</Label>
                <Input id="lossMonthly" v-model="lossLimitMonthly" type="number" min="0" placeholder="z. B. 1000" />
              </div>
            </div>
          </div>
        </div>

        <!-- Einsatzlimits -->
        <div class="panel">
          <div class="section-head">
            <h2>Einsatzlimits</h2>
          </div>
          <div class="panel-body">
            <p class="muted">Lege fest, wie viel du pro Tag maximal einsetzen möchtest.</p>
            <div class="form-row one">
              <div class="field">
                <Label for="wagerDaily">Tägliches Einsatzlimit</Label>
                <Input id="wagerDaily" v-model="wagerLimitDaily" type="number" min="0" placeholder="z. B. 200" />
              </div>
            </div>
          </div>
        </div>

        <!-- Spielpause -->
        <div class="panel">
          <div class="section-head">
            <h2>Spielpause</h2>
          </div>
          <div class="panel-body">
            <p class="muted">Lege eine Auszeit fest. Während der gewählten Dauer kannst du dich nicht einloggen und nicht spielen.</p>
            <div class="form-row one">
              <div class="field">
                <Label for="timeout">Dauer wählen</Label>
                <Select id="timeout" v-model="timeoutDuration" :options="[
                  { label: 'Keine', value: '' },
                  { label: '1 Tag', value: '1d' },
                  { label: '3 Tage', value: '3d' },
                  { label: '7 Tage', value: '7d' },
                  { label: '14 Tage', value: '14d' },
                  { label: '1 Monat', value: '1m' },
                  { label: '3 Monate', value: '3m' },
                  { label: '6 Monate', value: '6m' }
                ]" placeholder="Dauer wählen" />
              </div>
            </div>
            <div class="warning">
              <AlertTriangle class="w-4 h-4" />
              <span>Hinweis: Eine Spielpause kann nicht rückgängig gemacht werden und gilt sofort.</span>
            </div>
          </div>
        </div>

        <!-- Sitzungslimits -->
        <div class="panel">
          <div class="section-head">
            <h2>Sitzungslimits</h2>
          </div>
          <div class="panel-body">
            <p class="muted">Lege fest, wie lange eine einzelne Spielsitzung maximal dauern darf.</p>
            <div class="form-row one">
              <div class="field">
                <Label for="sessionLimit">Minuten pro Sitzung</Label>
                <Input id="sessionLimit" v-model="sessionLimitMinutes" type="number" min="0" placeholder="z. B. 60" />
              </div>
            </div>
          </div>
        </div>

        <!-- Aktionen -->
        <div class="panel">
          <div class="panel-body actions">
            <Button class="btn-primary" @click="submitLimits">Speichern</Button>
            <Button variant="outline" @click="router.visit('/wallet')">Abbrechen</Button>
          </div>
        </div>
      </div>
    </section>
  </UserLayout>
</template>

<style scoped>
/* Align with User.vue layout */
.content { padding: 30px; padding-bottom: 30px; }
.wrap { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }

.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; animation: fade-in 0.8s cubic-bezier(0.2, 0, 0, 1); }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.section-head { padding: 25px 20px 10px; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--border); }
.section-head h2 { margin: 0; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #444; }
.view-all { font-size: 10px; color: var(--cyan); font-weight: 900; text-transform: uppercase; }

.panel-body { padding: 20px; }
.muted { color: #777; font-size: 12px; font-weight: 700; margin: 0 0 12px; }

.form-row { display: grid; gap: 12px; }
.form-row.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form-row.one { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 8px; }

.warning { display: flex; align-items: center; gap: 10px; border: 1px solid #111; background: #050505; padding: 12px 14px; border-radius: 12px; color: #facc15; font-weight: 800; }

.actions { display: flex; gap: 12px; align-items: center; }
.btn-primary { background: var(--cyan); color: #000; border: none; }

:global(:root) {
  --bg-card: #0a0a0a;
  --border: #151515;
  --magenta: #ff007a;
  --cyan: #00f2ff;
  --green: #00ff9d;
  --gold: #f7931a;
}
</style>
