accounted/components/dashboard/CompanySwitcher.tsx

'use client'

import { useState, useRef, useEffect, useTransition, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { cn } from '@/lib/utils'
import { useCompany } from '@/contexts/CompanyContext'
import { switchCompany } from '@/lib/company/actions'
import { Check, ChevronsUpDown, Plus, Loader2 } from 'lucide-react'

export default function CompanySwitcher() {
  const { company, companies, isTeamMember, team } = useCompany()
  const router = useRouter()
  const [open, setOpen] = useState(false)
  const [isPending, startTransition] = useTransition()
  const triggerRef = useRef<HTMLButtonElement>(null)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0 })

  const updatePosition = useCallback(() => {
    if (!triggerRef.current || !dropdownRef.current) return
    const triggerRect = triggerRef.current.getBoundingClientRect()
    const dropdownRect = dropdownRef.current.getBoundingClientRect()
    const margin = 8

    let top = triggerRect.bottom + 4
    let left = triggerRect.left

    // Clamp right edge to viewport
    if (left + dropdownRect.width > window.innerWidth - margin) {
      left = Math.max(margin, window.innerWidth - dropdownRect.width - margin)
    }

    // If dropdown would go below viewport, show above trigger
    if (top + dropdownRect.height > window.innerHeight - margin) {
      top = Math.max(margin, triggerRect.top - dropdownRect.height - 4)
    }

    setDropdownPos({ top, left })
  }, [])

  // Update position when opening (run twice: once to render, once to measure)
  useEffect(() => {
    if (!open) return
    // First frame: portal mounts, second frame: we can measure it
    const raf = requestAnimationFrame(() => updatePosition())
    return () => cancelAnimationFrame(raf)
  }, [open, updatePosition])

  // Close on outside click
  useEffect(() => {
    if (!open) return
    function handleClick(e: MouseEvent) {
      const target = e.target as Node
      if (
        (!triggerRef.current || !triggerRef.current.contains(target)) &&
        (!dropdownRef.current || !dropdownRef.current.contains(target))
      ) {
        setOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClick)
    return () => document.removeEventListener('mousedown', handleClick)
  }, [open])

  // Close on Escape
  useEffect(() => {
    if (!open) return
    function handleKey(e: KeyboardEvent) {
      if (e.key === 'Escape') setOpen(false)
    }
    document.addEventListener('keydown', handleKey)
    return () => document.removeEventListener('keydown', handleKey)
  }, [open])

  const handleSwitch = (companyId: string) => {
    if (company && companyId === company.id) {
      setOpen(false)
      return
    }
    startTransition(async () => {
      const result = await switchCompany(companyId)
      if (!result.error) {
        setOpen(false)
        router.refresh()
      }
    })
  }

  const canOpen = companies.length > 0 || isTeamMember

  // For team members: show team name as header, active company below
  // For self-service: just show company name
  if (team) {
    return (
      <div>
        <button
          ref={triggerRef}
          onClick={() => canOpen && setOpen(!open)}
          className={cn(
            'flex flex-col w-full text-left rounded-lg transition-colors',
            canOpen && 'hover:bg-muted/40 -mx-1 px-1 py-0.5',
          )}
          aria-expanded={open}
          aria-haspopup="listbox"
        >
          <div className="flex items-center gap-1.5 w-full">
            <p className="text-[13px] font-semibold text-foreground truncate tracking-[-0.01em] flex-1">
              {team.name}
            </p>
            {canOpen && (
              <ChevronsUpDown className="h-3 w-3 text-muted-foreground flex-shrink-0" />
            )}
          </div>
          {company && (
            <p className="text-[11px] text-muted-foreground truncate">
              {company.name}
            </p>
          )}
        </button>

        {open && createPortal(
          <div
            ref={dropdownRef}
            className="fixed min-w-56 w-max max-w-[calc(100vw-1rem)] bg-card border border-border/60 rounded-lg shadow-lg z-[60] py-1 animate-in fade-in slide-in-from-top-1 duration-150"
            style={{ top: dropdownPos.top, left: dropdownPos.left }}
          >
            {companies.length > 0 && (
              <>
                <div className="px-2 py-1.5">
                  <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-[0.08em] px-1.5">
                    Företag
                  </p>
                </div>

                <div className="max-h-48 overflow-y-auto px-1">
                  {companies.map(({ company: c, role }) => (
                    <button
                      key={c.id}
                      onClick={() => handleSwitch(c.id)}
                      disabled={isPending}
                      className={cn(
                        'flex items-center gap-2 w-full px-2.5 py-2 text-left text-[13px] leading-snug transition-colors rounded-md md:whitespace-nowrap',
                        c.id === company?.id
                          ? 'text-foreground bg-muted/40'
                          : 'text-muted-foreground hover:text-foreground hover:bg-muted/40',
                        isPending && 'opacity-50',
                      )}
                      role="option"
                      aria-selected={c.id === company?.id}
                    >
                      <span className="flex-1 min-w-0">{c.name}</span>
                      {role !== 'owner' && (
                        <span className="text-[10px] text-muted-foreground/60 flex-shrink-0">
                          {role}
                        </span>
                      )}
                      {c.id === company?.id && (
                        <Check className="h-3.5 w-3.5 text-primary flex-shrink-0" />
                      )}
                      {isPending && c.id !== company?.id && (
                        <Loader2 className="h-3 w-3 animate-spin text-muted-foreground flex-shrink-0" />
                      )}
                    </button>
                  ))}
                </div>
              </>
            )}

            <div className={cn(companies.length > 0 && 'border-t border-border/40 mt-1 pt-1', 'px-1')}>
              <Link
                href="/companies/new"
                onClick={() => setOpen(false)}
                className="flex items-center gap-2 px-2.5 py-2 text-[13px] text-muted-foreground hover:text-foreground hover:bg-muted/40 rounded-md transition-colors md:whitespace-nowrap"
              >
                <Plus className="h-3.5 w-3.5" />
                Lägg till företag
              </Link>
            </div>
          </div>,
          document.body
        )}
      </div>
    )
  }

  // Self-service user (no team) — simple company display
  const hasMultiple = companies.length > 1

  return (
    <div>
      <button
        ref={triggerRef}
        onClick={() => hasMultiple && setOpen(!open)}
        className={cn(
          'flex items-center gap-1.5 w-full text-left rounded-lg transition-colors',
          hasMultiple && 'hover:bg-muted/40 -mx-1 px-1 py-0.5',
        )}
        aria-expanded={open}
        aria-haspopup="listbox"
      >
        <p className="text-[13px] font-semibold text-foreground truncate tracking-[-0.01em] flex-1">
          {company?.name || 'Min verksamhet'}
        </p>
        {hasMultiple && (
          <ChevronsUpDown className="h-3 w-3 text-muted-foreground flex-shrink-0" />
        )}
      </button>

      {open && createPortal(
        <div
          ref={dropdownRef}
          className="fixed min-w-56 w-max max-w-[calc(100vw-1rem)] bg-card border border-border/60 rounded-lg shadow-lg z-[60] py-1 animate-in fade-in slide-in-from-top-1 duration-150"
          style={{ top: dropdownPos.top, left: dropdownPos.left }}
        >
          <div className="max-h-48 overflow-y-auto px-1">
            {companies.map(({ company: c, role }) => (
              <button
                key={c.id}
                onClick={() => handleSwitch(c.id)}
                disabled={isPending}
                className={cn(
                  'flex items-center gap-2 w-full px-2.5 py-2 text-left text-[13px] leading-snug transition-colors rounded-md md:whitespace-nowrap',
                  c.id === company?.id
                    ? 'text-foreground bg-muted/40'
                    : 'text-muted-foreground hover:text-foreground hover:bg-muted/40',
                  isPending && 'opacity-50',
                )}
                role="option"
                aria-selected={c.id === company?.id}
              >
                <span className="flex-1 min-w-0">{c.name}</span>
                {role !== 'owner' && (
                  <span className="text-[10px] text-muted-foreground/60 flex-shrink-0">
                    {role}
                  </span>
                )}
                {c.id === company?.id && (
                  <Check className="h-3.5 w-3.5 text-primary flex-shrink-0" />
                )}
                {isPending && c.id !== company?.id && (
                  <Loader2 className="h-3 w-3 animate-spin text-muted-foreground flex-shrink-0" />
                )}
              </button>
            ))}
          </div>
        </div>,
        document.body
      )}
    </div>
  )
}