import { ChevronDownIcon, GitBranchIcon } from "lucide-react";
import { Suspense, type ReactNode } from "react";

import type { RepositoryContextPickerProps } from "./repository-picker";
import { REPOSITORY_PANEL_CLASS } from "./repository-picker-layout";
import { ComposerMenuRowsSkeleton, lazyComposerPanel } from "../../ui/composer-menu";
import { Button } from "../../ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../../ui/dropdown-menu";
import { repoCountLabel } from "../lib/format";
import { cn } from "../lib/utils";

type FollowUpRepositoryPickerProps = RepositoryContextPickerProps;

const LazyFollowUpRepositoryMenuBody = lazyComposerPanel(() =>
  import("./follow-up-repository-menu-body").then((module) => module.FollowUpRepositoryMenuBody),
);

function selectedCount(props: FollowUpRepositoryPickerProps): number {
  return (
    props.selectedRepoIds.size +
    (props.selectedPersonalGitHubRepoIds?.size ?? 0) +
    props.manualRepos.filter(
      (repository) => repository.attached !== false && repository.url.trim().length > 0,
    ).length
  );
}

export function FollowUpRepositoryMenuBody(
  props: FollowUpRepositoryPickerProps & { leading?: ReactNode | undefined },
) {
  return (
    <Suspense
      fallback={
        <div className="flex min-h-0 flex-col">
          {props.leading}
          <ComposerMenuRowsSkeleton rows={4} label="Loading repositories" />
        </div>
      }
    >
      <LazyFollowUpRepositoryMenuBody {...props} />
    </Suspense>
  );
}

export function FollowUpRepositoryPicker(props: FollowUpRepositoryPickerProps) {
  const count = selectedCount(props);
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          disabled={props.pending}
          aria-label="Repository context"
          className={cn(
            "h-8 max-w-[13rem] gap-1.5 rounded-full border border-transparent px-2.5 text-xs",
            "text-fg-muted hover:border-border hover:bg-surface-2 hover:text-fg",
            count > 0 && "border-brand/35 bg-brand/10 text-fg",
            props.triggerClassName,
          )}
        >
          <GitBranchIcon className="size-3.5" />
          <span className="truncate">{count > 0 ? repoCountLabel(count) : "Repos"}</span>
          <ChevronDownIcon className="size-3 shrink-0" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="start"
        side="top"
        sideOffset={8}
        className={REPOSITORY_PANEL_CLASS}
      >
        <FollowUpRepositoryMenuBody {...props} />
      </DropdownMenuContent>
    </DropdownMenu>
  );
}