/**
 * Draft view (/chat/new): the pre-persistence form of a new
 * conversation, before any Session exists. The input card sits vertically centered;
 * before sending, this is where Agent / Workspace / approval mode / Model are all
 * chosen in one place — two small dropdown pills sit right below the card (pill
 * buttons, styled after ChatGPT's project picker): Agent selection and Workspace
 * directory selection (the menu browses server-side directories, and the current
 * path can be edited directly); the model picker lives in the input card's bottom
 * toolbar, left of the send button (with a vendor logo). The Session is only
 * created when **the first message is sent**; once created, Agent / Workspace /
 * Model are locked in via meta, and only approval mode remains editable (in the
 * session-mode input area).
 *
 * Draft auto-cache (storage and validation in draft-cache.ts; keys are isolated by
 * "user × Project", #68): the four selections are saved as soon as they change;
 * body text is keystroke-frequent and deferred/coalesced (if there's an unsaved
 * change before unmount, one final write is flushed) — closing and returning to
 * the page resumes where you left off; the cache is cleared on successful send.
 * The sidebar group header "+" / menu "New conversation" explicitly specify an
 * Agent via route state (overriding the cached selection); a direct visit or
 * refresh falls back to the cache.
 */
import { useCallback, useEffect, useRef, useState } from "react";
import { useLocation, useNavigate } from "react-router";
import type {
  AgentSummary,
  ApprovalMode,
  DirListResponse,
  ModelRefDto,
  ModelsResponse,
  SessionCreateRequest,
  SkillMetadataItem,
  TaskInputPart,
} from "@prismshadow/penguin-server/api";
import * as api from "../../api/endpoints";
import { ApiError } from "../../api/client";
import { S } from "../../lib/strings";
import { apiErrorText } from "../../lib/api-error";
import { useAuth } from "../../state/auth";
import { agentDisplayName, useProject } from "../../state/project";
import { useSessions } from "../../state/sessions";
import { AgentAvatar } from "../../components/ui/agent-avatar";
import { Chevron } from "../../components/ui/chevron";
import { Dropdown } from "../../components/ui/dropdown";
import { PenguinLogo } from "../../components/ui/penguin-logo";
import { toastError } from "../../components/ui/toast";
import { ChatInput } from "./chat-input";
import { buildSkillsMessage } from "./skill-use";
import { clearDraft, draftKey, loadDraft, saveDraft } from "./draft-cache";
import type { DraftCache } from "./draft-cache";
import { handoffMessage } from "./agent-mentions";
import { sameModelRef } from "../models/model-grouping";

/** Coalescing window for writing body text to the cache: keystrokes are frequent, so a short batch accumulates before persisting (option changes are still written immediately). */
const DRAFT_SAVE_DEBOUNCE_MS = 300;

/**
 * Example tasks on the draft screen, in display order (game card first, LoL music player,
 * then the RAG build). Copy lives in S.chat.exampleTasks[id]; skills are pinned via a
 * `<use_skills>` block — only those the selected Agent actually has installed are included,
 * so the block never references a skill the agent can't read.
 */
const EXAMPLE_TASKS: { id: "game" | "lol" | "rag"; skills: string[] }[] = [
  { id: "game", skills: ["web-design"] },
  { id: "lol", skills: ["web-design"] },
  { id: "rag", skills: ["penguin-sdk", "web-design"] },
];

