---
export const prerender = false;

import RootLayout from '../../layouts/RootLayout.astro';
import StoreHeader from '../../components/StoreHeader.astro';
import DbError from '../../components/DbError.astro';
import { env } from 'cloudflare:workers';
import { listOrders } from '@platform-modules/commerce-orders';
import { getDb, MissingDatabaseError } from '../../lib/db.js';
import { getSession, type SessionEnv } from '../../lib/session.js';

const cfEnv = env as (SessionEnv & { DB?: D1Database; DATABASE_URL?: string }) | undefined;
const session = cfEnv ? await getSession(cfEnv, Astro.cookies) : null;

if (!session) {
  return Astro.redirect('/login?next=%2Faccount');
}

let orderCount = 0;
let dbError: string | null = null;

if (cfEnv) {
  try {
    const { db } = getDb(cfEnv);
    const orders = await listOrders(db, { userId: session.userId }, { limit: 20 });
    orderCount = orders.items.length;
  } catch (err) {
    dbError =
      err instanceof MissingDatabaseError
        ? 'The store database is not configured yet.'
        : 'We could not load your account details. Please try again shortly.';
  }
}
---

<RootLayout title="Your account" description="Manage your storefront account.">
  <StoreHeader />
  <main class="mx-auto max-w-2xl px-4 py-8">
    <h1 class="text-3xl font-bold text-slate-900">Hello, {session.email}</h1>
    <p class="mt-2 text-slate-600">Welcome to your account hub.</p>

    {dbError && (
      <div class="mt-6">
        <DbError message={dbError} />
      </div>
    )}

    <nav class="mt-8 space-y-3">
      <a
        href="/account/orders"
        class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 hover:bg-slate-50"
      >
        <span class="font-medium text-slate-900">Order history</span>
        {!dbError && (
          <span class="text-sm text-slate-500">{orderCount} recent</span>
        )}
      </a>
      <a
        href="/account/settings"
        class="block rounded-lg border border-slate-200 px-4 py-3 font-medium text-slate-900 hover:bg-slate-50"
      >
        Account settings
      </a>
    </nav>
  </main>
</RootLayout>