"use client";

import { useState, useMemo, useCallback } from "react";
import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
import { useMultiSelect } from "@/hooks/use-multi-select";
import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
import { cn } from "@/lib/utils";
import type { FileInfo } from "@/lib/state/store";
import { useDockviewStore } from "@/lib/state/dockview-store";
import { useAppStore } from "@/components/state-provider";
import { FileRow, BulkActionBar } from "./changes-panel-file-row";
import { ChangesTree, RepoTreeGroup } from "./changes-panel-tree";
import type { ChangedFile } from "./changes-panel-helpers";
import { type CommitItem } from "./commit-row";
import { groupByRepositoryName, isSingleRepoGroup } from "@/lib/group-by-repo";
import {
  CommitsGroupActions,
  CommitsRepoGroup,
  FileSectionActions,
  RepoGroupItem,
} from "./changes-panel-repo-groups";
import { PRFilesGroupedList } from "./changes-panel-pr-files";
import type { CommitDetailTarget, OpenDiffOptions } from "./changes-diff-target";
import { useTranslation } from "react-i18next";

// --- Timeline visual components ---

// Per-repo grouping is shared with the Review dialog — see @/lib/group-by-repo.

// --- Timeline section dot colors ---
const DOT_COLORS = {
  unstaged: "bg-yellow-500",
  staged: "bg-emerald-500",
  commits: "bg-blue-500",
  pr: "bg-purple-500",
} as const;

function TimelineDot({ color }: { color: string }) {
  return <div className={cn("relative z-10 size-1.5 rounded-full shrink-0 mt-[5px]", color)} />;
}

function TimelineSection({
  dotColor,
  label,
  count,
  action,
  children,
  collapsible = true,
  defaultCollapsed = false,
  "data-testid": testId,
}: {
  dotColor: string;
  label?: string;
  count?: number;
  action?: React.ReactNode;
  children?: React.ReactNode;
  collapsible?: boolean;
  defaultCollapsed?: boolean;
  "data-testid": string;
}) {
  const [collapsed, setCollapsed] = useState(defaultCollapsed);
  // Git data arrives in separate async store updates, so `defaultCollapsed`
  // (derived from which section is first-visible) can flip after mount. Re-sync
  // to it whenever it changes — but stop once the user has manually toggled, so
  // their choice is never clobbered by a later data update. Adjusting state
  // during render (storing the previous prop in state) is the React-recommended
  // pattern and avoids both the setState-in-effect and ref-during-render lint
  // rules.
  const [userToggled, setUserToggled] = useState(false);
  const [prevDefaultCollapsed, setPrevDefaultCollapsed] = useState(defaultCollapsed);
  if (prevDefaultCollapsed !== defaultCollapsed) {
    setPrevDefaultCollapsed(defaultCollapsed);
    if (!userToggled) setCollapsed(defaultCollapsed);
  }
  const canCollapse = collapsible && !!label;

  return (
    <div className="relative flex gap-2.5" data-testid={testId}>
      {/* Vertical line + dot */}
      <div className="flex flex-col items-center">
        <TimelineDot color={dotColor} />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0 pb-3">
        {/* Header */}
        {label && (
          <div className="flex items-center justify-between gap-2 -mt-0.5 mb-1">
            {canCollapse ? (
              <button
                type="button"
                className="flex items-center gap-1 text-[11px] font-medium uppercase tracking-wider text-foreground/70 cursor-pointer hover:text-foreground/90"
                onClick={() => {
                  setUserToggled(true);
                  setCollapsed((c) => !c);
                }}
                aria-expanded={!collapsed}
                data-testid={`${testId}-collapse-toggle`}
              >
                {label}
                {typeof count === "number" && (
                  <span className="text-muted-foreground/50 font-normal">({count})</span>
                )}
                {collapsed ? (
                  <IconChevronRight className="h-3 w-3 text-muted-foreground/50" />
                ) : (
                  <IconChevronDown className="h-3 w-3 text-muted-foreground/50" />
                )}
              </button>
            ) : (
              <span className="text-[11px] font-medium uppercase tracking-wider text-foreground/70">
                {label}
                {typeof count === "number" && (
                  <span className="ml-1 text-muted-foreground/50 font-normal">({count})</span>
                )}
              </span>
            )}
            {action}
          </div>
        )}

        {/* Children (file list, buttons, etc.) */}
        {!collapsed && children}
      </div>
    </div>
  );
}

// --- Commits section ---

