import type { ReactNode } from 'react';
import { headers } from 'next/headers';
import { and, count, eq, isNull } from '@/lib/db';
import { db, notifications } from '@/lib/db';
import { requireUser } from '@/lib/auth/session';
import { AccountNav } from '@/components/account/account-nav';

export default async function AccountLayout({ children }: { children: ReactNode }) {
  const h = await headers();
  const path = h.get('x-invoke-path') ?? h.get('next-url') ?? undefined;
  const user = await requireUser(path);
  const rows = await db().select({ n: count() }).from(notifications).where(and(eq(notifications.userId, user.id), isNull(notifications.readAt)));
  const n = rows[0]?.n ?? 0;
  return (
    <div className="grid grid-cols-[minmax(0,1fr)] gap-6 lg:grid-cols-[200px_minmax(0,1fr)]">
      <aside className="min-w-0 lg:sticky lg:top-[calc(var(--ri-header-h,52px)+16px)] lg:self-start">
        <div className="mb-3 hidden items-center gap-2 px-2 lg:flex">
          <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-accent text-[11px] font-semibold text-accent-fg">{(user.name ?? user.email).slice(0, 1).toUpperCase()}</span>
          <div className="min-w-0">
            <p className="truncate text-[13px] font-medium">{user.name ?? 'Collector'}</p>
            <p className="truncate text-[11px] text-subtle">{user.email}</p>
          </div>
        </div>
        <AccountNav unread={Number(n)} handle={user.handle} />
      </aside>
      <div className="min-w-0">{children}</div>
    </div>
  );
}