// Every Lane across the repos being watched, its status, and its
// coordinators -- the "overview" building block shared by `zz work` and
// `zz top`. Read-only by default: scrolling (up/down, Page Up/Down,
// Home/End) is handled by the parent TabView, which passes down the
// resulting offset, scrolling from the top of the list rather than
// following a live tail.
//
// Passing onPostAsk switches this into an interactive picker instead
// (zz top's own lanes tab): arrow keys move a selection cursor (not
// just scroll -- the cursor following its own window, same convention
// AssistApp's ask picker uses, rather than TabView's parent-driven
// scrollOffset, which this mode ignores entirely, same as Explore.tsx
// already does for its own repo list), and "n" starts composing a
// plain-text description to post as a new "work" ask into the
// selected lane.
import React, { useEffect, useState } from "react";
import { Box, Text, useInput, useStdin } from "ink";
import type { LaneSnapshot } from "./types.js";
import { STATUS_COLOR, MUTED, PINK, CYAN, YELLOW, GREEN } from "./theme.js";

export interface LaneListProps {
  snapshots: LaneSnapshot[];
  maxRows: number;
  scrollOffset: number;
  /** Provide to make the list interactive (zz top's own lanes tab); omit for a purely read-only view (zz work's own tab, unchanged). Posts a "work" ask (payload.description) into the given repo/lane. */
  onPostAsk?: (repo: string, laneId: string, description: string) => Promise<void>;
  /** Who ask_post's own `from` field names -- null means not logged in, so "n" prompts to log in (the "l" hotkey, see TopApp.tsx) instead of opening the composer. */
  identity?: string | null;
  /** Mirrors Explore.tsx's own prop -- true while the ask-description box owns the keyboard, so TabView's own hotkeys (tab-switch, quit, y) pause the same way they do for Explore's search box. */
  onEditingChange?: (editing: boolean) => void;
}

export function LaneList({ snapshots, maxRows, scrollOffset, onPostAsk, identity, onEditingChange }: LaneListProps) {
  const interactive = !!onPostAsk;
  const [cursor, setCursor] = useState(0);
  const [composing, setComposing] = useState(false);
  const [draft, setDraft] = useState("");
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const { isRawModeSupported } = useStdin();

  useEffect(() => {
    if (cursor >= snapshots.length) setCursor(Math.max(0, snapshots.length - 1));
  }, [snapshots.length, cursor]);

  useEffect(() => {
    onEditingChange?.(composing);
  }, [composing, onEditingChange]);

  useEffect(() => {
    if (!message) return;
    const id = setTimeout(() => setMessage(null), 2500);
    return () => clearTimeout(id);
  }, [message]);

  useInput(
    (input, key) => {
      if (!interactive) return;
      if (composing) {
        if (key.escape) {
          setComposing(false);
          setDraft("");
          return;
        }
        if (key.return) {
          const text = draft.trim();
          if (!text || busy) return;
          const target = snapshots[cursor];
          if (!target) return;
          setBusy(true);
          onPostAsk!(target.repo, target.lane.id, text)
            .then(() => {
              setMessage(`posted to ${target.repo}/${target.lane.id}`);
              setComposing(false);
              setDraft("");
              setBusy(false);
            })
            .catch((err) => {
              setMessage(`failed: ${err instanceof Error ? err.message : String(err)}`);
              setBusy(false);
            });
          return;
        }
        if (key.backspace || key.delete) {
          setDraft((v) => v.slice(0, -1));
        } else if (input && !key.ctrl && !key.meta) {
          setDraft((v) => v + input);
        }
        return;
      }
      if (key.upArrow) setCursor((c) => Math.max(0, c - 1));
      else if (key.downArrow) setCursor((c) => Math.min(snapshots.length - 1, c + 1));
      else if (input === "n") {
        if (!identity) {
          setMessage("log in first (l)");
          return;
        }
        if (snapshots[cursor]) setComposing(true);
      }
    },
    { isActive: isRawModeSupported },
  );

  // Interactive mode manages its own scroll window (centered on the
  // cursor), same reasoning as AssistApp's own picker: the parent's
  // scrollOffset has no way to know about a cursor it doesn't control.
  const windowSize = Math.max(1, maxRows - 1);
  const windowStart = interactive ? Math.max(0, Math.min(cursor - Math.floor(windowSize / 2), Math.max(0, snapshots.length - windowSize))) : Math.min(scrollOffset, Math.max(0, snapshots.length - windowSize));
  const shown = snapshots.slice(windowStart, windowStart + windowSize);

  return (
    <Box flexDirection="column">
      <Text color={MUTED}>
        {snapshots.length === 0 ? "no lanes yet" : `showing ${windowStart + 1}-${windowStart + shown.length} of ${snapshots.length}`}
        {interactive && !composing && message === null ? "   n: post an ask into the selected lane" : ""}
      </Text>
      {shown.map(({ repo, lane }, i) => {
        const idx = windowStart + i;
        const current = interactive && idx === cursor;
        return (
          <Box key={`${repo}/${lane.id}`}>
            <Box flexShrink={0}>
              <Text color={current ? CYAN : undefined} bold={current}>
                {current ? "> " : "  "}
              </Text>
            </Box>
            <Box width={28} marginRight={1} flexShrink={0}>
              <Text color={current ? CYAN : MUTED} bold={current} wrap="truncate-end">
                {repo}
              </Text>
            </Box>
            <Box width={24} marginRight={1} flexShrink={0}>
              <Text bold color={current ? CYAN : PINK} wrap="truncate-end">
                {lane.id}
              </Text>
            </Box>
            <Box width={12} marginRight={1} flexShrink={0}>
              <Text bold color={STATUS_COLOR[lane.status] ?? MUTED} wrap="truncate-end">
                {lane.status}
              </Text>
            </Box>
            <Text color={MUTED} wrap="truncate-end">
              coord: {lane.coordinators.join(", ")}
            </Text>
          </Box>
        );
      })}
      {interactive && (
        <Box marginTop={1} flexDirection="column">
          <Text color={message ? (message.startsWith("failed") ? YELLOW : GREEN) : MUTED} wrap="truncate-end">
            {message ?? (composing ? `describe the ask for ${snapshots[cursor]?.repo}/${snapshots[cursor]?.lane.id} (enter: post, esc: cancel):` : "")}
          </Text>
          {composing && (
            <Text wrap="truncate-start">
              {"> "}
              {draft}
              {busy ? "" : "_"}
            </Text>
          )}
        </Box>
      )}
    </Box>
  );
}