type CommitsSectionProps = {
  commits: CommitItem[];
  onOpenCommitDetail?: (target: CommitDetailTarget) => void;
  // Handlers receive the commit's repository_name so amend/revert/reset land
  // in the right git repo. The empty string routes to the workspace root for
  // single-repo workspaces.
  onRevertCommit?: (sha: string, repo?: string) => void;
  onAmendCommit?: (currentMessage: string, repo?: string) => void;
  onResetToCommit?: (sha: string, repo?: string) => void;
  /** Per-repo Push button rendered in each commits group header. */
  onRepoPush?: (repo: string) => void;
  /** Per-repo Create PR button rendered in each commits group header. */
  onRepoCreatePR?: (repo: string) => void;
  /** Maps a repository_name to its display label (used for the empty single-repo case). */
  repoDisplayName?: (repositoryName: string) => string | undefined;
  /** The session's base branch — passed through to the per-repo PR dialog. */
  repoBaseBranch?: string;
  /** Per-repo branch / upstream summary; used for the Push indicator. */
  perRepoStatus?: Array<{ repository_name: string; pushAhead?: number; ahead?: number }>;
  /** Existing PR URL keyed by repository_name; "" key for single-repo. */
  prByRepo?: Record<string, string | undefined>;
  /** Initial collapse state. Defaults to collapsed; the panel expands it when it is the first visible section. */
  defaultCollapsed?: boolean;
  label?: string;
  testId?: string;
  pushDisabled?: boolean;
  showActions?: boolean;
};

// Commits grouping shares the helper above with files — see @/lib/group-by-repo.

export function CommitsSection({
  commits,
  onOpenCommitDetail,
  onRevertCommit,
  onAmendCommit,
  onResetToCommit,
  onRepoPush,
  onRepoCreatePR,
  repoDisplayName,
  repoBaseBranch,
  perRepoStatus,
  prByRepo,
  defaultCollapsed = true,
  label,
  testId = "commits-section",
  pushDisabled = false,
  showActions = true,
}: CommitsSectionProps) {
  const { t } = useTranslation();
  const groups = groupByRepositoryName(commits, (c) => c.repository_name);
  const aheadByRepo = new Map(
    (perRepoStatus ?? []).map((s) => [s.repository_name, s.pushAhead ?? s.ahead ?? 0]),
  );
  // Single-repo: drop the per-repo sub-header (CommitsRepoGroup with
  // showHeader=false renders flat) and lift the Push / PR buttons into the
  // section header.
  const isSingleRepo = isSingleRepoGroup(groups);
  const sectionAction = isSingleRepo ? (
    <CommitsGroupActions
      repositoryName=""
      aheadCount={aheadByRepo.get("") ?? 0}
      prExists={!!prByRepo?.[""]}
      canCreatePR={!!onRepoCreatePR && !prByRepo?.[""]}
      onRepoPush={showActions && !pushDisabled ? onRepoPush : undefined}
      onRepoCreatePR={showActions ? onRepoCreatePR : undefined}
      stop={(e) => e.stopPropagation()}
    />
  ) : undefined;

  return (
    <TimelineSection
      dotColor={DOT_COLORS.commits}
      label={label ?? t("task:commits")}
      count={commits.length}
      defaultCollapsed={defaultCollapsed}
      data-testid={testId}
      action={sectionAction}
    >
      <ul data-testid="commits-list" className="space-y-0.5">
        {groups.map((g) => (
          <CommitsRepoGroup
            key={g.repositoryName || "__no_repo__"}
            repositoryName={g.repositoryName}
            displayName={repoDisplayName?.(g.repositoryName)}
            groupCommits={g.items}
            aheadCount={aheadByRepo.get(g.repositoryName) ?? 0}
            existingPrUrl={prByRepo?.[g.repositoryName] ?? prByRepo?.[""]}
            showHeader={!isSingleRepo}
            baseBranch={repoBaseBranch}
            onOpenCommitDetail={onOpenCommitDetail}
            onAmendCommit={onAmendCommit}
            onRevertCommit={onRevertCommit}
            onResetToCommit={onResetToCommit}
            onRepoPush={showActions && !pushDisabled ? onRepoPush : undefined}
            onRepoCreatePR={showActions ? onRepoCreatePR : undefined}
          />
        ))}
      </ul>
    </TimelineSection>
  );
}

// --- File list sections (Unstaged / Staged) ---

