"use client";

import { memo, useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
import { IconDotsVertical, IconPlus, IconStar } from "@tabler/icons-react";
import { Button } from "@kandev/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@kandev/ui/dropdown-menu";
import { AgentLogo } from "@/components/agent-logo";
import { useResponsiveBreakpoint } from "@/hooks/use-responsive-breakpoint";
import { useAppStore } from "@/components/state-provider";
import { useTaskSessions } from "@/hooks/use-task-sessions";
import {
  useSessionActions,
  isSessionStoppable,
  isSessionDeletable,
  isSessionResumable,
} from "@/hooks/domains/session/use-session-actions";
import { HandoffDropdownMenuSub } from "../handoff-profile-menu-items";
import { NewSessionDialog, type HandoffPreset } from "../new-session-dialog";
import { MobilePillButton } from "./mobile-pill-button";
import { MobilePickerSheet } from "./mobile-picker-sheet";
import { formatTaskSessionStateLabel } from "@/lib/ui/state-labels";
import { getSessionStateIcon } from "@/lib/ui/state-icons";
import { repositorySlug } from "@/lib/repository-slug";
import { useSessionPendingInput, type PendingInput } from "@/hooks/use-task-pending-input";
import type { ForegroundActivity, TaskSession, TaskSessionState } from "@/lib/types/http";
import type { AgentProfileOption } from "@/lib/state/slices";
import { useTranslation } from "react-i18next";
import { t } from "@/lib/i18n";
import { MobileSessionDeleteConfirmation } from "./mobile-session-delete-confirmation";

type SessionRow = {
  id: string;
  agentName: string | null;
  agentLabel: string;
  repositoryLabel: string | null;
  state: TaskSessionState | null;
  foregroundActivity: ForegroundActivity | null;
  /** True when the session is waiting on the operator to notice, not to act —
   *  a settled session with a positively-sampled background process still
   *  live (spec: docs/specs/disambiguate-waiting/spec.md). */
  parkedOnBackgroundWork: boolean;
  isPrimary: boolean;
  index: number;
  startedAt: string;
};

function buildSessionRows(
  sessions: TaskSession[],
  agentProfiles: AgentProfileOption[],
  primarySessionId: string | null | undefined,
  repositoryLabelsById: ReadonlyMap<string, string>,
): SessionRow[] {
  const sorted = [...sessions].sort(
    (a, b) => new Date(a.started_at).getTime() - new Date(b.started_at).getTime(),
  );
  return sorted.map((s, idx) => {
    const profile = agentProfiles.find((p) => p.id === s.agent_profile_id);
    const labelParts = profile?.label.split(" • ") ?? [];
    return {
      id: s.id,
      agentName: profile?.agent_name ?? null,
      // User-supplied session name wins over the derived profile label,
      // matching the desktop session tab title precedence.
      agentLabel: s.name || labelParts[1] || labelParts[0] || profile?.label || t("task:agent"),
      repositoryLabel: s.repository_id ? (repositoryLabelsById.get(s.repository_id) ?? null) : null,
      state: (s.state as TaskSessionState | undefined) ?? null,
      foregroundActivity: s.foreground_activity ?? null,
      parkedOnBackgroundWork: !!s.parked_on_background_work,
      isPrimary: primarySessionId ? s.id === primarySessionId : !!s.is_primary,
      index: idx + 1,
      startedAt: s.started_at,
    };
  });
}

// The mobile sessions section reads the per-session substate through the same
// shared vocabulary as the desktop session switcher and the reopen menu
// `getSessionStateIcon` carries background-running
// as a spinner distinct — by SHAPE and MOTION, not hue alone — from generating
// (a static dot) and from done (a check), so the three read apart even in a
// grayscale scan. The label reinforces the distinction in words: while spawned
// background work runs, the row reads "Working in background" rather than the
// bare "Running", so background is never confused with generating.
// A catalog key, not copy: `t()` at module scope would freeze at the boot locale.
const BACKGROUND_RUNNING_LABEL_KEY = "task:workingInBackground";

function sessionStateLabel(
  state: TaskSessionState,
  foregroundActivity: ForegroundActivity | null,
  pending: PendingInput,
  parkedOnBackgroundWork: boolean,
): string {
  const canRequestInput = state === "RUNNING" || state === "WAITING_FOR_INPUT";
  if (canRequestInput && pending.permission) return t("task:permissionRequested");
  if (canRequestInput && pending.clarification) {
    return formatTaskSessionStateLabel("WAITING_FOR_INPUT");
  }
  if (canRequestInput && foregroundActivity === "background") {
    return t(BACKGROUND_RUNNING_LABEL_KEY);
  }
  if (canRequestInput && parkedOnBackgroundWork) {
    return t(BACKGROUND_RUNNING_LABEL_KEY);
  }
  return formatTaskSessionStateLabel(state);
}

function StateBadge({
  sessionId,
  state,
  foregroundActivity,
  parkedOnBackgroundWork,
  testId,
}: {
  sessionId: string;
  state: TaskSessionState | null;
  foregroundActivity: ForegroundActivity | null;
  parkedOnBackgroundWork: boolean;
  testId?: string;
}) {
  const pending = useSessionPendingInput(sessionId);
  if (!state) return null;
  const label = sessionStateLabel(state, foregroundActivity, pending, parkedOnBackgroundWork);
  return (
    <span
      data-testid={testId}
      title={label}
      className="flex items-center gap-1 whitespace-nowrap text-[10px] font-medium leading-none text-muted-foreground shrink-0"
    >
      {getSessionStateIcon(state, "h-3 w-3 shrink-0", {
        foregroundActivity,
        hasPendingClarification: pending.clarification,
        hasPendingPermission: pending.permission,
        parkedOnBackgroundWork,
      })}
      {label}
    </span>
  );
}

function SessionActionsMenu({
  triggerRef,
  taskId,
  state,
  isPrimary,
  onSetPrimary,
  onStop,
  onResume,
  onAskDelete,
  onHandoffProfile,
}: {
  triggerRef: RefObject<HTMLButtonElement | null>;
  taskId: string;
  state: TaskSessionState | null;
  isPrimary: boolean;
  onSetPrimary: () => void;
  onStop: () => void;
  onResume: () => void;
  onAskDelete: () => void;
  onHandoffProfile: (profileId: string) => void;
}) {
  const { t } = useTranslation();
  const { isMobile } = useResponsiveBreakpoint();
  const pendingDelete = useRef(false);
  const hasLifecycleAction =
    !!state &&
    (isSessionStoppable(state) || isSessionResumable(state) || isSessionDeletable(state));

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          ref={triggerRef}
          variant="ghost"
          size="icon-sm"
          className="cursor-pointer h-11 w-11 md:h-7 md:w-7"
          onClick={(e) => e.stopPropagation()}
          aria-label={t("task:sessionActions")}
        >
          <IconDotsVertical className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="end"
        onClick={(e) => e.stopPropagation()}
        onCloseAutoFocus={(event) => {
          if (!pendingDelete.current) return;
          event.preventDefault();
          pendingDelete.current = false;
          onAskDelete();
        }}
      >
        <DropdownMenuItem
          className="cursor-pointer"
          onSelect={onSetPrimary}
          disabled={isPrimary || !state}
        >
          {t("task:setAsPrimary")}
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        {state && isSessionStoppable(state) && (
          <DropdownMenuItem className="cursor-pointer" onSelect={onStop}>
            {t("task:stop")}
          </DropdownMenuItem>
        )}
        {state && isSessionResumable(state) && (
          <DropdownMenuItem className="cursor-pointer" onSelect={onResume}>
            {t("task:resume")}
          </DropdownMenuItem>
        )}
        {state && isSessionDeletable(state) && (
          <DropdownMenuItem
            className="cursor-pointer text-destructive focus:text-destructive"
            onSelect={() => {
              if (isMobile) pendingDelete.current = true;
              else onAskDelete();
            }}
          >
            {t("task:delete")}
          </DropdownMenuItem>
        )}
        {hasLifecycleAction && <DropdownMenuSeparator />}
        <HandoffDropdownMenuSub taskId={taskId} onSelectProfile={onHandoffProfile} />
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

function SessionIdentity({ row }: { row: SessionRow }) {
  return (
    <div className="flex min-w-0 flex-1 flex-col">
      <span className="truncate text-sm">{row.agentLabel}</span>
      {row.repositoryLabel && (
        <span
          className="truncate text-[11px] text-muted-foreground"
          data-testid={`mobile-session-repository-${row.id}`}
        >
          {row.repositoryLabel}
        </span>
      )}
    </div>
  );
}

function SessionRowTrailingActions({
  row,
  taskId,
  totalSessions,
  isConfirming,
  onAskDelete,
  onCancelDelete,
  onHandoffProfile,
  actions,
}: {
  row: SessionRow;
  taskId: string;
  totalSessions: number;
  isConfirming: boolean;
  onAskDelete: () => void;
  onCancelDelete: () => void;
  onHandoffProfile: (profileId: string) => void;
  actions: ReturnType<typeof useSessionActions>;
}) {
  const { isMobile } = useResponsiveBreakpoint();
  const triggerRef = useRef<HTMLButtonElement>(null);
  return (
    <>
      <MobileSessionDeleteConfirmation
        focusReturnRef={triggerRef}
        open={isConfirming}
        targetKey={`${taskId}:${row.id}`}
        isPrimary={row.isPrimary}
        isOnlySession={totalSessions === 1}
        targetName={row.agentLabel}
        onCancel={onCancelDelete}
        onClose={onCancelDelete}
        onConfirm={() => void actions.remove()}
      />
      {(!isConfirming || isMobile) && (
        <SessionActionsMenu
          triggerRef={triggerRef}
          taskId={taskId}
          state={row.state}
          isPrimary={row.isPrimary}
          onSetPrimary={() => void actions.setPrimary()}
          onStop={() => void actions.stop()}
          onResume={() => void actions.resume()}
          onAskDelete={onAskDelete}
          onHandoffProfile={onHandoffProfile}
        />
      )}
    </>
  );
}

function SessionRowItem({
  row,
  taskId,
  isActive,
  totalSessions,
  isConfirming,
  onAskDelete,
  onCancelDelete,
  onSelect,
}: {
  row: SessionRow;
  taskId: string;
  isActive: boolean;
  totalSessions: number;
  isConfirming: boolean;
  onAskDelete: () => void;
  onCancelDelete: () => void;
  onSelect: (sessionId: string) => void;
}) {
  const [handoffOpen, setHandoffOpen] = useState(false);
  const [handoffPreset, setHandoffPreset] = useState<HandoffPreset | null>(null);
  const actions = useSessionActions({ sessionId: row.id, taskId });
  const showBadges = totalSessions > 1;
  const handleHandoffProfile = useCallback(
    (profileId: string) => {
      setHandoffPreset({ sourceSessionId: row.id, targetProfileId: profileId });
      setHandoffOpen(true);
    },
    [row.id],
  );

  return (
    <>
      <div
        role="button"
        tabIndex={0}
        aria-current={isActive ? "true" : undefined}
        onClick={() => onSelect(row.id)}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            onSelect(row.id);
          }
        }}
        data-testid={`mobile-session-row-${row.id}`}
        className={`flex items-center gap-2 border px-2 py-2 rounded-md cursor-pointer select-none ${
          isActive ? "border-primary/50 bg-card" : "border-transparent hover:bg-muted"
        }`}
      >
        {row.isPrimary && showBadges && (
          <IconStar className="h-3.5 w-3.5 fill-foreground/60 stroke-0 shrink-0" />
        )}
        {showBadges && (
          <span className="text-[11px] font-medium leading-none text-muted-foreground bg-foreground/10 rounded px-1.5 py-0.5 shrink-0">
            {row.index}
          </span>
        )}
        {row.agentName && <AgentLogo agentName={row.agentName} size={16} className="shrink-0" />}
        <SessionIdentity row={row} />
        <StateBadge
          sessionId={row.id}
          state={row.state}
          foregroundActivity={row.foregroundActivity}
          parkedOnBackgroundWork={row.parkedOnBackgroundWork}
          testId={`mobile-session-state-${row.id}`}
        />
        <SessionRowTrailingActions
          row={row}
          taskId={taskId}
          totalSessions={totalSessions}
          isConfirming={isConfirming}
          onAskDelete={onAskDelete}
          onCancelDelete={onCancelDelete}
          onHandoffProfile={handleHandoffProfile}
          actions={actions}
        />
      </div>
      {handoffPreset && (
        <NewSessionDialog
          open={handoffOpen}
          onOpenChange={(open) => {
            setHandoffOpen(open);
            if (!open) setHandoffPreset(null);
          }}
          taskId={taskId}
          handoff={handoffPreset}
        />
      )}
    </>
  );
}

