import { useLingui } from "@lingui/react/macro";
import type { BotSection, Space } from "@rakazo/contracts";
import { Button } from "@rakazo/ui-web";
import { ChevronDown, Folder, GripVertical, Lock, MoreHorizontal } from "lucide-react";
import type { RefObject } from "react";
import { ProjectDragGrip } from "../../components/SortableGroup";
import type { ContextMenuPosition } from "../BotContextMenu";

export type SidebarGroupHeaderGroup = {
  key: string;
  title: string | null;
  sectionId: string | null;
  spaceId: string;
  spaceName: string;
  canDeleteSpace: boolean;
  emptySpaceId: string | undefined;
  showLock: boolean;
};

export type SpaceMenuRequest = { id: string; position: ContextMenuPosition };

export type SectionMenuRequest = {
  section: BotSection;
  spaceId: string;
  position: ContextMenuPosition;
};

/**
 * Collapsible title of a sidebar group. Project groups add a drag grip, show a lock for other
 * spaces and select an empty space instead of opening it.
 */
export function SidebarGroupHeader({
  variant,
  group,
  collapsed,
  activeSpaceId,
  botSections,
  spaces,
  onOpenEmptySpace,
  onToggle,
  sectionMenuAnchor,
  onSectionMenu,
  spaceMenuAnchor,
  onSpaceMenu,
}: {
  variant: "conversation" | "project";
  group: SidebarGroupHeaderGroup;
  collapsed: boolean;
  activeSpaceId: string | undefined;
  botSections: BotSection[];
  spaces: Space[];
  onOpenEmptySpace: (spaceId: string) => void;
  onToggle: (key: string) => void;
  sectionMenuAnchor: RefObject<HTMLElement | null>;
  onSectionMenu: (menu: SectionMenuRequest) => void;
  spaceMenuAnchor: RefObject<HTMLElement | null>;
  onSpaceMenu: (menu: SpaceMenuRequest) => void;
}) {
  const { t } = useLingui();
  const project = variant === "project";
  return (
    <div
      className={
        project ? "flex items-center pt-3 pb-0.5 relative" : "flex items-center pt-3 pb-0.5"
      }
    >
      {project ? (
        // Drag grip — positioned to the left of the title text
        <ProjectDragGrip className="absolute left-1 top-1/2 -translate-y-1/2 w-6 h-6 rounded flex items-center justify-center text-muted-foreground/30 hover:text-muted-foreground/70 active:text-muted-foreground transition-colors cursor-grab active:cursor-grabbing">
          <GripVertical className="size-icon-sm" strokeWidth={2} />
        </ProjectDragGrip>
      ) : null}
      <button
        type="button"
        className={`flex min-w-0 flex-1 items-center justify-between gap-2 rounded-lg ${project ? "pl-8" : "px-2.5"} py-1 text-ui-label font-semibold tracking-wider uppercase text-foreground/65 dark:text-muted-foreground/80 hover:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring`}
        onClick={() => {
          if (group.emptySpaceId) {
            onOpenEmptySpace(group.emptySpaceId);
            return;
          }
          onToggle(group.key);
        }}
        data-long-press={group.sectionId || group.canDeleteSpace ? "" : undefined}
        onContextMenu={
          group.sectionId
            ? (event) => {
                event.preventDefault();
                // Prefer section rename over delete-space when both apply;
                // the dedicated space-actions button still opens the space menu.
                const sections =
                  group.spaceId === activeSpaceId
                    ? botSections
                    : (spaces.find((space) => space.id === group.spaceId)?.botSections ?? []);
                const section = sections.find((item) => item.id === group.sectionId);
                if (!section) return;
                sectionMenuAnchor.current = event.currentTarget;
                onSectionMenu({
                  section,
                  spaceId: group.spaceId,
                  position: { x: event.clientX, y: event.clientY },
                });
              }
            : group.canDeleteSpace
              ? (event) => {
                  event.preventDefault();
                  spaceMenuAnchor.current = event.currentTarget;
                  onSpaceMenu({
                    id: group.spaceId,
                    position: { x: event.clientX, y: event.clientY },
                  });
                }
              : undefined
        }
        aria-expanded={group.emptySpaceId ? undefined : !collapsed}
        aria-label={
          group.emptySpaceId
            ? project
              ? t`Select ${group.title}`
              : t`Open ${group.title}`
            : collapsed
              ? t`Expand ${group.title}`
              : t`Collapse ${group.title}`
        }
      >
        <span className="flex min-w-0 items-center gap-1.5 truncate">
          {project ? (
            group.showLock ? (
              <Lock strokeWidth={2} aria-hidden="true" className="size-icon-sm" />
            ) : null
          ) : (
            <Folder strokeWidth={2} aria-hidden="true" className="size-icon-sm" />
          )}
          <span className="truncate">{group.title}</span>
        </span>
        {group.emptySpaceId ? null : (
          <ChevronDown
            strokeWidth={1.8}
            className={`size-icon-md ${collapsed ? "-rotate-90 transition-transform" : "transition-transform"}`}
            aria-hidden="true"
          />
        )}
      </button>
      {group.canDeleteSpace ? (
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label={t`Actions for ${group.spaceName}`}
          onClick={(event) => {
            const rect = event.currentTarget.getBoundingClientRect();
            spaceMenuAnchor.current = event.currentTarget;
            onSpaceMenu({
              id: group.spaceId,
              position: { x: rect.left, y: rect.bottom },
            });
          }}
        >
          <MoreHorizontal aria-hidden="true" className="size-icon-md" />
        </Button>
      ) : null}
    </div>
  );
}