"use client";

import { BriefcaseBusiness, Building2, Check, ChevronDown, Users2 } from "lucide-react";
import { useRouter } from "next/navigation";
import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "@/components/ui/dropdown";
import { useTeams } from "@/hooks/use-teams";
import { useWorkspaceStore } from "@/stores/workspace-store";
import { cn } from "@/lib/utils";

interface WorkspaceSwitcherProps {
  compact?: boolean;
  className?: string;
}

export function WorkspaceSwitcher({
  compact = false,
  className,
}: WorkspaceSwitcherProps) {
  const router = useRouter();
  const { teams, activeTeam, loading } = useTeams();
  const activeTeamId = useWorkspaceStore((state) => state.activeTeamId);
  const initialized = useWorkspaceStore((state) => state.initialized);
  const setActiveTeamId = useWorkspaceStore((state) => state.setActiveTeamId);

  const label = !initialized
    ? "Workspace"
    : loading
    ? "Loading workspace..."
    : activeTeam?.name || "Personal workspace";

  const subtitle = activeTeam ? "Shared team space" : "Private workspace";

  return (
    <Dropdown>
      <DropdownTrigger
        className={cn(
          "w-full rounded-lg border border-white/[0.06] bg-white/[0.03] text-left transition-all hover:border-white/[0.1] hover:bg-white/[0.05]",
          compact ? "px-2 py-2" : "px-3 py-2.5",
          className
        )}
      >
        <div className="flex items-center gap-2.5">
          <div
            className={cn(
              "flex shrink-0 items-center justify-center rounded-md bg-indigo-500/15 text-indigo-400",
              compact ? "h-7 w-7" : "h-8 w-8"
            )}
          >
            {activeTeam ? (
              <Users2 className="h-3.5 w-3.5" />
            ) : (
              <BriefcaseBusiness className="h-3.5 w-3.5" />
            )}
          </div>
          {!compact && (
            <div className="min-w-0 flex-1">
              <p className="truncate text-[13px] font-medium text-white/80">{label}</p>
              <p className="truncate text-[11px] text-white/30">{subtitle}</p>
            </div>
          )}
          <ChevronDown className="ml-auto h-3.5 w-3.5 shrink-0 text-white/20" />
        </div>
      </DropdownTrigger>

      <DropdownContent className="w-72 p-2" portal align="start">
        <div className="px-2.5 pb-1.5 pt-2">
          <p className="text-[9px] font-bold uppercase tracking-[0.18em] text-white/25">
            Workspace
          </p>
        </div>

        <DropdownItem
          className={cn("justify-between gap-2", activeTeamId === null && "bg-white/[0.06]")}
          onClick={() => setActiveTeamId(null)}
        >
          <div className="flex min-w-0 flex-1 items-center gap-2.5">
            <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-white/[0.06]">
              <BriefcaseBusiness className="h-3.5 w-3.5 text-white/50" />
            </div>
            <div className="min-w-0 flex-1 text-left">
              <p className="truncate text-[13px] font-medium text-white/80">Personal</p>
              <p className="truncate text-[11px] text-white/30">Private workspace</p>
            </div>
          </div>
          {activeTeamId === null && <Check className="h-3.5 w-3.5 shrink-0 text-indigo-400" />}
        </DropdownItem>

        {teams.length > 0 && (
          <div className="mt-1 border-t border-white/[0.05] pt-1">
            {teams.map((team) => {
              const isActive = team.id === activeTeamId;
              return (
                <DropdownItem
                  key={team.id}
                  className={cn("justify-between gap-2", isActive && "bg-white/[0.06]")}
                  onClick={() => setActiveTeamId(team.id)}
                >
                  <div className="flex min-w-0 flex-1 items-center gap-2.5">
                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-indigo-500/10">
                      <Users2 className="h-3.5 w-3.5 text-indigo-400" />
                    </div>
                    <div className="min-w-0 flex-1 text-left">
                      <p className="truncate text-[13px] font-medium text-white/80">{team.name}</p>
                      <p className="truncate text-[11px] text-white/30">
                        {team.description || "Shared team workspace"}
                      </p>
                    </div>
                  </div>
                  {isActive && <Check className="h-3.5 w-3.5 shrink-0 text-indigo-400" />}
                </DropdownItem>
              );
            })}
          </div>
        )}

        <div className="mt-1 border-t border-white/[0.05] pt-1">
          <DropdownItem onClick={() => router.push("/teams")}>
            <Users2 className="h-4 w-4 text-white/30" />
            Manage teams
          </DropdownItem>
          <DropdownItem onClick={() => router.push("/organizations")}>
            <Building2 className="h-4 w-4 text-white/30" />
            Manage organizations
          </DropdownItem>
        </div>
      </DropdownContent>
    </Dropdown>
  );
}