import Link from "next/link";
import { Settings } from "lucide-react";
import { desc, eq } from "drizzle-orm";
import { getRegistry } from "@/modules/_core/registry";
import type { DashboardMeta } from "@/app/d/actions";
import { notifications } from "@/modules/_core/schema";
import { db } from "@/lib/db";
import { auth } from "@/lib/auth";
import { DashboardSwitcher } from "./dashboard-switcher";
import { DashboardTab } from "./dashboard-tab";
import { NotificationBell } from "./notification-bell";

async function getNotifications(userId: string) {
  const rows = await db
    .select()
    .from(notifications)
    .where(eq(notifications.userId, userId))
    .orderBy(desc(notifications.createdAt))
    .limit(20);
  const unread = rows.filter((n) => !n.readAt).length;
  return { rows, unread };
}

export async function AppNav({ dashboards = [] }: { dashboards?: DashboardMeta[] }) {
  const { modules } = getRegistry();
  const navItems = modules.flatMap((m) => (m.nav ? [m.nav] : []));

  const session = await auth();
  const userId = session?.user?.id;
  const { rows: notifRows, unread } = userId
    ? await getNotifications(userId)
    : { rows: [], unread: 0 };

  return (
    <header className="border-b">
      <nav className="px-4 py-3 flex items-center gap-6">
        <Link href="/" className="font-semibold text-sm shrink-0">
          famapp
        </Link>
        {navItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            {item.label}
          </Link>
        ))}
        <div className="ml-auto flex items-center gap-3">
          {userId && (
            <NotificationBell
              initialUnread={unread}
              initialItems={notifRows.map((n) => ({
                id: n.id,
                title: n.title,
                body: n.body,
                url: n.url ?? null,
                createdAt: n.createdAt,
              }))}
            />
          )}
          <Link
            href="/settings"
            className="text-muted-foreground hover:text-foreground transition-colors"
            aria-label="Settings"
          >
            <Settings className="size-4" />
          </Link>
        </div>
      </nav>

      {dashboards.length > 0 && (
        <div className="flex items-center gap-1 border-t px-4 overflow-x-auto">
          {dashboards.map((d) => (
            <DashboardTab key={d.id} slug={d.slug} name={d.name} />
          ))}
          <DashboardSwitcher dashboards={dashboards} />
        </div>
      )}
    </header>
  );
}