import type {
  EditorId,
  EnvironmentId,
  ProjectScript,
  ResolvedKeybindingsConfig,
  ThreadId,
} from "@t3tools/contracts";
import type { EnvironmentConnectionPresentation } from "@t3tools/client-runtime/connection";
import { AlertTriangleIcon, XIcon } from "lucide-react";

import type { DraftId } from "../../composerDraftStore";
import { useT3ProjectFileScripts } from "../../hooks/useT3ProjectFileScripts";
import type { EnvMode, EnvironmentOption } from "../BranchToolbar.logic";
import { BranchToolbar } from "../BranchToolbar";
import { BranchToolbarEnvironmentSelector } from "../BranchToolbarEnvironmentSelector";
import GitActionsControl from "../GitActionsControl";
import ProjectScriptsControl, {
  type NewProjectScriptInput,
  type ProjectScriptActionResult,
} from "../ProjectScriptsControl";
import { Button } from "../ui/button";
import { ScrollArea } from "../ui/scroll-area";
import { cn } from "../../lib/utils";
import { OpenInPicker } from "./OpenInPicker";
import { ThreadAutomationsPanel } from "./ThreadAutomationsPanel";
import { ThreadRelationshipsPanel } from "./ThreadRelationshipsControl";

interface VersionMismatchIssue {
  readonly clientVersion: string;
  readonly serverVersion: string;
  readonly serverLabel: string;
}

export interface ThreadDetailsPanelProps {
  mode: "inline" | "popover";
  onClose?: () => void;
  environmentId: EnvironmentId;
  environmentConnection: EnvironmentConnectionPresentation | null;
  threadId: ThreadId;
  draftId?: DraftId;
  activeProjectName: string | undefined;
  activeProjectScripts: ReadonlyArray<ProjectScript> | undefined;
  preferredScriptId: string | null;
  keybindings: ResolvedKeybindingsConfig;
  availableEditors: ReadonlyArray<EditorId>;
  showOpenInPicker: boolean;
  gitCwd: string | null;
  isGitRepo: boolean;
  envLocked: boolean;
  availableEnvironments: readonly EnvironmentOption[];
  onEnvironmentChange: (environmentId: EnvironmentId) => void;
  onEnvModeChange: (mode: EnvMode) => void;
  effectiveEnvModeOverride?: EnvMode;
  activeThreadBranchOverride?: string | null;
  onActiveThreadBranchOverrideChange?: (branch: string | null) => void;
  startFromOrigin: boolean;
  onStartFromOriginChange: (startFromOrigin: boolean) => void;
  onCheckoutPullRequestRequest?: (reference: string) => void;
  onComposerFocusRequest: () => void;
  onOpenChanges?: () => void;
  onReconnectEnvironment: () => void;
  onOpenConnectionSettings: () => void;
  versionMismatch: VersionMismatchIssue | null;
  onDismissVersionMismatch: () => void;
  onRunProjectScript: (script: ProjectScript) => void;
  onAddProjectScript: (input: NewProjectScriptInput) => Promise<ProjectScriptActionResult>;
  onUpdateProjectScript: (
    scriptId: string,
    input: NewProjectScriptInput,
  ) => Promise<ProjectScriptActionResult>;
  onDeleteProjectScript: (scriptId: string) => Promise<ProjectScriptActionResult>;
}