type FileListSectionProps = {
  variant: "unstaged" | "staged";
  files: ChangedFile[];
  pendingStageFiles: Set<string>;
  actionLabel: string;
  isActionLoading?: boolean;
  onAction: () => void;
  secondaryActionLabel?: string;
  isSecondaryActionLoading?: boolean;
  onSecondaryAction?: () => void;
  onOpenDiff: (path: string, options?: OpenDiffOptions) => void;
  onEditFile: (path: string, repo?: string) => void;
  // Multi-repo: handlers receive the file's repositoryName so each per-file op
  // hits the right git repo. Same-named files across repos collide by path.
  onStage: (path: string, repo?: string) => void;
  onUnstage: (path: string, repo?: string) => void;
  onDiscard: (path: string, repo?: string, anchor?: HTMLElement) => void;
  onBulkStage?: (paths: string[]) => void;
  onBulkUnstage?: (paths: string[]) => void;
  onBulkDiscard?: (paths: string[], anchor?: HTMLElement) => void;
  // Per-repo action handlers shown inline with each repo group header. Always
  // rendered, including single-repo (with one entry pre-selected) — the empty
  // `repo` argument routes ops to the workspace root in that case.
  onRepoAction?: (repo: string) => void;
  onRepoSecondaryAction?: (repo: string) => void;
  /** Maps a repository_name to its display label; called per group header. */
  repoDisplayName?: (repositoryName: string) => string | undefined;
  /** Disable section and per-repository actions while another git operation runs. */
  disabled?: boolean;
};

/**
 * Renders the body of a file-list section. For multi-repo workspaces it
 * groups files by repository under per-repo subheaders; single-repo
 * workspaces fall back to a flat list (no header) so the existing UI is
 * unchanged.
 */
type FileListBodyProps = {
  variant: "unstaged" | "staged";
  files: ChangedFile[];
  pendingStageFiles: Set<string>;
  multiSelect: ReturnType<typeof useMultiSelect>;
  onKeyDown: (e: React.KeyboardEvent) => void;
  onOpenDiff: (path: string, options?: OpenDiffOptions) => void;
  onEditFile: (path: string, repo?: string) => void;
  onStage: (path: string, repo?: string) => void;
  onUnstage: (path: string, repo?: string) => void;
  onDiscard: (path: string, repo?: string, anchor?: HTMLElement) => void;
  /** Per-repo group header actions; primary = Stage all (unstaged) / Commit (staged). */
  onRepoAction?: (repo: string) => void;
  onRepoSecondaryAction?: (repo: string) => void;
  primaryLabel: string;
  secondaryLabel?: string;
  /** Maps a repository_name to its display label (e.g. "" → workspace primary repo name). */
  repoDisplayName?: (repositoryName: string) => string | undefined;
  disabled?: boolean;
};

function FileListBody(props: FileListBodyProps) {
  const { files, pendingStageFiles, multiSelect } = props;
  // Multi-repo nuance: activeFilePath carries the path but not repo; same path
  // in two repos will light up both rows. Matches existing routing limit noted
  // in FileRowProps comments.
  const activeFilePath = useDockviewStore((s) => s.activeFilePath);
  const layout = useAppStore((s) => s.userSettings.changesPanelLayout);
  const groups = useMemo(() => groupByRepositoryName(files, (f) => f.repositoryName), [files]);
  // Per-repo collapsed state: keyed by repositoryName. Default expanded;
  // setting an entry to true collapses that group. Persists across re-renders
  // for the lifetime of this section instance (resets on unmount).
  const [collapsedRepos, setCollapsedRepos] = useState<Set<string>>(() => new Set());
  const toggleRepo = useCallback((name: string) => {
    setCollapsedRepos((prev) => {
      const next = new Set(prev);
      if (next.has(name)) next.delete(name);
      else next.add(name);
      return next;
    });
  }, []);

  const renderRow = (file: ChangedFile) => (
    <FileRow
      key={`${file.repositoryName ?? ""}:${file.path}`}
      file={file}
      isPending={pendingStageFiles.has(`${file.repositoryName ?? ""}::${file.path}`)}
      isSelected={multiSelect.isSelected(file.path)}
      isActive={file.path === activeFilePath}
      onSelect={multiSelect.handleClick}
      onOpenDiff={props.onOpenDiff}
      onStage={props.onStage}
      onUnstage={props.onUnstage}
      onDiscard={props.onDiscard}
      onEditFile={props.onEditFile}
    />
  );

  // Single-repo: drop the per-repo sub-header. The action buttons (Stage all
  // / Commit / Unstage all) move up to the section header — see FileListSection.
  const isSingleRepo = isSingleRepoGroup(groups);

  if (layout === "tree") {
    return (
      <TreeFileListBody
        {...props}
        groups={groups}
        isSingleRepo={isSingleRepo}
        collapsedRepos={collapsedRepos}
        toggleRepo={toggleRepo}
      />
    );
  }

  return (
    <FlatFileListBody
      {...props}
      groups={groups}
      isSingleRepo={isSingleRepo}
      collapsedRepos={collapsedRepos}
      toggleRepo={toggleRepo}
      renderRow={renderRow}
    />
  );
}

