---
import DashboardLayout from '../../layouts/DashboardLayout.astro';
import Avatar from '../../components/Avatar.astro';
import StatCard from '../../components/StatCard.astro';
import { db } from '../../db';
import { siteSettings, users } from '../../db/schema';
import { eq } from 'drizzle-orm';

const user = Astro.locals.user;
if (!user || !user.isSiteAdmin) {
  return Astro.redirect('/dashboard');
}

const registrationSetting = await db.select()
  .from(siteSettings)
  .where(eq(siteSettings.key, 'registration_enabled'))
  .get();

const registrationEnabled = registrationSetting?.value === 'true';

const allUsers = await db.select().from(users).all();
---

<DashboardLayout title="Site Admin - Chronus">
  <div class="mb-6">
    <h1 class="text-2xl font-extrabold tracking-tight">Site Administration</h1>
    <p class="text-base-content/60 text-sm mt-1">Manage users and site settings</p>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-6">
    <StatCard
      title="Total Users"
      value={String(allUsers.length)}
      description="Registered accounts"
      icon="users"
      color="text-primary"
    />
  </div>

  <!-- Settings -->
  <div class="card card-border bg-base-100 mb-6">
    <div class="card-body p-4">
      <h2 class="text-sm font-semibold flex items-center gap-2 mb-4">Site Settings</h2>

      <form method="POST" action="/api/admin/settings">
        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Allow New Registrations</legend>
          <input
            type="checkbox"
            name="registration_enabled"
            class="toggle toggle-primary shrink-0"
            checked={registrationEnabled}
          />
        </fieldset>

        <div class="flex justify-end mt-4">
          <button type="submit" class="btn btn-primary btn-sm">Save Settings</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Users List -->
  <div class="card card-border bg-base-100">
    <div class="card-body p-0">
      <div class="px-4 py-3 border-b border-base-content/20">
        <h2 class="text-sm font-semibold">All Users</h2>
      </div>
      <div class="overflow-x-auto">
        <table class="table table-sm">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Site Admin</th>
              <th>Created</th>
            </tr>
          </thead>
          <tbody>
            {allUsers.map(u => (
              <tr class="hover">
                <td>
                  <div class="flex items-center gap-3">
                    <Avatar name={u.name} />
                    <div class="font-medium">{u.name}</div>
                  </div>
                </td>
                <td class="text-base-content/60">{u.email}</td>
                <td>
                  {u.isSiteAdmin ? (
                    <span class="badge badge-xs badge-primary">Yes</span>
                  ) : (
                    <span class="badge badge-xs badge-ghost">No</span>
                  )}
                </td>
                <td class="text-base-content/60">{u.createdAt?.toLocaleDateString() ?? 'N/A'}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</DashboardLayout>