export function ThreadDetailsPanel(props: ThreadDetailsPanelProps) {
  const fileScripts = useT3ProjectFileScripts(
    props.environmentId,
    props.activeProjectScripts ? props.gitCwd : null,
  );
  const connectionIssue =
    props.environmentConnection !== null &&
    props.environmentConnection.phase !== "connected" &&
    props.environmentConnection.phase !== "available";
  const isReconnecting =
    props.environmentConnection?.phase === "connecting" ||
    props.environmentConnection?.phase === "reconnecting";
  const branchToolbarProps = {
    showGitControls: props.isGitRepo,
    environmentId: props.environmentId,
    threadId: props.threadId,
    ...(props.draftId ? { draftId: props.draftId } : {}),
    onEnvModeChange: props.onEnvModeChange,
    startFromOrigin: props.startFromOrigin,
    onStartFromOriginChange: props.onStartFromOriginChange,
    ...(props.effectiveEnvModeOverride
      ? { effectiveEnvModeOverride: props.effectiveEnvModeOverride }
      : {}),
    ...(props.activeThreadBranchOverride !== undefined
      ? { activeThreadBranchOverride: props.activeThreadBranchOverride }
      : {}),
    ...(props.onActiveThreadBranchOverrideChange
      ? { onActiveThreadBranchOverrideChange: props.onActiveThreadBranchOverrideChange }
      : {}),
    envLocked: props.envLocked,
    onComposerFocusRequest: props.onComposerFocusRequest,
    ...(props.onCheckoutPullRequestRequest
      ? { onCheckoutPullRequestRequest: props.onCheckoutPullRequestRequest }
      : {}),
  };

  const card = (
    <div
      className={cn(
        // A single-track grid, because a grid area is a definite containing block: the card's own
        // height is "content, clamped by max-height", which percentages treat as indefinite — as
        // a plain block (or even a flex column) every `h-full`/`max-h-full` down the chain
        // resolved to nothing, the scroll area's viewport stayed at its content height, and the
        // card's overflow-hidden clipped the content instead of scrolling it. `minmax(0,1fr)`
        // still shrink-wraps short content while letting the clamp bite on tall content.
        "dropdown-glass isolate contain-paint grid max-h-full grid-rows-[minmax(0,1fr)] overflow-hidden rounded-[20px]",
        // The popup's real ceiling is what base-ui measured for it — the anchor's clipping
        // ancestors, which is how an open terminal drawer shrinks it — less the popover
        // viewport's own p-2. The dvh term is the fallback's fallback, from before.
        props.mode === "popover" &&
          "max-h-[min(calc(100dvh-6.5rem),calc(var(--available-height,100dvh)-1rem))]",
      )}
      data-thread-details-card
    >
      <ScrollArea scrollFade className="min-h-0">
        <section aria-labelledby="thread-details-workspace-heading">
          <div className="flex min-h-10 items-center justify-between gap-3 px-3.5 pb-1 pt-3">
            <h3
              id="thread-details-workspace-heading"
              className="text-[11px] font-medium text-muted-foreground"
            >
              Workspace
            </h3>
          </div>

          {connectionIssue ? (
            <div className="mx-3 mb-2 rounded-xl border border-warning/30 bg-warning/6 p-3">
              <div className="flex gap-2">
                <AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0 text-warning" />
                <div className="min-w-0 flex-1">
                  <p className="text-xs font-medium">Environment unavailable</p>
                  <p className="mt-1 text-[11px] leading-relaxed text-muted-foreground">
                    {props.environmentConnection?.error ??
                      "Reconnect this environment before sending messages or running actions."}
                  </p>
                  <div className="mt-2 flex items-center gap-1.5">
                    <Button
                      size="xs"
                      disabled={isReconnecting}
                      onClick={props.onReconnectEnvironment}
                    >
                      {isReconnecting ? "Reconnecting..." : "Reconnect"}
                    </Button>
                    <Button size="xs" variant="ghost" onClick={props.onOpenConnectionSettings}>
                      Connections
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          ) : null}

          {props.versionMismatch ? (
            <div className="mx-3 mb-2 flex gap-2 rounded-xl border border-warning/30 bg-warning/6 p-3">
              <AlertTriangleIcon className="mt-0.5 size-3.5 shrink-0 text-warning" />
              <div className="min-w-0 flex-1">
                <p className="text-xs font-medium">Client and server versions differ</p>
                <p className="mt-1 text-[11px] leading-relaxed text-muted-foreground">
                  Client {props.versionMismatch.clientVersion} · {props.versionMismatch.serverLabel}{" "}
                  {props.versionMismatch.serverVersion}
                </p>
              </div>
              <Button
                size="icon-xs"
                variant="ghost"
                aria-label="Dismiss version mismatch warning"
                onClick={props.onDismissVersionMismatch}
              >
                <XIcon className="size-3.5" />
              </Button>
            </div>
          ) : null}

          <div className="flex flex-col px-2 pb-2.5">
            {props.availableEnvironments.length > 1 ? (
              <BranchToolbarEnvironmentSelector
                displayMode="panel"
                envLocked={props.envLocked}
                environmentId={props.environmentId}
                availableEnvironments={props.availableEnvironments}
                onEnvironmentChange={props.onEnvironmentChange}
              />
            ) : null}

            <BranchToolbar layout="panel" panelSection="workspace" {...branchToolbarProps} />

            {props.showOpenInPicker ? (
              <OpenInPicker
                environmentId={props.environmentId}
                keybindings={props.keybindings}
                availableEditors={props.availableEditors}
                openInCwd={props.gitCwd}
                displayMode="panel"
              />
            ) : null}

            {props.activeProjectScripts ? (
              <ProjectScriptsControl
                displayMode="panel"
                scripts={props.activeProjectScripts}
                fileScripts={fileScripts}
                keybindings={props.keybindings}
                preferredScriptId={props.preferredScriptId}
                onRunScript={props.onRunProjectScript}
                onAddScript={props.onAddProjectScript}
                onUpdateScript={props.onUpdateProjectScript}
                onDeleteScript={props.onDeleteProjectScript}
              />
            ) : null}
          </div>
        </section>

        {props.gitCwd ? (
          <section
            aria-labelledby="thread-details-version-control-heading"
            className="border-t border-border/65"
          >
            <div className="px-3.5 pb-1 pt-3">
              <h3
                id="thread-details-version-control-heading"
                className="text-[11px] font-medium text-muted-foreground"
              >
                Version Control
              </h3>
            </div>
            <div className="flex flex-col px-2 pb-2.5">
              {props.isGitRepo ? (
                <BranchToolbar layout="panel" panelSection="branch" {...branchToolbarProps} />
              ) : null}
              {props.activeProjectName ? (
                <GitActionsControl
                  displayMode="panel"
                  gitCwd={props.gitCwd}
                  activeThreadRef={{ environmentId: props.environmentId, threadId: props.threadId }}
                  {...(props.draftId ? { draftId: props.draftId } : {})}
                  {...(props.onOpenChanges ? { onOpenChanges: props.onOpenChanges } : {})}
                />
              ) : null}
            </div>
          </section>
        ) : null}

        {!props.draftId ? (
          <ThreadAutomationsPanel environmentId={props.environmentId} threadId={props.threadId} />
        ) : null}

        {!props.draftId ? (
          <ThreadRelationshipsPanel environmentId={props.environmentId} threadId={props.threadId} />
        ) : null}
      </ScrollArea>
    </div>
  );

  if (props.mode === "popover") {
    return <div data-thread-details-panel="popover">{card}</div>;
  }

  return (
    <aside
      aria-label="Thread details"
      className="absolute inset-y-0 right-[var(--app-scrollbar-width)] z-20 w-[var(--thread-details-panel-width)] p-3"
      data-thread-details-panel="inline"
    >
      {card}
    </aside>
  );
}