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

const props = defineProps<{
  settings: {
    pin_max_attempts: number;
    pin_lock_minutes: number;
    min_tx_btx: number;
    max_tx_btx: number;
    daily_max_btx: number;
    actions_per_minute: number;
    reason_required: boolean;
  };
  defaults: Record<string, any>;
}>();

const form = useForm({
  pin_max_attempts: props.settings.pin_max_attempts ?? 5,
  pin_lock_minutes: props.settings.pin_lock_minutes ?? 15,
  min_tx_btx: props.settings.min_tx_btx ?? 0.0001,
  max_tx_btx: props.settings.max_tx_btx ?? 100000,
  daily_max_btx: props.settings.daily_max_btx ?? 100000,
  actions_per_minute: props.settings.actions_per_minute ?? 20,
  reason_required: props.settings.reason_required ?? true,
});

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

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

<template>
  <AdminLayout>
    <Head title="Admin – Wallet Einstellungen" />

    <section class="content">
      <div class="wrap">
        <div class="panel">
          <header class="page-head">
            <div class="head-flex">
              <div class="title-group">
                <div class="title">Wallet/Vault – Einstellungen</div>
                <p class="subtitle">PIN‑Policy, Limits, Throttles und Vorgaben für manuelle Anpassungen.</p>
              </div>
              <div class="actions">
                <button class="btn primary" @click="submit" :disabled="form.processing">
                  <i data-lucide="save"></i>
                  Speichern
                </button>
              </div>
            </div>
          </header>

          <div class="grid">
            <div class="card">
              <h3>Vault PIN Policy</h3>
              <div class="row">
                <label>Max Fehlversuche</label>
                <input type="number" min="1" max="20" v-model.number="form.pin_max_attempts" />
              </div>
              <div class="row">
                <label>Sperrdauer (Minuten)</label>
                <input type="number" min="1" max="1440" v-model.number="form.pin_lock_minutes" />
              </div>
            </div>

            <div class="card">
              <h3>Transfer‑Limits (BTX)</h3>
              <div class="row">
                <label>Minimum pro Transaktion</label>
                <input type="number" step="0.0001" min="0" v-model.number="form.min_tx_btx" />
              </div>
              <div class="row">
                <label>Maximum pro Transaktion</label>
                <input type="number" step="0.0001" min="0" v-model.number="form.max_tx_btx" />
              </div>
              <div class="row">
                <label>Tagesmaximum</label>
                <input type="number" step="0.0001" min="0" v-model.number="form.daily_max_btx" />
              </div>
            </div>

            <div class="card">
              <h3>Throttling</h3>
              <div class="row">
                <label>Aktionen pro Minute</label>
                <input type="number" min="1" max="600" v-model.number="form.actions_per_minute" />
              </div>
            </div>

            <div class="card">
              <h3>Manuelle Anpassungen</h3>
              <div class="row checkbox">
                <label>
                  <input type="checkbox" v-model="form.reason_required" />
                  Grund verpflichtend
                </label>
              </div>
              <small>Empfohlen aktiviert: Alle manuellen Gutschriften/Abzüge erfordern einen dokumentierten Grund.</small>
            </div>
          </div>

          <div class="foot">
            <button class="btn primary" @click="submit" :disabled="form.processing">
              <i data-lucide="save"></i>
              Speichern
            </button>
          </div>
        </div>
      </div>
    </section>
  </AdminLayout>
</template>

<style scoped>
.content { padding: 20px; }
.wrap { max-width: 1100px; margin: 0 auto; }
.panel { background: #0f0f10; border: 1px solid #18181b; border-radius: 12px; padding: 16px; }
.page-head .title { font-size: 22px; font-weight: 700; }
.subtitle { color: #a1a1aa; margin-top: 4px; }
.actions { display: flex; gap: 10px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
.card { background: #0b0b0c; border: 1px solid #1f1f22; border-radius: 10px; padding: 14px; }
.card h3 { margin: 0 0 10px 0; font-size: 16px; }
.row { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 10px; margin: 10px 0; }
.row.checkbox { grid-template-columns: 1fr; }
label { font-weight: 600; color: #cbd5e1; }
input, select { width: 100%; background: #0b0b0c; border: 1px solid #1f1f22; border-radius: 8px; padding: 10px; color: #e5e7eb; }
.btn { background: #1f2937; border: 1px solid #374151; color: #e5e7eb; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.btn.primary { background: #ff007a; border-color: #ff2b8f; color: white; }
.foot { display: flex; justify-content: flex-end; margin-top: 16px; }
</style>