function useSessionRows(taskId: string | null) {
  // `buildSessionRows` resolves its agent-name fallback through the module-level
  // `t`, so the language has to reach the memo below for that label to follow a
  // runtime locale switch.
  const { i18n } = useTranslation();
  const agentProfiles = useAppStore((s) => s.agentProfiles.items);
  const repositoriesByWorkspace = useAppStore((s) => s.repositories.itemsByWorkspaceId);
  const primarySessionId = useAppStore((s) => {
    if (!taskId) return null;
    const task = s.kanban.tasks.find((t: { id: string }) => t.id === taskId);
    return task?.primarySessionId ?? null;
  });
  const { sessions, isLoading } = useTaskSessions(taskId);
  const repositoryLabelsById = useMemo(() => {
    const sessionRepositoryIds = new Set(
      sessions.flatMap((session) => (session.repository_id ? [session.repository_id] : [])),
    );
    if (sessionRepositoryIds.size <= 1) return new Map<string, string>();
    const labels = new Map<string, string>();
    for (const repository of Object.values(repositoriesByWorkspace).flat()) {
      if (sessionRepositoryIds.has(repository.id)) {
        labels.set(repository.id, repositorySlug(repository));
      }
    }
    return labels;
  }, [repositoriesByWorkspace, sessions]);
  const rows = useMemo(
    () => buildSessionRows(sessions, agentProfiles, primarySessionId, repositoryLabelsById),
    // eslint-disable-next-line react-hooks/exhaustive-deps -- i18n.language is the locale trigger
    [sessions, agentProfiles, primarySessionId, repositoryLabelsById, i18n.language],
  );
  return { rows, isLoading, primarySessionId };
}

