<script setup>
import { ref } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import DataTableClient from "@/Components/DataTable/DataTableClient.vue";

const props = defineProps({
  example: { type: String, default: "Demo" },
});

// Dummy columns
const columns = [
  { key: "id", label: "ID", sortable: true, class: "w-16" },
  { key: "name", label: "Ime", sortable: true },
  { key: "email", label: "Email", sortable: true },
  {
    key: "balance",
    label: "Stanje",
    sortable: true,
    align: "right",
    formatter: (row) =>
      new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
        row.balance
      ),
  },
  { key: "created_at", label: "Ustvarjeno", sortable: true },
];

// Generate some dummy rows
function makeRow(i) {
  const bal = Math.round((Math.random() * 5000 - 1000) * 100) / 100;
  const dt = new Date(Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 90));
  const iso = dt.toISOString().slice(0, 10);
  return {
    id: i + 1,
    name: `Uporabnik ${i + 1}`,
    email: `user${i + 1}@example.com`,
    balance: bal,
    created_at: iso,
  };
}
// Increase dataset to visualize multi-page pagination (e.g., 100 pages at size 10)
const rows = ref(Array.from({ length: 1000 }, (_, i) => makeRow(i)));

// Controls (two-way bound)
const sort = ref({ key: null, direction: null });
const search = ref("");
const page = ref(1);
const pageSize = ref(10);
const searchKeys = ["name", "email"];

function onRowClick(row) {
  // no-op demo; could show toast or details
  console.debug("Row clicked:", row);
}
</script>

<template>
  <AppLayout title="Testing Sandbox">
    <div class="space-y-6 p-6">
      <div class="prose dark:prose-invert max-w-none">
        <h1 class="text-2xl font-semibold">Testing Page</h1>
        <p>
          This page is for quick UI or component experiments. Remove or adapt as needed.
        </p>
        <p class="text-slate-700 dark:text-slate-200 text-sm">
          Prop example value: <span class="font-mono">{{ props.example }}</span>
        </p>
      </div>

      <div
        class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm"
      >
        <h2
          class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3"
        >
          DataTable (Client-side)
        </h2>
        <DataTableClient
          :columns="columns"
          :rows="rows"
          v-model:sort="sort"
          v-model:search="search"
          v-model:page="page"
          v-model:pageSize="pageSize"
          :search-keys="searchKeys"
          @row:click="onRowClick"
        >
          <template #actions="{ row }">
            <button
              class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-xs"
            >
              Akcija
            </button>
          </template>
        </DataTableClient>
      </div>
    </div>
  </AppLayout>
</template>
