---
export const prerender = false;

import DmLayout from "@/layouts/DmLayout.astro";
import DmCard from "@/components/dm/DmCard.astro";
import DmSidebar from "@/components/dm/DmSidebar.astro";
import DiceRoller from "@/components/dm/DiceRoller.astro";
import InitiativeTracker from "@/components/dm/InitiativeTracker.astro";
import Open5eReference from "@/components/dm/Open5eReference.astro";
import NotesPanel from "@/components/dm/NotesPanel.astro";
import { dmTranslations as T } from "@/i18n/dm-translations";
import { getRemainingQuota, TIER_LIMITS } from "@/lib/rate-limit";

const user = Astro.locals.user;
let quota = null;
if (user) {
  quota = await getRemainingQuota(user.id, user.tier);
}
---

<DmLayout>
  <!-- Sidebar slot (desktop only) -->
  <div slot="sidebar">
    <DmSidebar user={user ? { ...user, remaining: quota?.remaining ?? undefined, limit: quota ? TIER_LIMITS[user.tier] : undefined } : null} />
  </div>

  <!-- Main slot (dice + initiative) -->
  <div slot="main" class="space-y-6">
    <!-- Dice Roller -->
    <section id="dice" class="dm-tab-section">
      <div class="flex items-center gap-3 mb-3">
        <span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
        <h2 class="text-lg font-bold text-[var(--text-primary)]">
          {T.dice}
        </h2>
      </div>
      <DiceRoller />
    </section>

    <!-- Initiative Tracker -->
    <section id="initiative" class="dm-tab-section">
      <div class="flex items-center gap-3 mb-3">
        <span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
        <h2 class="text-lg font-bold text-[var(--text-primary)]">
          {T.initiative}
        </h2>
      </div>
      <InitiativeTracker />
    </section>

    <!-- AI Generator -->
    <section id="ai" class="dm-tab-section">
      <div class="flex items-center gap-3 mb-3">
        <span class="w-1 h-6 bg-[var(--accent)] rounded-full" aria-hidden="true"></span>
        <h2 class="text-lg font-bold text-[var(--text-primary)]">
          {T.ai}
        </h2>
      </div>
      <DmCard>
        {Astro.locals.user ? (
          <div class="p-6 text-center text-[var(--text-secondary)]">
            <p>{T.aiPlaceholder}</p>
          </div>
        ) : (
          <div class="p-6 text-center">
            <p class="text-[var(--text-secondary)]">{T.aiSignInCta}</p>
          </div>
        )}
      </DmCard>
    </section>
  </div>

  <!-- Context slot (reference + notes, desktop only) -->
  <div slot="context" class="space-y-6">
    <!-- Open5e Reference -->
    <section id="reference" class="dm-tab-section">
      <div class="flex items-center gap-3 mb-3">
        <span class="w-1 h-6 bg-[var(--gold)] rounded-full" aria-hidden="true"></span>
        <h2 class="text-lg font-bold text-[var(--text-primary)]">
          {T.reference}
        </h2>
      </div>
      <DmCard>
        <Open5eReference />
      </DmCard>
    </section>

    <!-- Notes Panel -->
    <section id="notes" class="dm-tab-section">
      <div class="flex items-center gap-3 mb-3">
        <span class="w-1 h-6 bg-[var(--gold)] rounded-full" aria-hidden="true"></span>
        <h2 class="text-lg font-bold text-[var(--text-primary)]">
          {T.notes}
        </h2>
      </div>
      <DmCard>
        <NotesPanel />
      </DmCard>
    </section>
  </div>
</DmLayout>