"use client";

import {
  Check,
  ChevronsUpDown,
  Pencil,
  PlusCircle,
  Search,
  User,
  X,
} from "lucide-react";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
import { AuthUIContext } from "../../lib/auth-ui-provider";
import { cn } from "../../lib/utils";
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Button } from "../ui/button";
import {
  Command,
  CommandGroup,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "../ui/command";
import { Input } from "../ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Skeleton } from "../ui/skeleton";
import { CreateOrganizationModal } from "./create-organization-modal";

export type OrganizationSwitcherClassNames = {
  base?: string;
  trigger?: string;
  popover?: string;
  command?: string;
  commandInput?: string;
  commandEmpty?: string;
  commandList?: string;
  commandItem?: string;
  commandSeparator?: string;
  createButton?: string;
  avatar?: string;
  avatarFallback?: string;
  organizationName?: string;
  organizationRole?: string;
};

export interface OrganizationSwitcherProps {
  className?: string;
  classNames?: OrganizationSwitcherClassNames;
  activeFirstOrg?: boolean;
  editOrganizationUrl?: string;
  logoSize?: number;
  logoExtension?: string;
}

export function OrganizationSwitcher({
  className,
  classNames,
  activeFirstOrg,
  editOrganizationUrl,
  logoSize = 128,
  logoExtension = "png",
}: OrganizationSwitcherProps) {
  const { authClient, navigate } = useContext(AuthUIContext);
  const [open, setOpen] = useState(false);
  const [createModalOpen, setCreateModalOpen] = useState(false);

  const { data: organizations = [], isPending: isLoadingOrgs = false } =
    authClient.useListOrganizations?.() || {};
  const {
    data: activeOrganization = null,
    isPending: isLoadingActive = false,
  } = authClient.useActiveOrganization?.() || {};

  const activeOrganizationReflect = organizations?.find(
    (org) => org?.id === activeOrganization?.id
  );

  const isLoading = isLoadingOrgs || isLoadingActive;

  // Function to set the active organization
  const setActiveOrganization = async (organizationId: string) => {
    try {
      if (organizationId === activeOrganization?.id) {
        setOpen(false);
        return;
      }

      await authClient.organization.setActive({
        organizationId,
      });

      setOpen(false);
    } catch (error) {
      console.error("Failed to set active organization:", error);
    }
  };

  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
  useEffect(() => {
    if (
      activeFirstOrg &&
      !isLoading &&
      organizations &&
      organizations?.length > 0 &&
      !activeOrganization
    ) {
      setActiveOrganization(organizations[0].id);
    }
  }, [isLoading, organizations, activeOrganization, activeFirstOrg]);

  const [searchQuery, setSearchQuery] = useState("");
  const searchInputRef = useRef<HTMLInputElement>(null);

  const filteredOrganizations = useMemo(() => {
    if (isLoading || !organizations) return [];

    if (!searchQuery.trim()) return organizations;

    const normalizedQuery = searchQuery.toLowerCase().trim();

    return organizations.filter((org) => {
      const normalizedName = org.name.toLowerCase();
      return normalizedName.includes(normalizedQuery);
    });
  }, [organizations, searchQuery, isLoading]);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          aria-expanded={open}
          aria-label="Select organization"
          className={cn(
            "w-[240px] justify-between py-4",
            classNames?.trigger,
            className
          )}
        >
          {isLoading ? (
            <Skeleton className="h-5 w-[150px]" />
          ) : activeOrganizationReflect ? (
            <div className="flex items-center gap-2">
              <Avatar className={cn("h-8 w-8 shrink-0", classNames?.avatar)}>
                <AvatarImage
                  src={activeOrganizationReflect.logo || undefined}
                  alt={activeOrganizationReflect.name}
                />
                <AvatarFallback className={classNames?.avatarFallback}>
                  {activeOrganizationReflect.name.charAt(0).toUpperCase()}
                </AvatarFallback>
              </Avatar>
              <span className={cn("truncate", classNames?.organizationName)}>
                {activeOrganizationReflect.name}
              </span>
            </div>
          ) : (
            <div className="flex items-center gap-2">
              <User className="h-4 w-4" />
              <span>Select organization</span>
            </div>
          )}
          <ChevronsUpDown className="ml-auto h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className={cn("w-[240px] p-0", classNames?.popover)}>
        <Command className={classNames?.command}>
          <div className="flex items-center border-b px-3">
            <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
            <Input
              ref={searchInputRef}
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Search organization..."
              className={cn(
                "h-9 w-full border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
                classNames?.commandInput
              )}
            />
            {searchQuery && (
              <Button
                variant="ghost"
                size="icon"
                className="h-6 w-6"
                onClick={() => setSearchQuery("")}
                type="button"
                aria-label="Clear search"
              >
                <X className="h-4 w-4" />
              </Button>
            )}
          </div>
          <CommandList>
            {isLoading ? (
              <div className="p-2 space-y-2">
                <Skeleton className="h-8 w-full" />
                <Skeleton className="h-8 w-full" />
                <Skeleton className="h-8 w-full" />
              </div>
            ) : !filteredOrganizations?.length ? (
              <div
                className={cn(
                  "py-6 text-center text-sm text-muted-foreground",
                  classNames?.commandEmpty
                )}
              >
                No organization found.
              </div>
            ) : (
              <CommandGroup>
                {filteredOrganizations?.map((organization) => (
                  <CommandItem
                    key={organization.id}
                    value={organization.id}
                    onSelect={() => setActiveOrganization(organization?.id)}
                    className={cn(
                      "flex items-center gap-2 py-2 cursor-pointer",
                      activeOrganization?.id === organization.id && "bg-accent",
                      classNames?.commandItem
                    )}
                  >
                    <Avatar
                      className={cn("h-8 w-8 shrink-0", classNames?.avatar)}
                    >
                      <AvatarImage
                        src={organization.logo || undefined}
                        alt={organization.name}
                      />
                      <AvatarFallback className={classNames?.avatarFallback}>
                        {organization.name.charAt(0).toUpperCase()}
                      </AvatarFallback>
                    </Avatar>
                    <div className="flex flex-col">
                      <span className={classNames?.organizationName}>
                        {organization.name}
                      </span>
                    </div>
                    {activeOrganization?.id === organization.id && (
                      <>
                        <div className=" flex items-center gap-1">
                          <Check className="h-4 w-4" />
                        </div>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-6 w-6 ml-auto"
                          onClick={(e) => {
                            e.stopPropagation();
                            navigate(`${editOrganizationUrl ?? "/editOrg"}`);
                          }}
                          aria-label="Edit organization"
                        >
                          <Pencil className="h-3 w-3" />
                        </Button>
                      </>
                    )}
                  </CommandItem>
                ))}
              </CommandGroup>
            )}

            <>
              <CommandSeparator className={classNames?.commandSeparator} />
              <CommandGroup>
                <CommandItem
                  onSelect={() => setCreateModalOpen(true)}
                  className={cn("cursor-pointer", classNames?.createButton)}
                >
                  <PlusCircle className="mr-2 h-4 w-4" />
                  Create Organization
                </CommandItem>
              </CommandGroup>
            </>
          </CommandList>
        </Command>
      </PopoverContent>
      <CreateOrganizationModal
        open={createModalOpen}
        onOpenChange={setCreateModalOpen}
        logoSize={logoSize}
        logoExtension={logoExtension}
      />
    </Popover>
  );
}