type FileListBranchProps = FileListBodyProps & {
  groups: ReturnType<typeof groupByRepositoryName<ChangedFile>>;
  isSingleRepo: boolean;
  collapsedRepos: Set<string>;
  toggleRepo: (name: string) => void;
};
function TreeFileListBody(props: FileListBranchProps) {
  const {
    variant,
    groups,
    isSingleRepo,
    collapsedRepos,
    toggleRepo,
    pendingStageFiles,
    multiSelect,
  } = props;
  return (
    <div tabIndex={-1} onKeyDown={props.onKeyDown}>
      {isSingleRepo ? (
        <ChangesTree
          files={groups[0].items}
          pendingStageFiles={pendingStageFiles}
          onOpenDiff={props.onOpenDiff}
          onEditFile={props.onEditFile}
          onStage={props.onStage}
          onUnstage={props.onUnstage}
          onDiscard={props.onDiscard}
          variant={variant}
          multiSelect={multiSelect}
        />
      ) : (
        groups.map((group) => (
          <RepoTreeGroup
            key={group.repositoryName || "__no_repo__"}
            variant={variant}
            repositoryName={group.repositoryName}
            displayName={props.repoDisplayName?.(group.repositoryName)}
            files={group.items}
            pendingStageFiles={pendingStageFiles}
            collapsed={collapsedRepos.has(group.repositoryName)}
            onToggle={() => toggleRepo(group.repositoryName)}
            onOpenDiff={props.onOpenDiff}
            onEditFile={props.onEditFile}
            onStage={props.onStage}
            onUnstage={props.onUnstage}
            onDiscard={props.onDiscard}
            primaryLabel={props.primaryLabel}
            secondaryLabel={props.secondaryLabel}
            onRepoAction={props.onRepoAction}
            onRepoSecondaryAction={props.onRepoSecondaryAction}
            disabled={props.disabled}
            multiSelect={multiSelect}
          />
        ))
      )}
    </div>
  );
}

function FlatFileListBody(
  props: FileListBranchProps & { renderRow: (file: ChangedFile) => React.ReactNode },
) {
  const { variant, groups, isSingleRepo, collapsedRepos, toggleRepo, renderRow } = props;
  return (
    <div>
      <ul
        data-testid={`${variant}-file-list`}
        className="space-y-0.5"
        tabIndex={-1}
        onKeyDown={props.onKeyDown}
      >
        {isSingleRepo
          ? groups[0].items.map(renderRow)
          : groups.map((group) => (
              <RepoGroupItem
                key={group.repositoryName || "__no_repo__"}
                group={group}
                collapsed={collapsedRepos.has(group.repositoryName)}
                onToggle={() => toggleRepo(group.repositoryName)}
                renderRow={renderRow}
                primaryLabel={props.primaryLabel}
                secondaryLabel={props.secondaryLabel}
                onRepoAction={props.onRepoAction}
                onRepoSecondaryAction={props.onRepoSecondaryAction}
                displayName={props.repoDisplayName?.(group.repositoryName)}
                disabled={props.disabled}
              />
            ))}
      </ul>
    </div>
  );
}

