'use client';

import * as React from 'react';
import { Check, ChevronsUpDown } from 'lucide-react';

import {
  DropdownMenu,
  DropdownMenuItem,
  DropdownMenuContent,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';
import {
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton
} from '@/components/ui/sidebar';
import {
  Avatar,
  AvatarFallback,
  AvatarImage
} from '@/components/ui/avatar';
import {
  organization,
  useListOrganizations,
  useActiveOrganization
} from '@/lib/auth/auth-client';

export function OrgSwitcher() {
  const organizations = useListOrganizations();
  const activeOrganization = useActiveOrganization();

  const handleOrganizationSwitch = async (
    org: { id: string; name: string } | null
  ) => {
    try {
      await organization.setActive({
        organizationId: org?.id || null
      });
    } catch {
      // Handle error silently
    }
  };

  // Get current active organization or default to personal
  const currentOrg = activeOrganization.data || null;
  const displayName = currentOrg?.name || 'Personal';
  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size='lg'
              className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
            >
              <Avatar className='h-8 w-8 rounded-lg'>
                <AvatarImage
                  src={currentOrg?.logo || undefined}
                  alt={`${displayName} logo`}
                  className='object-cover'
                />
                <AvatarFallback className='rounded-lg text-lg font-semibold'>
                  {displayName.charAt(0).toUpperCase()}
                </AvatarFallback>
              </Avatar>
              <div className='flex flex-col gap-0.5 leading-none'>
                <span className='font-semibold'>Dashboard</span>
                <span className=''>{displayName}</span>
              </div>
              <ChevronsUpDown className='ml-auto' />
            </SidebarMenuButton>
          </DropdownMenuTrigger>
          <DropdownMenuContent
            className='w-[--radix-dropdown-menu-trigger-width]'
            align='start'
          >
            {/* Personal workspace option */}
            <DropdownMenuItem onSelect={() => handleOrganizationSwitch(null)}>
              Personal
              {!currentOrg && <Check className='ml-auto' />}
            </DropdownMenuItem>

            {/* Organization options */}
            {organizations.data?.map((org) => (
              <DropdownMenuItem
                key={org.id}
                onSelect={() => handleOrganizationSwitch(org)}
              >
                {org.name}
                {org.id === currentOrg?.id && <Check className='ml-auto' />}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </SidebarMenuItem>
    </SidebarMenu>
  );
}