import Link from 'next/link'
import { UserMenu } from './user-menu'
import { RoleSwitcher } from './role-switcher'
import type { Profile } from '@/types/db'

export function AppShell({ profile, children }: { profile: Profile; children: React.ReactNode }) {
  return (
    <div className="min-h-screen bg-neutral-50">
      <header className="sticky top-0 z-30 border-b bg-white">
        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-3 px-4">
          {/* Mobile QA 2026-09-13: the nav lives in its own scrollable lane so
              "History" can never slide under the avatar on a phone. */}
          <div className="flex min-w-0 flex-1 items-center gap-4 sm:gap-5">
            <Link href="/dashboard" className="flex items-center gap-2">
              <span className="grid h-8 w-8 place-items-center rounded-lg bg-[#0f1b2d] text-sm font-extrabold text-[#f5a623]">
                H
              </span>
              <span className="hidden text-sm font-bold sm:block">HeavyHaul Agent</span>
            </Link>
            <nav className="flex min-w-0 items-center gap-3 overflow-x-auto whitespace-nowrap text-sm font-medium text-neutral-600 [scrollbar-width:none] sm:gap-4 [&::-webkit-scrollbar]:hidden">
              <Link href="/dashboard" className="hover:text-neutral-900">
                Dashboard
              </Link>
              <Link href="/estimator" className="hover:text-neutral-900">
                Estimator
              </Link>
              <Link href="/billing" className="hover:text-neutral-900">
                Billing
              </Link>
              <Link href="/history" className="hover:text-neutral-900">
                History
              </Link>
            </nav>
          </div>
          <div className="flex shrink-0 items-center gap-3">
            <div className="hidden text-right sm:block">
              <p className="text-xs font-semibold leading-tight">{profile.full_name || profile.email}</p>
              <p className="text-[11px] capitalize text-neutral-500">{profile.default_role}</p>
            </div>
            <UserMenu name={profile.full_name || profile.email} role={profile.default_role} />
          </div>
        </div>
      </header>
      <RoleSwitcher currentRole={profile.default_role} />
      {children}
    </div>
  )
}