'use client'

import { useState, useEffect, useRef, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { motion, AnimatePresence } from 'framer-motion'
import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'
import { listSites, type Site } from '@/lib/api/sites'
import { useAuth } from '@/lib/auth/context'
import { useUnifiedSettings } from '@/lib/unified-settings-context'
import { useSidebar } from '@/lib/sidebar-context'
// `,` shortcut handled globally by UnifiedSettingsModal
import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
import { setSessionAction } from '@/app/actions/auth'
import { logger } from '@/lib/utils/logger'
import { FAVICON_SERVICE_URL } from '@/lib/utils/favicon'
import { Gauge as GaugeIcon, Plugs as PlugsIcon, Tag as TagIcon } from '@phosphor-icons/react'
import {
  LayoutDashboardIcon,
  PathIcon,
  FunnelIcon,
  CursorClickIcon,
  SearchIcon,
  CloudUploadIcon,
  HeartbeatIcon,
  SettingsIcon,
  ChevronUpDownIcon,
  PlusIcon,
  XIcon,
  BookOpenIcon,
  AppLauncher,
  UserMenu,
  type CipheraApp,
} from '@ciphera-net/ui'
import NotificationCenter from '@/components/notifications/NotificationCenter'

const CIPHERA_APPS: CipheraApp[] = [
  {
    id: 'pulse',
    name: 'Pulse',
    description: 'Your current app — Privacy-first analytics',
    icon: 'https://ciphera.net/pulse_icon_no_margins.png',
    href: 'https://pulse.ciphera.net',
    isAvailable: false,
  },
  {
    id: 'drop',
    name: 'Drop',
    description: 'Secure file sharing',
    icon: 'https://ciphera.net/drop_icon_no_margins.png',
    href: 'https://drop.ciphera.net',
    isAvailable: true,
  },
  {
    id: 'auth',
    name: 'Auth',
    description: 'Your Ciphera account settings',
    icon: 'https://ciphera.net/auth_icon_no_margins.png',
    href: 'https://auth.ciphera.net',
    isAvailable: true,
  },
]

const EXPANDED = 256
const COLLAPSED = 64

type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'

interface NavItem {
  label: string
  href: (siteId: string) => string
  icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
  matchPrefix?: boolean
}

interface NavGroup { label: string; items: NavItem[] }

const NAV_GROUPS: NavGroup[] = [
  {
    label: 'Analytics',
    items: [
      { label: 'Dashboard', href: (id) => `/sites/${id}`, icon: LayoutDashboardIcon },
      { label: 'Journeys', href: (id) => `/sites/${id}/journeys`, icon: PathIcon, matchPrefix: true },
      { label: 'Funnels', href: (id) => `/sites/${id}/funnels`, icon: FunnelIcon, matchPrefix: true },
      { label: 'Behavior', href: (id) => `/sites/${id}/behavior`, icon: CursorClickIcon, matchPrefix: true },
      { label: 'Search', href: (id) => `/sites/${id}/search`, icon: SearchIcon, matchPrefix: true },
    ],
  },
  {
    label: 'Infrastructure',
    items: [
      { label: 'CDN', href: (id) => `/sites/${id}/cdn`, icon: CloudUploadIcon, matchPrefix: true },
      { label: 'Uptime', href: (id) => `/sites/${id}/uptime`, icon: HeartbeatIcon, matchPrefix: true },
      { label: 'PageSpeed', href: (id) => `/sites/${id}/pagespeed`, icon: GaugeIcon, matchPrefix: true },
    ],
  },
]

const SETTINGS_ITEM: NavItem = {
  label: 'Site Settings', href: (id) => `/sites/${id}/settings`, icon: SettingsIcon, matchPrefix: true,
}

// Label that fades with the sidebar — always in the DOM, never removed
function Label({ children, collapsed }: { children: React.ReactNode; collapsed: boolean }) {
  return (
    <span
      className="whitespace-nowrap overflow-hidden transition-opacity duration-150"
      style={{ opacity: collapsed ? 0 : 1 }}
    >
      {children}
    </span>
  )
}

// ─── Site Picker ────────────────────────────────────────────

function SitePicker({ sites, siteId, collapsed, onExpand, onCollapse, wasCollapsed, pickerOpenCallback }: {
  sites: Site[]; siteId: string; collapsed: boolean
  onExpand: () => void; onCollapse: () => void; wasCollapsed: React.MutableRefObject<boolean>
  pickerOpenCallback: React.MutableRefObject<(() => void) | null>
}) {
  const [open, setOpen] = useState(false)
  const [search, setSearch] = useState('')
  const [faviconFailed, setFaviconFailed] = useState(false)
  const [faviconLoaded, setFaviconLoaded] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
  const panelRef = useRef<HTMLDivElement>(null)
  const buttonRef = useRef<HTMLButtonElement>(null)
  const [fixedPos, setFixedPos] = useState<{ left: number; top: number } | null>(null)
  const pathname = usePathname()
  const router = useRouter()
  const currentSite = sites.find((s) => s.id === siteId)
  const faviconUrl = currentSite?.domain ? `${FAVICON_SERVICE_URL}?domain=${currentSite.domain}&sz=64` : null

  const updatePosition = useCallback(() => {
    if (buttonRef.current) {
      const rect = buttonRef.current.getBoundingClientRect()
      if (collapsed) {
        // Collapsed: open to the right, like AppLauncher/UserMenu/Notifications
        let top = rect.top
        if (panelRef.current) {
          const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
          top = Math.min(top, Math.max(8, maxTop))
        }
        setFixedPos({ left: rect.right + 8, top })
      } else {
        // Expanded: open below the button
        let top = rect.bottom + 4
        if (panelRef.current) {
          const maxTop = window.innerHeight - panelRef.current.offsetHeight - 8
          top = Math.min(top, Math.max(8, maxTop))
        }
        setFixedPos({ left: rect.left, top })
      }
    }
  }, [collapsed])

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      const target = e.target as Node
      if (
        ref.current && !ref.current.contains(target) &&
        (!panelRef.current || !panelRef.current.contains(target))
      ) {
        if (open) {
          setOpen(false); setSearch('')
        }
      }
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [open, onCollapse, wasCollapsed])

  useEffect(() => {
    if (open) {
      updatePosition()
      requestAnimationFrame(() => updatePosition())
    }
  }, [open, updatePosition])

  const closePicker = () => {
    setOpen(false); setSearch('')
  }

  const switchSite = (id: string) => {
    router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
    closePicker()
  }

  const filtered = sites.filter(
    (s) => s.name.toLowerCase().includes(search.toLowerCase()) || s.domain.toLowerCase().includes(search.toLowerCase())
  )

  const dropdown = (
    <AnimatePresence>
      {open && (
        <motion.div
          ref={panelRef}
          initial={{ opacity: 0, y: 10, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 10, scale: 0.95 }}
          transition={{ duration: 0.15 }}
          className="fixed z-50 w-[240px] bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border border-white/[0.08] rounded-xl shadow-xl shadow-black/20 overflow-hidden origin-top-left"
          style={fixedPos ? { left: fixedPos.left, top: fixedPos.top } : undefined}
        >
          <div className="p-2">
            <input
              type="text"
              placeholder="Search sites..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              onKeyDown={(e) => {
                if (e.key === 'Escape') closePicker()
              }}
              className="w-full px-3 py-1.5 text-sm bg-white/[0.04] border border-white/[0.08] rounded-lg outline-none focus:ring-2 focus:ring-brand-orange/40 text-white placeholder:text-neutral-400"
              autoFocus
            />
          </div>
          <div className="max-h-64 overflow-y-auto">
            {filtered.map((site) => (
              <button
                key={site.id}
                onClick={() => switchSite(site.id)}
                className={`w-full flex items-center gap-2.5 px-4 py-2 text-sm text-left ${
                  site.id === siteId
                    ? 'bg-brand-orange/10 text-brand-orange font-medium'
                    : 'text-neutral-300 hover:bg-white/[0.06]'
                }`}
              >
                <img
                  src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
                  alt=""
                  className="w-5 h-5 rounded object-contain shrink-0"
                />
                <span className="flex flex-col min-w-0">
                  <span className="truncate">{site.name}</span>
                  <span className="text-xs text-neutral-400 truncate">{site.domain}</span>
                </span>
              </button>
            ))}
            {filtered.length === 0 && <p className="px-4 py-3 text-sm text-neutral-400">No sites found</p>}
          </div>
          <div className="border-t border-white/[0.06] p-2">
            <Link href="/sites/new" onClick={() => closePicker()} className="flex items-center gap-2 px-3 py-1.5 text-sm text-brand-orange hover:bg-white/[0.06] rounded-lg">
              <PlusIcon className="w-4 h-4" />
              Add new site
            </Link>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  )

  return (
    <div className="relative mb-4 px-2" ref={ref}>
      <button
        ref={buttonRef}
        onClick={() => setOpen(!open)}
        className="w-full flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-200 hover:bg-white/[0.06] overflow-hidden"
      >
        <span className="w-7 h-7 rounded-md bg-brand-orange/10 flex items-center justify-center shrink-0 overflow-hidden">
          {faviconUrl && !faviconFailed ? (
            <>
              {!faviconLoaded && <span className="w-5 h-5 rounded animate-pulse bg-neutral-800" />}
              <img
                src={faviconUrl}
                alt=""
                className={`w-5 h-5 object-contain ${faviconLoaded ? '' : 'hidden'}`}
                onLoad={() => setFaviconLoaded(true)}
                onError={() => setFaviconFailed(true)}
              />
            </>
          ) : (
            <span className="text-xs font-bold text-brand-orange">
              {currentSite?.name?.charAt(0).toUpperCase() || '?'}
            </span>
          )}
        </span>
        <Label collapsed={collapsed}>
          <span className="flex items-center gap-1">
            <span className="truncate">{currentSite?.name || ''}</span>
            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
          </span>
        </Label>
      </button>

      {typeof document !== 'undefined' ? createPortal(dropdown, document.body) : dropdown}
    </div>
  )
}

