import { AgentCollapsedRail, AgentCommandPanel, AgentPersona } from "@/features/agent";
import { cn } from "@/shared/ui/cn";
import { useEffect, type ComponentProps } from "react";
import {
  getAgentPanelMaxWidth,
  getWorkbenchViewportLayout
} from "../layout/workbench-layout";
import { useAgentPanelResize } from "../hooks/use-agent-panel-resize";

type AgentPanelProps = Omit<ComponentProps<typeof AgentCommandPanel>, "collapsing" | "onCollapse">;

type WorkbenchAgentPanelsProps = {
  panelProps: AgentPanelProps;
  panelOpen: boolean;
  panelCollapsing: boolean;
  personaState: ComponentProps<typeof AgentPersona>["state"];
  statusLabel: string;
  viewportWidth: number;
  onCollapsePanel: () => void;
  onExpandPanel: () => void;
  onWidthCommit?: (width: number) => void;
};

export function WorkbenchAgentPanels({
  panelProps,
  panelOpen,
  panelCollapsing,
  personaState,
  statusLabel,
  viewportWidth,
  onCollapsePanel,
  onExpandPanel,
  onWidthCommit
}: WorkbenchAgentPanelsProps) {
  const resize = useAgentPanelResize(viewportWidth);
  const defaultWidth = getWorkbenchViewportLayout(viewportWidth).agentWidth;
  const committedWidth = resize.committedWidth ?? defaultWidth;

  useEffect(() => {
    onWidthCommit?.(committedWidth);
  }, [committedWidth, onWidthCommit]);

  return (
    <div
      ref={resize.panelRef}
      className="pointer-events-none absolute bottom-4 left-3 top-24 z-20 hidden w-[var(--workbench-agent-width)] max-w-[620px] 2xl:w-[var(--workbench-agent-width-wide)] lg:block"
      style={resize.width === null ? undefined : { width: resize.width }}
    >
      {panelOpen ? (
        <>
          <AgentCommandPanel
            {...panelProps}
            presentation="desktop-floating"
            collapsing={panelCollapsing}
            onCollapse={onCollapsePanel}
          />
          <div
            aria-label="调整 Agent 面板宽度"
            aria-orientation="vertical"
            aria-valuemax={getAgentPanelMaxWidth(viewportWidth)}
            aria-valuemin={defaultWidth}
            aria-valuenow={Math.round(resize.width ?? defaultWidth)}
            className={cn(
              "group pointer-events-auto absolute -right-3 top-4 bottom-4 z-10 flex w-6 cursor-ew-resize touch-none items-center justify-center outline-hidden",
              resize.resizing && "[&>span]:bg-blue-500 [&>span]:opacity-100"
            )}
            role="separator"
            tabIndex={0}
            title="拖拽调整 Agent 面板宽度"
            onKeyDown={resize.handleKeyDown}
            onPointerDown={resize.handlePointerDown}
          >
            <span className="h-14 w-1 rounded-full bg-slate-500/60 opacity-50 shadow-xs transition-[height,background-color,opacity] group-hover:h-20 group-hover:bg-blue-500 group-hover:opacity-100 group-focus-visible:h-20 group-focus-visible:bg-blue-500 group-focus-visible:opacity-100" />
          </div>
        </>
      ) : (
        <AgentCollapsedRail
          personaState={personaState}
          statusLabel={statusLabel}
          onExpand={onExpandPanel}
        />
      )}
    </div>
  );
}