export function DraftView({
  projectId,
  models,
}: {
  projectId: string;
  /** Project model config (already fetched by ChatPage): candidate list and default model. */
  models: ModelsResponse | null;
}) {
  const navigate = useNavigate();
  const location = useLocation();
  const { agents, currentAgent, setCurrentAgentId } = useProject();
  const { add } = useSessions();
  // The draft key includes a user dimension (#68 cross-account leakage). RequireAuth
  // guarantees the user is logged in here; on the off chance there's no user (the
  // type allows null), it's better to disable caching entirely than to read/write a
  // key that isn't account-scoped.
  const userId = useAuth().user?.userId ?? null;

  // The cache is read only once, on mount: the component remounts keyed by Project,
  // so switching Projects automatically switches to the corresponding draft; switching
  // accounts always goes through logout (clearing the user unmounts the whole route
  // tree), so logging back in is likewise a fresh mount.
  const [cached] = useState<DraftCache>(() =>
    userId ? loadDraft(draftKey(userId, projectId)) : {},
  );

  const [agentId, setAgentId] = useState<string | null>(
    cached.agentId ?? currentAgent?.agentId ?? null,
  );
  const [workspace, setWorkspace] = useState(cached.workspace ?? "");
  const [approvalMode, setApprovalMode] = useState<ApprovalMode>(
    cached.approvalMode ?? "allow-all",
  );
  const [modelRef, setModelRef] = useState<ModelRefDto | null>(cached.modelRef ?? null);
  /** @-handoff target (chip): draft content just like the body text, cached alongside it (fed in via the ChatInput callback). */
  const [handoffAgentId, setHandoffAgentId] = useState<string | null>(
    cached.handoffAgentId ?? null,
  );
  const textRef = useRef(cached.text ?? "");
  /**
   * Selected skills (prefilled by "quick invoke" from the Skills page + checked in
   * the input area): passed to ChatInput as the initial selection via initialSkills
   * on mount, then written back through onSkillsChange and persisted immediately
   * (discrete clicks) — survives a refresh; cleared along with the whole draft on
   * successful send, kept on failure so it can be resent.
   */
  const skillsRef = useRef<string[]>(cached.skills ?? []);

  // Unified resolution of the Agent selection (a single effect, single writer):
  // explicit route state > current valid value (from cache / panel selection) >
  // default_agent > the first one. Explicit intent (sidebar group header "+" / menu
  // "New conversation") is applied only once per location.key — clicking "+" again
  // for the same Agent gets a new key and re-aligns, while the user's subsequent
  // reselection in the panel won't keep getting overridden. Merging this into one
  // effect is essential: splitting it into an "apply state" effect and a "fallback
  // on invalid value" effect would let the former write B in one render while the
  // latter, still judging by the stale closure's invalid value, writes the default
  // Agent and clobbers B.
  const stateAgentId = (location.state as { agentId?: string } | null)?.agentId;
  const appliedStateKey = useRef<string | null>(null);
  useEffect(() => {
    if (agents.length === 0) return; // list not ready yet, nothing to validate against — wait for the next pass
    const valid = (id: string | null | undefined): id is string =>
      !!id && agents.some((a) => a.agentId === id);
    if (stateAgentId && appliedStateKey.current !== location.key) {
      appliedStateKey.current = location.key;
      if (valid(stateAgentId)) {
        setAgentId(stateAgentId);
        return;
      }
    }
    if (valid(agentId)) return;
    setAgentId((agents.find((a) => a.agentId === "default_agent") ?? agents[0])?.agentId ?? null);
  }, [agents, agentId, location.key, stateAgentId]);

  // Model fallback: once config is ready, if nothing is selected or the selection is no longer valid, fall back to the project default → the first model (always as a paired reference).
  useEffect(() => {
    if (!models) return;
    if (modelRef && models.models.some((m) => sameModelRef(m, modelRef))) return;
    const first = models.models[0];
    setModelRef(
      models.defaultModel ?? (first ? { provider: first.provider, modelId: first.modelId } : null),
    );
  }, [models, modelRef]);

  // Skills installed on the currently selected Agent (candidates for the input
  // area's skills dropdown): switching Agents first clears the list (which also
  // clears the selection in the input area), then refetches; a fetch failure is
  // silently treated as no skills. Clearing preserves the reference when already
  // empty (doesn't swap in a new array): swapping the reference on the very first
  // mount render would trigger ChatInput's pruning effect and wrongly clear the
  // quick-invoke preselection.
  const [agentSkills, setAgentSkills] = useState<SkillMetadataItem[]>([]);
  /** Whether the skills fetch for the current Agent has settled — the example task waits for it so its `<use_skills>` pinning doesn't silently depend on network timing. */
  const [skillsLoaded, setSkillsLoaded] = useState(false);
  useEffect(() => {
    setAgentSkills((prev) => (prev.length > 0 ? [] : prev));
    setSkillsLoaded(false);
    if (!agentId) return;
    let cancelled = false;
    api
      .getAgentSkills(projectId, agentId)
      .then((res) => {
        if (!cancelled) setAgentSkills(res.skills);
      })
      .catch(() => undefined)
      .finally(() => {
        if (!cancelled) setSkillsLoaded(true);
      });
    return () => {
      cancelled = true;
    };
  }, [projectId, agentId]);

  // —— Auto-cache ——
  // Options (Agent / Workspace / approval mode / Model) are discrete clicks: written
  // immediately on change; body text is keystroke-frequent: debounced trailing write,
  // with a final flush on unmount if there's an unsaved change.
  const saveTimer = useRef<number | null>(null);
  const cancelPendingSave = useCallback(() => {
    if (saveTimer.current !== null) {
      window.clearTimeout(saveTimer.current);
      saveTimer.current = null;
    }
  }, []);

  const persistNow = useCallback(() => {
    cancelPendingSave();
    if (!userId) return;
    const data: DraftCache = { text: textRef.current, workspace, approvalMode };
    if (agentId) data.agentId = agentId;
    if (modelRef) data.modelRef = modelRef;
    if (handoffAgentId) data.handoffAgentId = handoffAgentId;
    if (skillsRef.current.length > 0) data.skills = skillsRef.current;
    saveDraft(draftKey(userId, projectId), data);
  }, [
    cancelPendingSave,
    userId,
    projectId,
    agentId,
    workspace,
    approvalMode,
    modelRef,
    handoffAgentId,
  ]);

  // The timer and unmount cleanup read persistNow via a ref to always get the **latest version**: a stale closure would write back outdated options.
  const persistRef = useRef(persistNow);
  useEffect(() => {
    persistRef.current = persistNow;
    // Write immediately on option change (also writes once on mount, idempotently).
    persistNow();
  }, [persistNow]);

  const onTextChange = useCallback(
    (text: string) => {
      textRef.current = text;
      cancelPendingSave();
      saveTimer.current = window.setTimeout(() => {
        saveTimer.current = null;
        persistRef.current();
      }, DRAFT_SAVE_DEBOUNCE_MS);
    },
    [cancelPendingSave],
  );

  /** Skill checklist change: writes back to the ref and persists immediately (discrete click, same convention as Agent/Model and other options). */
  const onSkillsChange = useCallback((names: string[]) => {
    skillsRef.current = names;
    persistRef.current();
  }, []);

  // Unmount: if there's still unsaved body text, flush it (so a route change/page switch doesn't lose the last few keystrokes).
  useEffect(
    () => () => {
      if (saveTimer.current !== null) {
        window.clearTimeout(saveTimer.current);
        persistRef.current();
      }
    },
    [],
  );

  /** Discard the draft after a successful send: first cancels the pending save timer, otherwise it would write the just-cleared draft back. */
  const discardDraft = useCallback(() => {
    cancelPendingSave();
    // Clear the preselected skills too: any subsequent write (e.g. the unmount flush) must not resurrect a selection that's already been sent.
    skillsRef.current = [];
    if (userId) clearDraft(draftKey(userId, projectId));
  }, [cancelPendingSave, userId, projectId]);

  const selectAgent = (a: AgentSummary) => {
    setAgentId(a.agentId);
    // Follow through to the global current Agent: keeps the sidebar memory and stats convention consistent.
    setCurrentAgentId(a.agentId);
  };

  // One in-flight guard shared by every send entry point (composer send / example task /
  // @-handoff): a second submission while one is running would create a second Session with
  // its own first task and a racing navigation. The ref is the synchronous guard; the state
  // drives disabled styling on the example button (the composer has its own busy state).
  const sendingRef = useRef(false);
  const [sending, setSending] = useState(false);

  // First message sent: only now is the Session created (Agent / Workspace / Model / approval
  // mode are all locked in together), then the route jumps once sent; returns false on any
  // failure, so the input area keeps the draft and can resend. `keepDraft` is set by sends
  // that did not consume the composer text (the example task), so a typed-but-unsent draft
  // survives the navigation instead of being silently discarded.
  const onSend = useCallback(
    async (input: TaskInputPart[], keepDraft = false): Promise<boolean> => {
      if (!agentId || sendingRef.current) return false;
      sendingRef.current = true;
      setSending(true);
      let createdId: string | null = null;
      try {
        const body: SessionCreateRequest = { approvalMode };
        // Model reference is submitted as a pair (provider + modelId; falls back to the Project default when not set).
        if (modelRef) {
          body.modelId = modelRef.modelId;
          body.provider = modelRef.provider;
        }
        if (workspace.trim()) body.workspace = workspace.trim();
        const created = await api.createSession(projectId, agentId, body);
        createdId = created.session.sessionId;
        const res = await api.postTask(createdId, { input });
        add(created.session);
        if (!keepDraft) discardDraft();
        navigate(`/chat/${res.sessionId}`, { replace: true });
        return true;
      } catch (e) {
        // The Session was created but the first message failed to send (postTask failed): delete
        // this empty Session, otherwise every resend attempt would create another one, piling up
        // empty sessions with no messages in the sidebar (best-effort cleanup).
        if (createdId) void api.deleteSession(createdId).catch(() => undefined);
        toastError(apiErrorText(e, modelRef ? { modelId: modelRef.modelId } : {}));
        return false;
      } finally {
        sendingRef.current = false;
        setSending(false);
      }
    },
    [projectId, agentId, approvalMode, modelRef, workspace, add, discardDraft, navigate],
  );

  // Example tasks: one click submits the canned prompt exactly like a hand-typed send (the
  // busy id drives the clicked card's spinner; the shared in-flight guard and all failure
  // handling live in onSend). keepDraft: an example never consumes the composer text, so a
  // typed-but-unsent draft must survive. The selected model / Workspace / approval mode apply as-is.
  const [exampleBusy, setExampleBusy] = useState<"game" | "lol" | "rag" | null>(null);
  const runExample = useCallback(
    async (task: (typeof EXAMPLE_TASKS)[number]) => {
      if (exampleBusy !== null) return;
      setExampleBusy(task.id);
      try {
        const names = task.skills.filter((n) => agentSkills.some((s) => s.name === n));
        await onSend(
          [{ type: "text", text: buildSkillsMessage(names, S.chat.exampleTasks[task.id].prompt) }],
          true,
        );
      } finally {
        setExampleBusy(null);
      }
    },
    [exampleBusy, agentSkills, onSend],
  );

  // @ handoff: opens a new chat for the @-mentioned agent (approval mode carries over from the
  // draft's current value; model/Workspace use the creation defaults), first input =
  // <handoff_from> source block + the text and images with the @ mention stripped.
  const selectedAgent = agents.find((a) => a.agentId === agentId) ?? null;
  const onHandoff = useCallback(
    async (target: AgentSummary, input: TaskInputPart[]): Promise<boolean> => {
      if (!selectedAgent || sendingRef.current) return false;
      sendingRef.current = true;
      setSending(true);
      const origin: TaskInputPart = {
        type: "text",
        text: handoffMessage({
          agentId: selectedAgent.agentId,
          ...(selectedAgent.name !== undefined ? { agentName: selectedAgent.name } : {}),
        }),
      };
      let createdId: string | null = null;
      try {
        const created = await api.createSession(projectId, target.agentId, { approvalMode });
        createdId = created.session.sessionId;
        const res = await api.postTask(createdId, { input: [origin, ...input] });
        add(created.session);
        discardDraft();
        navigate(`/chat/${res.sessionId}`);
        return true;
      } catch (e) {
        if (createdId) void api.deleteSession(createdId).catch(() => undefined);
        // The new chat uses the project's default model (createSession doesn't specify a model reference), so the error copy's model context follows suit.
        toastError(
          apiErrorText(e, models?.defaultModel ? { modelId: models.defaultModel.modelId } : {}),
        );
        return false;
      } finally {
        sendingRef.current = false;
        setSending(false);
      }
    },
    [projectId, selectedAgent, approvalMode, add, discardDraft, navigate, models],
  );

  // Capability info for the currently selected model (vision/context window) switches instantly with the selection (matched by paired reference).
  const modelInfo = models?.models.find((m) => sameModelRef(m, modelRef));
  const contextWindow = modelInfo?.contextWindow;
  const vision = modelInfo?.vision !== false;

  return (
    <div className="anim-fade flex min-h-0 flex-1 flex-col overflow-y-auto px-3 py-6 md:px-4">
      {/*
       * Vertical layout: everything visible — brand, input card, ownership pills, example tasks —
       * lives in ONE block between two empty flex-1 spacers, so the block is centred and the free
       * space above and below it is exactly equal. The brand deliberately sits inside that block
       * rather than in the upper spacer: keeping it in the spacer made the upper gap shorter than
       * the lower one by the brand's own height, which pushed the card up the viewport and left
       * the slash menu — it opens upward, `bottom-full` — too little room, so it clipped against
       * the top of this scroll container. When the viewport is too short the spacers collapse to
       * nothing, the container's own py-6 keeps the content off the edges, and the page falls back
       * to natural scrolling.
       */}
      <div className="flex-1" />

      <div className="mx-auto w-full max-w-3xl">
        {/* Large brand logo + brand name + subtitle (e2e tests identify the draft page by this
            heading). The asset is square-cropped and the graphic already has a bit of built-in
            padding, so a small margin is enough to sit visually close to the title. */}
        <div className="mb-10 text-center">
          <PenguinLogo className="mx-auto mb-1 h-36 w-36 rounded-3xl" />
          <h1 className="text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
            {S.appName}
          </h1>
          <p className="mt-2 text-base text-gray-400 dark:text-gray-500">{S.chat.draftSubtitle}</p>
        </div>

        <ChatInput
          status="idle"
          onSend={onSend}
          onStop={async () => undefined}
          onCompact={async () => undefined}
          modelRef={modelRef}
          models={models?.models ?? []}
          onChangeModel={setModelRef}
          {...(models?.defaultModel !== undefined ? { defaultModel: models.defaultModel } : {})}
          {...(contextWindow !== undefined ? { contextWindow } : {})}
          contextNow={0}
          vision={vision}
          approvalMode={approvalMode}
          onChangeApprovalMode={setApprovalMode}
          modeSaving={false}
          autoFocus
          agents={agents}
          skills={agentSkills}
          {...(cached.skills && cached.skills.length > 0 ? { initialSkills: cached.skills } : {})}
          onSkillsChange={onSkillsChange}
          onHandoff={onHandoff}
          initialText={cached.text ?? ""}
          onTextChange={onTextChange}
          {...(cached.handoffAgentId ? { initialHandoffTargetId: cached.handoffAgentId } : {})}
          onHandoffTargetChange={setHandoffAgentId}
        />

        {/* Ownership selection right below the card (small pill dropdowns, styled after ChatGPT's project picker button) */}
        <div className="mt-2 flex flex-wrap items-center gap-2">
          <AgentSelect agents={agents} selected={selectedAgent} onSelect={selectAgent} />
          <WorkspaceSelect projectId={projectId} workspace={workspace} onChange={setWorkspace} />
        </div>

        {/* Example tasks: one-click canned builds showing off the one-sentence → app flow,
            stacked vertically in display order on every viewport. Disabled until
            agents/models/skills are resolved (onSend would silently no-op without an Agent);
            hover only darkens the border, per the card convention. */}
        <div className="mt-6 flex flex-col items-stretch gap-2">
          {EXAMPLE_TASKS.map((task) => {
            const copy = S.chat.exampleTasks[task.id];
            return (
              <button
                key={task.id}
                type="button"
                disabled={exampleBusy !== null || sending || !skillsLoaded || !agentId || !models}
                onClick={() => void runExample(task)}
                className="group flex min-w-0 items-center gap-3 rounded-xl border border-gray-200 bg-white px-4 py-3 text-left transition-colors duration-150 hover:border-gray-300 disabled:cursor-default disabled:opacity-60 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
              >
                {/* 24×24 line icons (gamepad / music note / sparkle), consistent with the icon convention */}
                {task.id === "lol" ? (
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    className="shrink-0 text-brand-500 dark:text-brand-400"
                    aria-hidden
                  >
                    <path
                      d="M9 18V6l11-2v12"
                      strokeWidth="1.7"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                    <circle cx="6.5" cy="18" r="2.5" strokeWidth="1.7" />
                    <circle cx="17.5" cy="16" r="2.5" strokeWidth="1.7" />
                  </svg>
                ) : task.id === "game" ? (
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    className="shrink-0 text-brand-500 dark:text-brand-400"
                    aria-hidden
                  >
                    <path
                      d="M6.7 6h10.6a4 4 0 0 1 3.97 3.56c.2 1.8.73 5.05.73 6.44a3 3 0 0 1-3 3c-1 0-1.5-.5-2-1l-1.4-1.4a2 2 0 0 0-1.42-.6H9.82a2 2 0 0 0-1.41.6L7 18c-.5.5-1 1-2 1a3 3 0 0 1-3-3c0-1.39.52-4.64.73-6.44A4 4 0 0 1 6.7 6z"
                      strokeWidth="1.7"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M6.5 11h4M8.5 9v4M15 12h.01M18 10h.01"
                      strokeWidth="1.7"
                      strokeLinecap="round"
                    />
                  </svg>
                ) : (
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    className="shrink-0 text-brand-500 dark:text-brand-400"
                    aria-hidden
                  >
                    <path
                      d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z"
                      strokeWidth="1.7"
                      strokeLinejoin="round"
                    />
                    <path
                      d="M18.5 15.5l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9.9-2.1z"
                      strokeWidth="1.4"
                      strokeLinejoin="round"
                    />
                  </svg>
                )}
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-sm font-medium text-gray-900 dark:text-gray-100">
                    {copy.label}
                  </span>
                  <span className="line-clamp-2 text-xs text-gray-500 dark:text-gray-400">
                    {copy.desc}
                  </span>
                </span>
                {exampleBusy === task.id ? (
                  <span className="ml-1 shrink-0 text-xs text-gray-400">{S.common.loading}</span>
                ) : (
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    className="ml-1 shrink-0 text-gray-300 transition-colors duration-150 group-hover:text-gray-500 dark:text-gray-600 dark:group-hover:text-gray-400"
                    aria-hidden
                  >
                    <path
                      d="M5 12h14M13 6l6 6-6 6"
                      strokeWidth="1.7"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                )}
              </button>
            );
          })}
        </div>
      </div>

      {/* Lower symmetric space — empty, so it matches the upper one exactly */}
      <div className="flex-1" />
    </div>
  );
}