// ─── Nav Item ───────────────────────────────────────────────

function NavLink({
  item, siteId, collapsed, onClick, pendingHref, onNavigate,
}: {
  item: NavItem; siteId: string; collapsed: boolean; onClick?: () => void
  pendingHref: string | null; onNavigate: (href: string) => void
}) {
  const pathname = usePathname()
  const href = item.href(siteId)
  const matchesPathname = item.matchPrefix ? pathname.startsWith(href) : pathname === href
  const matchesPending = pendingHref !== null && (item.matchPrefix ? pendingHref.startsWith(href) : pendingHref === href)
  const active = matchesPathname || matchesPending

  return (
    <div className="relative group/nav">
      <Link
        href={href}
        onClick={() => { onNavigate(href); onClick?.() }}
        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
          active
            ? 'bg-brand-orange/10 text-brand-orange'
            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
        }`}
      >
        <span className="w-7 h-7 flex items-center justify-center shrink-0">
          <item.icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
        </span>
        <Label collapsed={collapsed}>{item.label}</Label>
      </Link>
      {collapsed && (
        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
          {item.label}
        </span>
      )}
    </div>
  )
}

// ─── Settings Button (opens unified modal instead of navigating) ─────

function SettingsButton({
  item, collapsed, onClick, settingsContext = 'site',
}: {
  item: NavItem; collapsed: boolean; onClick?: () => void; settingsContext?: 'site' | 'workspace'
}) {
  const { openUnifiedSettings } = useUnifiedSettings()

  return (
    <div className="relative group/nav">
      <button
        onClick={() => {
          openUnifiedSettings({ context: settingsContext, tab: 'general' })
          onClick?.()
        }}
        className="flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5 w-full cursor-pointer"
      >
        <span className="w-7 h-7 flex items-center justify-center shrink-0">
          <item.icon className="w-[18px] h-[18px]" weight="regular" />
        </span>
        <Label collapsed={collapsed}>{item.label}</Label>
      </button>
      {collapsed && (
        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
          {item.label}
        </span>
      )}
    </div>
  )
}

// ─── Home Nav Link (static href, no siteId) ───────────────

function HomeNavLink({
  href, icon: Icon, label, collapsed, onClick, external,
}: {
  href: string; icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
  label: string; collapsed: boolean; onClick?: () => void; external?: boolean
}) {
  const pathname = usePathname()
  const active = !external && pathname === href

  return (
    <div className="relative group/nav">
      <Link
        href={href}
        onClick={onClick}
        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
          active
            ? 'bg-brand-orange/10 text-brand-orange'
            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
        }`}
      >
        <span className="w-7 h-7 flex items-center justify-center shrink-0">
          <Icon className="w-[18px] h-[18px]" weight={active ? 'fill' : 'regular'} />
        </span>
        <Label collapsed={collapsed}>{label}</Label>
      </Link>
      {collapsed && (
        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
          {label}
        </span>
      )}
    </div>
  )
}