const MobileSessionsList = memo(function MobileSessionsList({
  taskId,
  activeSessionId,
  open,
  onClose,
}: {
  taskId: string | null;
  activeSessionId: string | null;
  open: boolean;
  onClose: () => void;
}) {
  const { t } = useTranslation();
  const setActiveSession = useAppStore((s) => s.setActiveSession);
  const { rows, isLoading } = useSessionRows(taskId);
  const [launchOpen, setLaunchOpen] = useState(false);
  const [confirmDeleteSessionId, setConfirmDeleteSessionId] = useState<string | null>(null);

  useEffect(() => {
    if (!open) setConfirmDeleteSessionId(null);
  }, [open]);

  const handleSelect = useCallback(
    (sessionId: string) => {
      if (!taskId) return;
      setConfirmDeleteSessionId(null);
      setActiveSession(taskId, sessionId);
      onClose();
    },
    [taskId, setActiveSession, onClose],
  );

  if (!taskId) {
    return (
      <div className="text-xs text-muted-foreground px-2 py-6 text-center">
        {t("task:noActiveTask")}
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-2 px-1">
      <div className="flex items-center justify-between px-1">
        <span className="text-xs font-medium text-muted-foreground">
          {t("task:sessionCount", { count: rows.length })}
        </span>
        <Button
          size="sm"
          variant="outline"
          className="h-7 gap-1 cursor-pointer"
          onClick={() => setLaunchOpen(true)}
          data-testid="mobile-launch-session"
        >
          <IconPlus className="h-4 w-4" />
          {t("task:newSession")}
        </Button>
      </div>
      <div className="flex flex-col gap-0.5">
        {isLoading && rows.length === 0 && (
          <div className="text-xs text-muted-foreground px-2 py-4 text-center">
            {t("task:loadingSessions")}
          </div>
        )}
        {!isLoading && rows.length === 0 && (
          <div className="text-xs text-muted-foreground px-2 py-4 text-center">
            {t("task:noSessionsYetLaunchOneTo")}
          </div>
        )}
        {rows.map((row) => (
          <SessionRowItem
            key={row.id}
            row={row}
            taskId={taskId}
            isActive={row.id === activeSessionId}
            totalSessions={rows.length}
            isConfirming={row.id === confirmDeleteSessionId}
            onAskDelete={() => setConfirmDeleteSessionId(row.id)}
            onCancelDelete={() => setConfirmDeleteSessionId(null)}
            onSelect={handleSelect}
          />
        ))}
      </div>
      {launchOpen && (
        <NewSessionDialog open={launchOpen} onOpenChange={setLaunchOpen} taskId={taskId} />
      )}
    </div>
  );
});

function useActiveSessionPillLabel(
  taskId: string | null,
  sessionId: string | null | undefined,
): {
  label: string;
  count: string | undefined;
  agentName: string | null;
  effectiveSessionId: string | null;
  ariaLabel: string;
} {
  const { t } = useTranslation();
  const storedActiveSessionId = useAppStore((s) => s.tasks.activeSessionId);
  const { rows } = useSessionRows(taskId);
  const effectiveSessionId = sessionId === undefined ? storedActiveSessionId : sessionId;
  const activeRow = rows.find((r) => r.id === effectiveSessionId);
  const total = rows.length;
  const idx = activeRow?.index;
  let count: string | undefined;
  if (total > 1 && idx) count = `${idx}/${total}`;
  else if (total > 1) count = `${total}`;
  const agentLabel = activeRow?.agentLabel ?? t("task:sessionFallbackLabel");
  const repositoryLabel = activeRow?.repositoryLabel;
  return {
    label: repositoryLabel ? `${agentLabel} · ${repositoryLabel}` : agentLabel,
    count,
    agentName: activeRow?.agentName ?? null,
    effectiveSessionId,
    ariaLabel: repositoryLabel
      ? t("task:activeSessionRepositoryTapToSwitch", { agentLabel, repositoryLabel })
      : t("task:activeSessionTapToSwitch", { agentLabel }),
  };
}

export const MobileSessionsPicker = memo(function MobileSessionsPicker({
  taskId,
  sessionId,
  compact,
  fullWidth,
}: {
  taskId: string | null;
  sessionId?: string | null;
  compact?: boolean;
  fullWidth?: boolean;
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const { label, count, agentName, effectiveSessionId, ariaLabel } = useActiveSessionPillLabel(
    taskId,
    sessionId,
  );
  if (!taskId) return null;
  return (
    <>
      <MobilePillButton
        icon={
          agentName ? (
            <span
              className="flex shrink-0 items-center"
              data-testid="mobile-session-agent-icon"
              data-agent-name={agentName}
            >
              <AgentLogo agentName={agentName} size={16} className="shrink-0" />
            </span>
          ) : undefined
        }
        label={label}
        count={count}
        compact={compact}
        fullWidth={fullWidth}
        isOpen={open}
        onClick={() => setOpen(true)}
        data-testid="mobile-sessions-pill"
        ariaLabel={ariaLabel}
      />
      <MobilePickerSheet
        key={taskId}
        open={open}
        onOpenChange={setOpen}
        title={t("task:sessions")}
        confirmationHost
      >
        <MobileSessionsList
          taskId={taskId}
          activeSessionId={effectiveSessionId}
          open={open}
          onClose={() => setOpen(false)}
        />
      </MobilePickerSheet>
    </>
  );
});