/** Shared style for pill trigger buttons (ChatGPT project button style: small rounded pill + icon + short name + collapse arrow). */
const pillClass =
  "flex max-w-64 items-center gap-1.5 rounded-full border border-gray-300 bg-white py-1 pl-1.5 pr-2 " +
  "text-xs text-gray-600 transition-colors duration-150 hover:bg-gray-50 hover:text-gray-900 " +
  "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-100";

/** Agent selection (pill dropdown): avatar + name, menu opens downward with an internal scroll cap. */
function AgentSelect({
  agents,
  selected,
  onSelect,
}: {
  agents: AgentSummary[];
  selected: AgentSummary | null;
  onSelect: (agent: AgentSummary) => void;
}) {
  const [open, setOpen] = useState(false);
  return (
    <Dropdown
      open={open}
      setOpen={setOpen}
      menuClass="left-0 top-full mt-1 w-72 max-w-[calc(100vw-2rem)] origin-top-left"
      button={
        <button
          type="button"
          title={S.chat.chooseAgent}
          aria-label={S.chat.chooseAgent}
          onClick={() => setOpen(!open)}
          className={pillClass}
        >
          {selected ? (
            <AgentAvatar
              id={selected.agentId}
              name={agentDisplayName(selected)}
              size={16}
              className="shrink-0 rounded"
            />
          ) : null}
          <span className="min-w-0 truncate">
            {selected ? agentDisplayName(selected) : S.common.loading}
          </span>
          <Chevron open={open} size={12} className="shrink-0 text-gray-400" />
        </button>
      }
    >
      <div className="max-h-56 overflow-y-auto">
        {agents.length === 0 && (
          <p className="px-3 py-1.5 text-xs text-gray-400">{S.common.loading}</p>
        )}
        {agents.map((a) => {
          const active = a.agentId === selected?.agentId;
          return (
            <button
              key={a.agentId}
              type="button"
              aria-pressed={active}
              onClick={() => {
                onSelect(a);
                setOpen(false);
              }}
              className="flex w-full items-center gap-2.5 px-3 py-1.5 text-left transition-colors duration-150 hover:bg-gray-100 dark:hover:bg-gray-800"
            >
              <AgentAvatar
                id={a.agentId}
                name={agentDisplayName(a)}
                size={20}
                className="shrink-0 rounded"
              />
              <span className="min-w-0 flex-1">
                <span
                  className={`block truncate text-xs ${
                    active
                      ? "font-medium text-gray-900 dark:text-gray-100"
                      : "text-gray-700 dark:text-gray-300"
                  }`}
                >
                  {agentDisplayName(a)}
                </span>
                {a.description && (
                  <span className="block truncate text-[11px] text-gray-400 dark:text-gray-500">
                    {a.description}
                  </span>
                )}
              </span>
              <span className="w-4 shrink-0 text-center text-xs text-gray-500 dark:text-gray-400">
                {active ? "✓" : ""}
              </span>
            </button>
          );
        })}
      </div>
    </Dropdown>
  );
}

