import Link from 'next/link'
import Image from 'next/image'
import type { ReactNode } from 'react'
import { eq } from 'drizzle-orm'
import { auth, signOut } from '@/auth'
import { db } from '@/db'
import { users } from '@/db/schema'
import { getExpertEngagementStats, getLineManagerEngagementStats } from '@/lib/engagement-metrics'
import { getI18nForUserId } from '@/lib/i18n/server'
import BrandName from './BrandName'
import { SecondaryButton } from './FormFields'
import NavLinks from './NavLinks'
import ThemeToggle from './ThemeToggle'

export default async function Nav() {
  const session = await auth()

  let role: string | null = null
  let displayName: string | null = null
  let email: string | null = null
  let widgets: ReactNode = null
  let navLabels: Record<string, string> = {}
  let navAriaLabel = 'Primary'
  let switchTenantLabel = 'Switch tenant'
  let signOutLabel = 'Sign out'
  if (session?.user?.id) {
    const i18n = await getI18nForUserId(session.user.id)
    const translate = i18n.t
    navLabels = {
      'nav.inbox': translate('nav.inbox'),
      'nav.knowledge': translate('nav.knowledge'),
      'nav.projects': translate('nav.projects'),
      'nav.users': translate('nav.users'),
      'nav.config': translate('nav.config'),
      'nav.aiUsage': translate('nav.aiUsage'),
      'nav.health': translate('nav.health'),
      'nav.submit': translate('nav.submit'),
      'nav.myTickets': translate('nav.myTickets'),
      'nav.profile': translate('nav.profile'),
      'nav.role.admin': translate('nav.role.admin'),
      'nav.role.expert': translate('nav.role.expert'),
    }
    navAriaLabel = translate('nav.primary')
    switchTenantLabel = translate('nav.switchTenant')
    signOutLabel = translate('nav.signOut')
    role = session.user.role ?? null
    const [user] = await db
      .select({ displayName: users.displayName, email: users.email, timeZone: users.timeZone })
      .from(users)
      .where(eq(users.id, session.user.id))
      .limit(1)
    displayName = user?.displayName ?? null
    email = user?.email ?? null
    if (session.user.tenantId && role === 'line_manager') {
      const stats = await getLineManagerEngagementStats({
        tenantId: session.user.tenantId,
        userId: session.user.id,
        timeZone: user?.timeZone ?? null,
      })
      widgets = (
        <EngagementWidgets
          items={[
            {
              label: translate('nav.widgets.ticketsThisMonth'),
              value: stats.ticketsThisMonth,
              title: translate('nav.widgets.lastMonth', { count: stats.ticketsLastMonth }),
            },
            { label: translate('nav.widgets.weekStreak'), value: stats.weekStreak, href: '/profile' },
            { label: translate('nav.widgets.resolved'), value: stats.resolved },
          ]}
        />
      )
    } else if (session.user.tenantId && (role === 'expert' || role === 'admin')) {
      const stats = await getExpertEngagementStats({
        tenantId: session.user.tenantId,
        userId: session.user.id,
      })
      widgets = (
        <EngagementWidgets
          items={[
            { label: translate('nav.widgets.kbArticles'), value: stats.activeKbArticles, href: '/profile' },
            {
              label: translate('nav.widgets.responsesHelped'),
              value: stats.responsesHelped,
              href: '/profile',
              title: translate('nav.widgets.responsesHelpedTitle', { count: stats.responsesHelped }),
            },
          ]}
        />
      )
    }
  }

  const isExpert = role === 'expert' || role === 'admin'
  const isAdmin = role === 'admin'
  const homeHref = session?.user?.id ? (isExpert ? '/inbox' : '/submit') : '/login'
  const userLabel = displayName ?? email ?? null
  const roleLabel = role === 'admin' ? navLabels['nav.role.admin'] ?? 'Admin' : role === 'expert' ? navLabels['nav.role.expert'] ?? 'Expert' : null
  const tenantName = session?.user?.tenantName ?? null
  const hasMultipleTenants = session?.user?.hasMultipleTenants ?? false

  return (
    <header className="sticky top-0 z-40 border-b border-zinc-200 bg-white/95 px-4 backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/95">
      <div className="mx-auto max-w-6xl">

        {/*
          Mobile:  [Logo]──────────────[Controls]   ← row 1, justify-between
                   [────── Nav links centered ──────]  ← row 2, full-width
          Desktop: [Logo][──── Nav centered ────][Controls]  ← single row
        */}
        <div className="flex flex-wrap items-center justify-between gap-x-3 py-3 lg:flex-nowrap">

          {/* Logo — always row 1, left */}
          <Link
            href={homeHref}
            className="flex shrink-0 items-center gap-2 text-sm font-semibold text-zinc-950 dark:text-white"
          >
            <Image src="/brand/qi-mark.png" alt="" width={28} height={28} priority className="h-7 w-7 rounded-md" />
            <BrandName />
          </Link>

          {/* Nav — row 2 (full-width, centered) on mobile; middle column on desktop */}
          {session?.user?.id ? (
            <div className="order-last flex min-w-0 w-full flex-wrap items-center justify-start gap-3 border-t border-zinc-100 pt-2 dark:border-zinc-800 sm:order-0 sm:w-auto sm:flex-1 sm:justify-center sm:border-0 sm:pt-0">
              <NavLinks isExpert={isExpert} isAdmin={isAdmin} labels={navLabels} ariaLabel={navAriaLabel} />
              {widgets}
            </div>
          ) : null}

          {/* Controls — always row 1, right */}
          <div className="flex shrink-0 items-center gap-2 sm:gap-3">
            <ThemeToggle />
            {hasMultipleTenants && tenantName ? (
              <Link
                href="/switch-tenant"
                className="hidden items-center gap-1.5 text-xs text-zinc-400 hover:text-zinc-700 dark:text-zinc-500 dark:hover:text-zinc-300 sm:flex"
                title={switchTenantLabel}
              >
                <span>{tenantName}</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
                  <path fillRule="evenodd" d="M5.22 10.22a.75.75 0 0 1 1.06 0L8 11.94l1.72-1.72a.75.75 0 1 1 1.06 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 0 1 0-1.06ZM10.78 5.78a.75.75 0 0 1-1.06 0L8 4.06 6.28 5.78a.75.75 0 0 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06Z" clipRule="evenodd" />
                </svg>
              </Link>
            ) : null}
            {userLabel ? (
              <Link
                href="/profile"
                className="flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
              >
                <span className="sm:hidden">{navLabels['nav.profile'] ?? 'Profile'}</span>
                <span className="hidden sm:inline">{userLabel}</span>
                {roleLabel ? (
                  <span className="hidden rounded-md border border-sky-200 bg-sky-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-sky-700 dark:border-sky-400/30 dark:bg-sky-400/10 dark:text-sky-300 sm:inline">
                    {roleLabel}
                  </span>
                ) : null}
              </Link>
            ) : null}
            {session?.user?.id ? (
              <form
                action={async () => {
                  'use server'
                  await signOut({ redirectTo: '/login' })
                }}
              >
                <SecondaryButton
                  type="submit"
                  className="px-3 py-1.5 text-sm"
                >
                  {signOutLabel}
                </SecondaryButton>
              </form>
            ) : null}
          </div>

        </div>
      </div>
    </header>
  )
}

function EngagementWidgets({
  items,
}: {
  items: Array<{ label: string; value: number; href?: string; title?: string }>
}) {
  return (
    <div className="flex shrink-0 items-center gap-1.5">
      {items.map((item) => {
        const className = 'inline-flex h-7 shrink-0 items-center gap-1.5 rounded-md border border-zinc-200 bg-zinc-50 px-2 text-xs text-zinc-600 hover:border-zinc-300 hover:text-zinc-950 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:border-zinc-700 dark:hover:text-white'
        const content = (
          <>
            <span className="font-semibold tabular-nums">{item.value}</span>
            <span className="hidden xl:inline">{item.label}</span>
          </>
        )
        return item.href ? (
          <Link key={item.label} href={item.href} className={className} title={item.title ?? item.label}>
            {content}
          </Link>
        ) : (
          <span key={item.label} className={className} title={item.title ?? item.label}>
            {content}
          </span>
        )
      })}
    </div>
  )
}