export function FileListSection(props: FileListSectionProps) {
  const {
    variant,
    files,
    pendingStageFiles,
    onOpenDiff,
    onEditFile,
    onStage,
    onUnstage,
    onDiscard,
  } = props;
  const dotColor = variant === "unstaged" ? DOT_COLORS.unstaged : DOT_COLORS.staged;
  const label = variant === "unstaged" ? "Unstaged" : "Staged";

  const filePaths = useMemo(() => files.map((f) => f.path), [files]);
  const multiSelect = useMultiSelect({ items: filePaths });
  const hasSelection = multiSelect.selectedPaths.size > 0;
  // Multi-repo when any file has a repositoryName. Per-repo group headers
  // own the action buttons in this case; in single-repo we render them in
  // the section header instead. Compute via the shared helper against the
  // grouped output so the three sites (commits + file-list body + this
  // section) stay in sync.
  const groups = useMemo(() => groupByRepositoryName(files, (f) => f.repositoryName), [files]);
  const isSingleRepo = files.length > 0 && isSingleRepoGroup(groups);
  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === "Escape" && hasSelection) multiSelect.clearSelection();
    },
    [hasSelection, multiSelect],
  );

  return (
    <TimelineSection
      dotColor={dotColor}
      label={label}
      count={files.length}
      data-testid={`${variant}-files-section`}
      action={
        isSingleRepo ? (
          <FileSectionActions
            primaryLabel={props.actionLabel}
            secondaryLabel={props.secondaryActionLabel}
            onAction={props.onRepoAction}
            onSecondaryAction={props.onRepoSecondaryAction}
            disabled={props.isActionLoading || props.isSecondaryActionLoading}
          />
        ) : undefined
      }
    >
      {files.length > 0 && (
        <FileListBody
          variant={variant}
          files={files}
          pendingStageFiles={pendingStageFiles}
          multiSelect={multiSelect}
          onKeyDown={handleKeyDown}
          onOpenDiff={onOpenDiff}
          onStage={onStage}
          onUnstage={onUnstage}
          onDiscard={onDiscard}
          onEditFile={onEditFile}
          primaryLabel={props.actionLabel}
          secondaryLabel={props.secondaryActionLabel}
          onRepoAction={props.onRepoAction}
          onRepoSecondaryAction={props.onRepoSecondaryAction}
          repoDisplayName={props.repoDisplayName}
          disabled={props.isActionLoading || props.isSecondaryActionLoading}
        />
      )}
      {files.length > 0 && hasSelection && (
        <div className="mt-1.5 flex items-center gap-1.5">
          <BulkActionBar
            variant={variant}
            selectionCount={multiSelect.selectedPaths.size}
            selectedPaths={multiSelect.selectedPaths}
            onBulkStage={props.onBulkStage}
            onBulkUnstage={props.onBulkUnstage}
            onBulkDiscard={props.onBulkDiscard}
          />
        </div>
      )}
    </TimelineSection>
  );
}

// --- PR files section (read-only, from GitHub PR diff) ---

export type PRChangedFile = {
  path: string;
  /** Stable owner/repo/number identity for the PR that produced this row. */
  prKey?: string;
  status: FileInfo["status"];
  plus: number | undefined;
  minus: number | undefined;
  oldPath: string | undefined;
  /**
   * The repository the file belongs to. Empty string for single-repo tasks
   * (the section header alone is enough). Multi-repo tasks stamp this so
   * `PRFilesSection` can group rows under per-repo subheaders, mirroring
   * how the Commits and Changes sections render.
   */
  repository_name?: string;
};

type PRFilesSectionProps = {
  files: PRChangedFile[];
  onOpenDiff: (path: string, options?: OpenDiffOptions) => void;
  /** Maps a repository_name to a human-readable label (used for the per-repo header). */
  repoDisplayName?: (repositoryName: string) => string | undefined;
  /** Initial collapse state. Defaults to collapsed; the panel expands it when it is the first visible section. */
  defaultCollapsed?: boolean;
};

export function PRFilesSection({
  files,
  onOpenDiff,
  repoDisplayName,
  defaultCollapsed = true,
}: PRFilesSectionProps) {
  const { t } = useTranslation();
  return (
    <TimelineSection
      dotColor={DOT_COLORS.pr}
      label={t("task:prChanges")}
      count={files.length}
      defaultCollapsed={defaultCollapsed}
      data-testid="pr-changes-section"
    >
      {files.length > 0 && (
        <PRFilesGroupedList
          files={files}
          onOpenDiff={onOpenDiff}
          repoDisplayName={repoDisplayName}
        />
      )}
    </TimelineSection>
  );
}

// --- Review progress bar ---

type ReviewProgressBarProps = {
  reviewedCount: number;
  totalFileCount: number;
  onOpenReview?: () => void;
};

export function ReviewProgressBar({
  reviewedCount,
  totalFileCount,
  onOpenReview,
}: ReviewProgressBarProps) {
  const { t } = useTranslation();
  const progressPercent = totalFileCount > 0 ? (reviewedCount / totalFileCount) * 100 : 0;

  if (totalFileCount <= 0) return null;

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <div
          className="shrink-0 flex items-center gap-2 pt-2 border-t border-border/40 cursor-pointer transition-colors"
          onClick={onOpenReview}
        >
          <div className="flex-1 h-0.5 rounded-full bg-muted-foreground/10 overflow-hidden">
            <div
              className="h-full bg-muted-foreground/25 rounded-full transition-all duration-300"
              style={{ width: `${progressPercent}%` }}
            />
          </div>
          <span className="text-[10px] text-muted-foreground/40 whitespace-nowrap">
            {reviewedCount}/{totalFileCount} reviewed
          </span>
        </div>
      </TooltipTrigger>
      <TooltipContent>
        {t("task:filesReviewedCount", { reviewedCount, totalFileCount })}
      </TooltipContent>
    </Tooltip>
  );
}