/**
 * Workspace selection (pill dropdown): the button shows the selected directory name (empty =
 * auto temporary directory). The menu browses server-side directories: **the current path can be
 * edited directly** at the top (Enter/blur commits it, an invalid directory toasts and reverts
 * to the previous path), the list omits hidden directories, and the hint text sits at the bottom
 * of the menu; only loads on first expand.
 */
function WorkspaceSelect({
  projectId,
  workspace,
  onChange,
}: {
  projectId: string;
  workspace: string;
  onChange: (path: string) => void;
}) {
  const [open, setOpen] = useState(false);
  const browsedRef = useRef(false);

  const [dir, setDir] = useState<DirListResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  /** Edit draft for the path row: synced with the browsing position, reverts on a failed commit. */
  const [pathDraft, setPathDraft] = useState("");

  useEffect(() => {
    setPathDraft(dir?.path ?? "");
  }, [dir]);

  /** Browses level by level (clicking a directory/parent); an empty string means the server's home directory (the default starting point). */
  const loadDir = useCallback(
    (abs: string) => {
      setLoading(true);
      setError(null);
      api
        .listDirs(projectId, abs)
        .then(setDir)
        .catch((e: unknown) => setError(e instanceof ApiError ? e.message : S.common.unknownError))
        .finally(() => setLoading(false));
    },
    [projectId],
  );

  const toggle = () => {
    const next = !open;
    setOpen(next);
    // Only loads on first expand: an already-filled absolute path is used as the starting point, otherwise the server falls back to the home directory.
    if (next && !browsedRef.current) {
      browsedRef.current = true;
      const ws = workspace.trim();
      loadDir(ws.startsWith("/") ? ws : "");
    }
  };

  /** Commits the edited path: navigates to it if it exists, otherwise toasts and reverts to the current browsing position. */
  const commitPathEdit = async () => {
    const p = pathDraft.trim();
    if (!p || p === dir?.path) {
      setPathDraft(dir?.path ?? "");
      return;
    }
    try {
      setDir(await api.listDirs(projectId, p));
    } catch {
      toastError(S.chat.workspaceDirInvalid);
      setPathDraft(dir?.path ?? "");
    }
  };

  const trimmed = workspace.trim();
  // Pill short name: the last segment of the directory name (root gives "/"); shows "auto temp directory" when empty.
  const label = trimmed ? (trimmed.split("/").filter(Boolean).pop() ?? "/") : S.chat.workspaceAuto;
  const parentPath = dir?.parent ?? null;
  // Hidden directories (starting with .) are excluded from the list.
  const entries = (dir?.entries ?? []).filter((e) => !e.name.startsWith("."));
  return (
    <Dropdown
      open={open}
      setOpen={setOpen}
      menuClass="left-0 top-full mt-1 w-80 max-w-[calc(100vw-2rem)] origin-top-left"
      button={
        <button
          type="button"
          title={trimmed ? `${S.chat.workspace}：${trimmed}` : S.chat.workspaceHint}
          aria-label={S.chat.workspace}
          onClick={toggle}
          className={pillClass}
        >
          {/* Folder icon */}
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            className="ml-0.5 shrink-0 text-gray-400"
            aria-hidden
          >
            <path
              d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"
              strokeWidth="1.6"
              strokeLinejoin="round"
            />
          </svg>
          <span className={`min-w-0 truncate ${trimmed ? "font-mono" : ""}`}>{label}</span>
          <Chevron open={open} size={12} className="shrink-0 text-gray-400" />
        </button>
      }
    >
      <div className="space-y-1.5 px-2.5 pb-2.5 pt-2">
        <div className="rounded-md border border-gray-200 dark:border-gray-800">
          {/* Current path (editable: Enter/blur commits, Escape discards) + "Use this directory" (closes the menu once selected) */}
          <div className="flex items-center gap-1.5 border-b border-gray-100 px-1.5 py-1 dark:border-gray-800">
            <input
              value={pathDraft}
              placeholder="…"
              aria-label={S.chat.workspace}
              onChange={(e) => setPathDraft(e.target.value)}
              onBlur={() => void commitPathEdit()}
              onKeyDown={(e) => {
                if (e.key === "Enter" && !e.nativeEvent.isComposing) {
                  e.preventDefault();
                  void commitPathEdit();
                } else if (e.key === "Escape") {
                  // Discard the edit: only reverts the draft; Escape bubbles up to Dropdown, which closes the menu.
                  setPathDraft(dir?.path ?? "");
                }
              }}
              className="min-w-0 flex-1 rounded border border-transparent bg-transparent px-1 py-0.5 font-mono text-xs text-gray-600 focus:border-gray-300 focus:outline-none dark:text-gray-300 dark:focus:border-gray-600"
            />
            <button
              type="button"
              disabled={!dir}
              onClick={() => {
                if (!dir) return;
                onChange(dir.path);
                setOpen(false);
              }}
              className="shrink-0 rounded border border-gray-300 px-1.5 py-0.5 text-xs text-gray-700 transition-colors duration-150 hover:bg-gray-100 disabled:opacity-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
            >
              {S.chat.workspaceUseThis}
            </button>
          </div>
          {/* Directory list (excludes hidden directories) */}
          <ul className="max-h-40 overflow-y-auto py-1">
            {parentPath !== null && (
              <li>
                <button
                  type="button"
                  onClick={() => loadDir(parentPath)}
                  className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left font-mono text-xs text-gray-500 transition-colors duration-150 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
                >
                  ↰ {S.chat.workspaceUp}
                </button>
              </li>
            )}
            {entries.map((entry) => (
              <li key={entry.path}>
                <button
                  type="button"
                  onClick={() => loadDir(entry.path)}
                  className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left font-mono text-xs text-gray-700 transition-colors duration-150 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
                >
                  <svg
                    width="13"
                    height="13"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    className="shrink-0 text-gray-400"
                    aria-hidden
                  >
                    <path
                      d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"
                      strokeWidth="1.6"
                      strokeLinejoin="round"
                    />
                  </svg>
                  <span className="min-w-0 flex-1 truncate">{entry.name}</span>
                </button>
              </li>
            ))}
            {dir && entries.length === 0 && (
              <li className="px-2.5 py-1.5 text-xs text-gray-400">{S.chat.workspaceNoSubdirs}</li>
            )}
            {loading && <li className="px-2.5 py-1.5 text-xs text-gray-400">{S.common.loading}</li>}
            {/* Load failure (e.g. the cached starting directory was deleted): provide "retry" to fall back to the home directory, avoiding getting stuck in an error state. */}
            {error && (
              <li className="flex items-center justify-between gap-2 px-2.5 py-1.5 text-xs text-red-500">
                <span className="min-w-0 flex-1 truncate" title={error}>
                  {error}
                </span>
                <button
                  type="button"
                  onClick={() => loadDir("")}
                  className="shrink-0 rounded border border-gray-300 px-1.5 py-0.5 text-xs text-gray-700 transition-colors duration-150 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800"
                >
                  {S.common.retry}
                </button>
              </li>
            )}
          </ul>
        </div>
        {/* When a directory has been specified, offer a one-click way back to the auto temp directory */}
        {trimmed && (
          <button
            type="button"
            onClick={() => {
              onChange("");
              setOpen(false);
            }}
            className="text-xs text-gray-500 underline decoration-gray-300 underline-offset-2 transition-colors duration-150 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
          >
            {S.chat.workspaceClear}
          </button>
        )}
        {/* Hint text (bottom of the menu) */}
        <p className="px-0.5 text-xs leading-5 text-gray-400 dark:text-gray-500">
          {S.chat.workspaceHint}
        </p>
      </div>
    </Dropdown>
  );
}