// ─── Home Site Link (favicon + name) ───────────────────────

function HomeSiteLink({
  site, collapsed, onClick,
}: {
  site: Site; collapsed: boolean; onClick?: () => void
}) {
  const pathname = usePathname()
  const href = `/sites/${site.id}`
  const active = pathname.startsWith(href)

  return (
    <div className="relative group/nav">
      <Link
        href={href}
        onClick={onClick}
        className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium overflow-hidden transition-all duration-150 ${
          active
            ? 'bg-brand-orange/10 text-brand-orange'
            : 'text-neutral-400 hover:text-white hover:bg-white/[0.06] hover:translate-x-0.5'
        }`}
      >
        <span className="w-7 h-7 rounded-md bg-white/[0.04] flex items-center justify-center shrink-0 overflow-hidden">
          <img
            src={`${FAVICON_SERVICE_URL}?domain=${site.domain}&sz=64`}
            alt=""
            className="w-[18px] h-[18px] rounded object-contain"
          />
        </span>
        <Label collapsed={collapsed}>{site.name}</Label>
      </Link>
      {collapsed && (
        <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/nav:opacity-100 transition-opacity duration-150 delay-150 z-50">
          {site.name}
        </span>
      )}
    </div>
  )
}

// ─── Sidebar Content ────────────────────────────────────────

interface SidebarContentProps {
  isMobile: boolean
  collapsed: boolean
  siteId: string | null
  sites: Site[]
  canEdit: boolean
  pendingHref: string | null
  onNavigate: (href: string) => void
  onMobileClose: () => void
  onExpand: () => void
  onCollapse: () => void
  onToggle: () => void
  wasCollapsed: React.MutableRefObject<boolean>
  pickerOpenCallbackRef: React.MutableRefObject<(() => void) | null>
  auth: ReturnType<typeof useAuth>
  orgs: OrganizationMember[]
  onSwitchOrganization: (orgId: string | null) => Promise<void>
  openSettings: () => void
  openOrgSettings: () => void
}

function SidebarContent({
  isMobile, collapsed, siteId, sites, canEdit, pendingHref,
  onNavigate, onMobileClose, onExpand, onCollapse, onToggle,
  wasCollapsed, pickerOpenCallbackRef, auth, orgs, onSwitchOrganization, openSettings, openOrgSettings,
}: SidebarContentProps) {
  const router = useRouter()
  const c = isMobile ? false : collapsed
  const { user } = auth

  return (
    <div className="flex flex-col h-full overflow-hidden">
      {/* App Switcher — top of sidebar (scope-level switch) */}
      <div className="flex items-center gap-2.5 px-[14px] pt-1.5 pb-1 shrink-0 overflow-hidden">
        <span className="w-9 h-9 flex items-center justify-center shrink-0">
          <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" anchor="right" />
        </span>
        <Label collapsed={c}>
          <span className="text-xs font-medium text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">Ciphera</span>
        </Label>
      </div>

      {/* Logo — fixed layout, text fades */}
      <Link href="/" className="flex items-center gap-3 px-[14px] py-4 shrink-0 group overflow-hidden">
        <span className="w-9 h-9 flex items-center justify-center shrink-0">
          <img src="/pulse_icon_no_margins.png" alt="Pulse" className="w-9 h-9 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200" />
        </span>
        <span className={`text-xl font-bold text-white tracking-tight group-hover:text-brand-orange whitespace-nowrap transition-opacity duration-150 ${c ? 'opacity-0' : 'opacity-100'}`}>
          Pulse
        </span>
      </Link>

      {/* Site Picker */}
      {siteId && (
        <SitePicker sites={sites} siteId={siteId} collapsed={c} onExpand={onExpand} onCollapse={onCollapse} wasCollapsed={wasCollapsed} pickerOpenCallback={pickerOpenCallbackRef} />
      )}

      {/* Nav Groups */}
      {siteId ? (
        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
          {NAV_GROUPS.map((group) => (
            <div key={group.label}>
              {c ? (
                <div className="mx-3 my-2 border-t border-white/[0.04]" />
              ) : (
                <div className="h-5 flex items-center overflow-hidden">
                  <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
                    {group.label}
                  </p>
                </div>
              )}
              <div className="space-y-0.5">
                {group.items.map((item) => (
                  <NavLink key={item.label} item={item} siteId={siteId} collapsed={c} onClick={isMobile ? onMobileClose : undefined} pendingHref={pendingHref} onNavigate={onNavigate} />
                ))}
                {group.label === 'Infrastructure' && canEdit && (
                  <SettingsButton item={SETTINGS_ITEM} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
                )}
              </div>
            </div>
          ))}
        </nav>
      ) : (
        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-2 space-y-4">
          {/* Your Sites */}
          <div>
            {c ? (
              <div className="mx-3 my-2 border-t border-white/[0.04]" />
            ) : (
              <div className="h-5 flex items-center overflow-hidden">
                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
                  Your Sites
                </p>
              </div>
            )}
            <div className="space-y-0.5">
              {sites.map((site) => (
                <HomeSiteLink key={site.id} site={site} collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
              ))}
              <HomeNavLink href="/sites/new" icon={PlusIcon} label="Add New Site" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
            </div>
          </div>

          {/* Workspace */}
          <div>
            {c ? (
              <div className="mx-3 my-2 border-t border-white/[0.04]" />
            ) : (
              <div className="h-5 flex items-center overflow-hidden">
                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
                  Workspace
                </p>
              </div>
            )}
            <div className="space-y-0.5">
              <HomeNavLink href="/integrations" icon={PlugsIcon} label="Integrations" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
              <HomeNavLink href="/pricing" icon={TagIcon} label="Pricing" collapsed={c} onClick={isMobile ? onMobileClose : undefined} />
              <SettingsButton item={{ label: 'Workspace Settings', href: () => '', icon: SettingsIcon, matchPrefix: false }} collapsed={c} onClick={isMobile ? onMobileClose : undefined} settingsContext="workspace" />
            </div>
          </div>

          {/* Resources */}
          <div>
            {c ? (
              <div className="mx-3 my-2 border-t border-white/[0.04]" />
            ) : (
              <div className="h-5 flex items-center overflow-hidden">
                <p className="px-2.5 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider whitespace-nowrap">
                  Resources
                </p>
              </div>
            )}
            <div className="space-y-0.5">
              <HomeNavLink href="https://docs.ciphera.net" icon={BookOpenIcon} label="Documentation" collapsed={c} onClick={isMobile ? onMobileClose : undefined} external />
            </div>
          </div>
        </nav>
      )}

      {/* Bottom — utility items */}
      <div className="border-t border-white/[0.06] px-2 py-3 shrink-0">
        {/* Notifications, Profile — same layout as nav items */}
        <div className="space-y-0.5 mb-1">
          <div className="relative group/notif">
            <NotificationCenter anchor="right" variant="sidebar">
              <Label collapsed={c}>Notifications</Label>
            </NotificationCenter>
            {c && (
              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/notif:opacity-100 transition-opacity duration-150 delay-150 z-50">
                Notifications
              </span>
            )}
          </div>
          <div className="relative group/user">
            <UserMenu
              auth={auth}
              LinkComponent={Link}
              orgs={orgs}
              activeOrgId={auth.user?.org_id}
              onSwitchOrganization={onSwitchOrganization}
              onCreateOrganization={() => router.push('/onboarding')}
              allowPersonalOrganization={false}
              onOpenSettings={openSettings}
              onOpenOrgSettings={openOrgSettings}
              compact
              anchor="right"
            >
              <Label collapsed={c}>{user?.display_name?.trim() || 'Profile'}</Label>
            </UserMenu>
            {c && (
              <span className="pointer-events-none absolute left-full top-1/2 -translate-y-1/2 ml-2 px-2 py-1 rounded-md bg-neutral-800 text-white text-xs whitespace-nowrap opacity-0 group-hover/user:opacity-100 transition-opacity duration-150 delay-150 z-50">
                {user?.display_name?.trim() || 'Profile'}
              </span>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

// ─── Main Sidebar ───────────────────────────────────────────

export default function Sidebar({
  siteId, mobileOpen, onMobileClose, onMobileOpen,
}: {
  siteId: string | null; mobileOpen: boolean; onMobileClose: () => void; onMobileOpen: () => void
}) {
  const auth = useAuth()
  const { user } = auth
  const canEdit = user?.role === 'owner' || user?.role === 'admin'
  const pathname = usePathname()
  const router = useRouter()
  const { openUnifiedSettings } = useUnifiedSettings()
  const [sites, setSites] = useState<Site[]>([])
  const [orgs, setOrgs] = useState<OrganizationMember[]>([])
  const [pendingHref, setPendingHref] = useState<string | null>(null)
  const [mobileClosing, setMobileClosing] = useState(false)
  const wasCollapsedRef = useRef(false)
  const pickerOpenCallbackRef = useRef<(() => void) | null>(null)
  const { collapsed, toggle, expand, collapse } = useSidebar()

  useEffect(() => { listSites().then(setSites).catch(() => {}) }, [])
  useEffect(() => {
    if (user) {
      getUserOrganizations()
        .then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
        .catch(err => logger.error('Failed to fetch orgs', err))
    }
  }, [user])

  const handleSwitchOrganization = async (orgId: string | null) => {
    if (!orgId) return
    try {
      const { access_token } = await switchContext(orgId)
      await setSessionAction(access_token)
      await auth.refresh()
      router.push('/')
    } catch (err) {
      logger.error('Failed to switch organization', err)
    }
  }
  useEffect(() => { setPendingHref(null); onMobileClose() }, [pathname, onMobileClose])

  const handleMobileClose = useCallback(() => {
    setMobileClosing(true)
    setTimeout(() => {
      setMobileClosing(false)
      onMobileClose()
    }, 200)
  }, [onMobileClose])

  const handleNavigate = useCallback((href: string) => { setPendingHref(href) }, [])

  return (
    <>
      {/* Desktop — ssr:false means this only renders on client, no hydration flash */}
      <aside
        className="hidden md:flex flex-col shrink-0 bg-transparent overflow-hidden relative z-10"
        style={{ width: collapsed ? COLLAPSED : EXPANDED, transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)' }}
        onTransitionEnd={(e) => {
          if (e.propertyName === 'width' && pickerOpenCallbackRef.current) {
            pickerOpenCallbackRef.current()
            pickerOpenCallbackRef.current = null
          }
        }}
      >
        <SidebarContent
          isMobile={false}
          collapsed={collapsed}
          siteId={siteId}
          sites={sites}
          canEdit={canEdit}
          pendingHref={pendingHref}
          onNavigate={handleNavigate}
          onMobileClose={onMobileClose}
          onExpand={expand}
          onCollapse={collapse}
          onToggle={toggle}
          wasCollapsed={wasCollapsedRef}
          pickerOpenCallbackRef={pickerOpenCallbackRef}
          auth={auth}
          orgs={orgs}
          onSwitchOrganization={handleSwitchOrganization}
          openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
          openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
        />
      </aside>

      {/* Mobile overlay */}
      {(mobileOpen || mobileClosing) && (
        <>
          <div
            className={`fixed inset-0 z-40 bg-black/30 md:hidden transition-opacity duration-200 ${
              mobileClosing ? 'opacity-0' : 'opacity-100'
            }`}
            onClick={handleMobileClose}
          />
          <aside
            className={`fixed inset-y-0 left-0 z-50 w-72 bg-neutral-900/65 backdrop-blur-3xl backdrop-saturate-150 supports-[backdrop-filter]:bg-neutral-900/60 border-r border-white/[0.08] shadow-xl shadow-black/20 md:hidden ${
              mobileClosing
                ? 'animate-out slide-out-to-left duration-200 fill-mode-forwards'
                : 'animate-in slide-in-from-left duration-200'
            }`}
          >
            <div className="flex items-center justify-between px-4 py-3 border-b border-white/[0.06]">
              <span className="text-sm font-semibold text-white">Navigation</span>
              <button onClick={handleMobileClose} className="p-1.5 text-neutral-400 hover:text-neutral-300">
                <XIcon className="w-5 h-5" />
              </button>
            </div>
            <SidebarContent
              isMobile={true}
              collapsed={collapsed}
              siteId={siteId}
              sites={sites}
              canEdit={canEdit}
              pendingHref={pendingHref}
              onNavigate={handleNavigate}
              onMobileClose={handleMobileClose}
              onExpand={expand}
              onCollapse={collapse}
              onToggle={toggle}
              wasCollapsed={wasCollapsedRef}
              pickerOpenCallbackRef={pickerOpenCallbackRef}
              auth={auth}
              orgs={orgs}
              onSwitchOrganization={handleSwitchOrganization}
              openSettings={() => openUnifiedSettings({ context: 'account', tab: 'profile' })}
              openOrgSettings={() => openUnifiedSettings({ context: 'workspace', tab: 'general' })}
            />
          </aside>
        </>
      )}
    </>
  )
}