/**
 * `AgentsPanel` — feature component for the agents panel (L6).
 *
 * Pure presentation: all behaviour comes from {@link useAgents}. Styled with
 * `@/shared` design system tokens; no inline styles, no classes invented outside
 * the theme.
 *
 * When the user clicks Launch, an agent terminal is mounted below the agent
 * list using a {@link TerminalView} with a custom `open` prop that delegates
 * to `agent.launchAgent`. A Stop button unmounts it.
 *
 * Feature #3: the create form includes a template selector. Choosing a template
 * calls `createAgentFromTemplate`; leaving it at "(none / from scratch)" uses
 * the existing `createAgent` path with the selected profile.
 */

import { useState } from "react";

import { Button, Input, Panel, Spinner, cn } from "@/shared";
import { TerminalView } from "@/features/terminals/TerminalView";
import { AnnouncementsPreview } from "@/features/announcements";
import { useDrift } from "@/features/templates/useDrift";
import { useGateways } from "@/app/di";
import { useAgents } from "./useAgents";
import { AgentLimitBadge } from "./AgentLimitBadge";
import { ModelServerLaunchBadge } from "./ModelServerLaunchBadge";

export interface AgentsPanelProps {
  /** The project whose agents to manage. */
  projectId: string;
  /**
   * The filesystem root of the project. Passed as the `cwd` to the agent
   * terminal. Supplied by `ProjectsView` which has `active.root`.
   */
  projectRoot?: string;
}

export function AgentsPanel({ projectId, projectRoot = "" }: AgentsPanelProps) {
  const vm = useAgents(projectId);
  const drift = useDrift(projectId);
  const gateways = useGateways();
  const templateGw = gateways.template ?? null;

  // Create form state
  const [newName, setNewName] = useState("");
  const [newProfileId, setNewProfileId] = useState("");
  const [newTemplateId, setNewTemplateId] = useState("");

  // Templates available for the selector (loaded lazily on first render via a
  // separate effect handled inline via hook state)
  const [templates, setTemplates] = useState<import("@/domain").Template[]>([]);
  const [templatesLoaded, setTemplatesLoaded] = useState(false);

  // Load templates once on mount (best-effort — if it fails the selector just stays empty)
  if (!templatesLoaded && templateGw) {
    setTemplatesLoaded(true);
    void templateGw.listTemplates().then(setTemplates).catch(() => {});
  }

  // Skills available for assignment (global + project), loaded lazily once.
  const skillGw = gateways.skill ?? null;
  const [skills, setSkills] = useState<import("@/domain").Skill[]>([]);
  const [skillsLoaded, setSkillsLoaded] = useState(false);
  const [skillToAssign, setSkillToAssign] = useState("");

  async function refreshSkills() {
    if (!skillGw) return;
    try {
      const [globals, projects] = await Promise.all([
        skillGw.listSkills(projectId, "global"),
        skillGw.listSkills(projectId, "project"),
      ]);
      setSkills([...projects, ...globals]);
    } catch {
      // Skills are optional — leave the list empty on failure.
    }
  }

  if (!skillsLoaded && skillGw) {
    setSkillsLoaded(true);
    void refreshSkills();
  }

  async function handleAssignSkill() {
    if (!skillGw || !vm.selectedAgentId || !skillToAssign) return;
    const target = skills.find((s) => s.id === skillToAssign);
    if (!target) return;
    await skillGw.assignSkill(
      projectId,
      vm.selectedAgentId,
      target.id,
      target.scope,
    );
    setSkillToAssign("");
    await vm.refresh();
  }

  async function handleUnassignSkill(skillId: string) {
    if (!skillGw || !vm.selectedAgentId) return;
    await skillGw.unassignSkill(projectId, vm.selectedAgentId, skillId);
    await vm.refresh();
  }

  // Context editor state — local copy before Save
  const [editedContext, setEditedContext] = useState(vm.context);

  // When the hook loads the context for a newly selected agent, mirror it.
  // We use a derived check: if the hook's context changed externally we reset.
  const [lastLoadedContext, setLastLoadedContext] = useState(vm.context);
  if (vm.context !== lastLoadedContext) {
    setLastLoadedContext(vm.context);
    setEditedContext(vm.context);
  }

  /**
   * Id of the agent currently being launched / running in the terminal pane.
   * Kept in local state so the terminal container can appear immediately when
   * the user clicks Launch (before the gateway resolves). vm.runningAgentId is
   * set by the hook once launchAgent resolves.
   */
  const [activeAgentId, setActiveAgentId] = useState<string | null>(null);
  const [panelNodeIds, setPanelNodeIds] = useState<Record<string, string>>({});

  /**
   * Live PTY session id of the running agent terminal, keyed by agent id. Lets
   * the terminal re-attach (rather than re-launch) when the panel re-mounts the
   * view, so navigating away never kills the agent.
   */
  const [agentSessions, setAgentSessions] = useState<Record<string, string>>(
    {},
  );

  /**
   * Pending profile change awaiting confirmation: the target agent + the chosen
   * profile id. `null` when no dialog is open. Switching the engine abandons the
   * conversation history, so it is gated behind an explicit confirmation.
   */
  const [pendingProfileChange, setPendingProfileChange] = useState<{
    agentId: string;
    profileId: string;
  } | null>(null);

  async function confirmProfileChange() {
    if (!pendingProfileChange) return;
    const { agentId, profileId } = pendingProfileChange;
    setPendingProfileChange(null);
    // Use the running agent terminal's size when available; fall back to a sane
    // default (the backend only needs these for a possible hot relaunch).
    const relaunched = await vm.changeAgentProfile(agentId, profileId, 24, 80);
    // On a hot relaunch the backend mints a fresh session; rebind the panel's
    // terminal to it and drop any persisted conversation id for this cell (the
    // history is gone — the front reflects the swap for the current session).
    if (relaunched && agentId === activeAgentId) {
      setAgentSessions((prev) => ({ ...prev, [agentId]: relaunched.sessionId }));
    }
  }

  const canCreate = newName.trim().length > 0 && !vm.busy;

  async function handleCreate(e: React.FormEvent) {
    e.preventDefault();
    if (!canCreate) return;
    if (newTemplateId && templateGw) {
      // Create from template — the template imposes its default profile.
      await templateGw.createAgentFromTemplate(projectId, newTemplateId, {
        name: newName.trim(),
        synchronized: true,
      });
      // Refresh the agents list since we bypassed the hook's createAgent path.
      await vm.refresh();
    } else {
      const profileId = newProfileId.trim() || "";
      await vm.createAgent(newName.trim(), profileId);
    }
    setNewName("");
    setNewProfileId("");
    setNewTemplateId("");
  }

  function handleLaunch(agentId: string) {
    setPanelNodeIds((prev) => ({
      ...prev,
      [agentId]: prev[agentId] ?? crypto.randomUUID(),
    }));
    setActiveAgentId(agentId);
  }

  function handleStop(agentId?: string) {
    void vm.stopAgent(agentId);
    setActiveAgentId(null);
  }

  const selectedAgent = vm.agents.find((a) => a.id === vm.selectedAgentId) ?? null;

  // Determine if a template is chosen → profile selector is hidden (template imposes it).
  const hasTemplate = newTemplateId !== "";

  return (
    <Panel title="Agents" className="flex flex-col gap-0">
      {vm.error && (
        <p
          role="alert"
          className="mx-4 mt-3 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger"
        >
          {vm.error}
        </p>
      )}

      {/* ── Create form ── */}
      <form
        onSubmit={(e) => void handleCreate(e)}
        className="flex flex-col gap-3 border-b border-border p-4"
      >
        <div className="flex min-w-0 flex-col gap-1">
          <label
            htmlFor="agent-name-input"
            className="text-xs font-medium text-muted"
          >
            Name
          </label>
          <Input
            id="agent-name-input"
            aria-label="agent name"
            placeholder="My agent"
            value={newName}
            onChange={(e) => setNewName(e.target.value)}
            className="w-full"
          />
        </div>

        {/* Template selector */}
        <div className="flex min-w-0 flex-col gap-1">
          <label
            htmlFor="agent-template-select"
            className="text-xs font-medium text-muted"
          >
            Template
          </label>
          <select
            id="agent-template-select"
            aria-label="agent template"
            value={newTemplateId}
            onChange={(e) => setNewTemplateId(e.target.value)}
            className={cn(
              "h-9 w-full rounded-md bg-raised px-3 text-sm text-content",
              "border border-border outline-none transition-colors",
              "focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
            )}
            disabled={vm.busy}
          >
            <option value="">(none / from scratch)</option>
            {templates.map((t) => (
              <option key={t.id} value={t.id}>
                {t.name}
              </option>
            ))}
          </select>
        </div>

        {/* Profile selector — hidden when a template is chosen */}
        {!hasTemplate && (
          <div className="flex min-w-0 flex-col gap-1">
            <label
              htmlFor="agent-profile-select"
              className="text-xs font-medium text-muted"
            >
              Profile
              {vm.profiles.length === 0 && (
                <span className="ml-1 text-faint">(no profiles configured — you can still enter an id)</span>
              )}
            </label>
            {vm.profiles.length > 0 ? (
              <select
                id="agent-profile-select"
                aria-label="agent profile"
                value={newProfileId}
                onChange={(e) => setNewProfileId(e.target.value)}
                className={cn(
                  "h-9 w-full rounded-md bg-raised px-3 text-sm text-content",
                  "border border-border outline-none transition-colors",
                  "focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
                )}
              >
                <option value="">— select profile —</option>
                {vm.profiles.map((p) => (
                  <option key={p.id} value={p.id}>
                    {p.name}
                  </option>
                ))}
              </select>
            ) : (
              <Input
                id="agent-profile-select"
                aria-label="agent profile"
                placeholder="profile-id (optional)"
                value={newProfileId}
                onChange={(e) => setNewProfileId(e.target.value)}
                className="min-w-32"
              />
            )}
          </div>
        )}

        <Button
          type="submit"
          variant="primary"
          aria-label="create agent"
          disabled={!canCreate}
          loading={vm.busy}
          className="self-end"
        >
          Create
        </Button>
      </form>

      {/* ── Agent list ── */}
      <div className="p-4">
        {vm.agents.length === 0 ? (
          <p className="text-sm text-muted">No agents yet.</p>
        ) : (
          <ul className="flex flex-col divide-y divide-border">
            {vm.agents.map((a) => {
              const isSelected = a.id === vm.selectedAgentId;
              const isRunning = a.id === activeAgentId;
              const live = vm.liveAgents.find((candidate) => candidate.agentId === a.id);
              const profileName =
                vm.profiles.find((p) => p.id === a.profileId)?.name ??
                a.profileId;
              const agentDrift = drift.driftByAgentId.get(a.id);
              // Source of this agent's last orchestration delegation (mcp vs
              // file), if any has been observed. Absent ⇒ no badge.
              const delegationSource = vm.delegationSourceByRequester[a.id];
              // Session-limit state (ARCHITECTURE §21), if the agent is limited.
              const limitState = vm.limitByAgent[a.id];
              // F35 — local model server launch state, correlated from the
              // agent's profile binding (`opencode.localModelServerId`), plus the
              // agent's last launch failure (if any).
              const boundServerId = vm.profiles.find((p) => p.id === a.profileId)
                ?.opencode?.localModelServerId;
              const modelServerStatus = boundServerId
                ? vm.modelServerStatusByServer[boundServerId]
                : undefined;
              const launchFailure = vm.launchFailureByAgent[a.id];
              return (
                <li
                  key={a.id}
                  className={cn(
                    "flex flex-col gap-2 py-3 first:pt-0 last:pb-0",
                    isSelected && "rounded-md bg-raised px-2",
                  )}
                >
                  <button
                    type="button"
                    onClick={() => void vm.selectAgent(a.id)}
                    className="flex min-w-0 flex-col items-start gap-0.5 text-left"
                    aria-pressed={isSelected}
                  >
                    <span className="flex min-w-0 max-w-full flex-wrap items-center gap-2">
                      <span className="font-medium text-content">{a.name}</span>
                      {agentDrift && (
                        <span
                          aria-label="update available"
                          className="rounded-full bg-primary/20 px-2 py-0.5 text-xs font-medium text-primary"
                        >
                          update available
                        </span>
                      )}
                      {delegationSource && (
                        <span
                          aria-label={`delegation source ${delegationSource}`}
                          title={
                            delegationSource === "mcp"
                              ? "Last delegation arrived via the MCP server"
                              : "Last delegation arrived via .ideai/requests"
                          }
                          className="rounded-full bg-raised px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted"
                        >
                          {delegationSource}
                        </span>
                      )}
                    </span>
                    <span className="text-xs text-muted">{profileName}</span>
                    {live && (
                      <span className="block w-full min-w-0 truncate text-xs text-primary">
                        running in IdeA · {live.sessionId ?? live.nodeId}
                      </span>
                    )}
                  </button>

                  {limitState && (
                    <AgentLimitBadge
                      state={limitState}
                      busy={vm.busy}
                      onCancelResume={() => void vm.cancelResume(a.id)}
                      onSetResumeAt={(resetsAtMs) =>
                        void vm.setResumeAt(a.id, resetsAtMs)
                      }
                    />
                  )}

                  {/* F35 — local model server launch state / actionable failure. */}
                  <ModelServerLaunchBadge
                    status={modelServerStatus}
                    failure={launchFailure}
                  />

                  {/* F2 (ticket #4): announcements this agent is waiting on while
                      it talks to another agent (requester == this row's id). Sits
                      just above the agent drop-list. */}
                  <AnnouncementsPreview requester={a.id} />

                  <div className="flex flex-wrap items-center gap-1.5">
                    {/* Profile hot-swap selector (Chantier A). Changing the
                        engine abandons the conversation history → confirmation. */}
                    {vm.profiles.length > 0 && (
                      <select
                        aria-label={`profile for ${a.name}`}
                        value={a.profileId}
                        disabled={vm.busy}
                        onChange={(e) => {
                          const profileId = e.target.value;
                          if (profileId && profileId !== a.profileId) {
                            setPendingProfileChange({ agentId: a.id, profileId });
                          }
                        }}
                        className={cn(
                          "h-8 rounded-md bg-raised px-2 text-xs text-content",
                          "border border-border outline-none transition-colors",
                          "focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
                        )}
                      >
                        {vm.profiles.every((p) => p.id !== a.profileId) && (
                          <option value={a.profileId}>{a.profileId}</option>
                        )}
                        {vm.profiles.map((p) => (
                          <option key={p.id} value={p.id}>
                            {p.name}
                          </option>
                        ))}
                      </select>
                    )}
                    {agentDrift && (
                      <Button
                        size="sm"
                        variant="primary"
                        aria-label={`sync ${a.name}`}
                        disabled={vm.busy || drift.driftBusy}
                        onClick={() =>
                          void drift.syncAgent(a.id, vm.refresh)
                        }
                      >
                        Sync
                      </Button>
                    )}
                    {isRunning || live ? (
                      <Button
                        size="sm"
                        variant="ghost"
                        aria-label={`stop ${a.name}`}
                        onClick={() => handleStop(a.id)}
                        className="text-danger hover:text-danger"
                      >
                        Stop
                      </Button>
                    ) : (
                      <Button
                        size="sm"
                        variant="primary"
                        aria-label={`launch ${a.name}`}
                        disabled={vm.busy || activeAgentId !== null}
                        onClick={() => handleLaunch(a.id)}
                      >
                        Launch
                      </Button>
                    )}
                    <Button
                      size="sm"
                      variant="ghost"
                      aria-label={`delete ${a.name}`}
                      disabled={vm.busy}
                      onClick={() => void vm.deleteAgent(a.id)}
                      className="text-danger hover:text-danger"
                    >
                      Delete
                    </Button>
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </div>

      {/* ── Agent terminal ── */}
      {activeAgentId !== null && (
        <div className="border-t border-border p-4">
          <div className="h-96 overflow-hidden rounded-lg border border-border bg-surface">
            <TerminalView
              key={activeAgentId}
              cwd={projectRoot}
              open={(opts, onData) =>
                vm.launchAgent(
                  activeAgentId,
                  { ...opts, nodeId: panelNodeIds[activeAgentId] },
                  onData,
                )
              }
              reattach={(sessionId, onData) =>
                gateways.agent.reattach(sessionId, onData)
              }
              sessionId={agentSessions[activeAgentId] ?? null}
              onSessionId={(sid) =>
                setAgentSessions((prev) => ({ ...prev, [activeAgentId]: sid }))
              }
            />
          </div>
        </div>
      )}

      {/* ── Skill assignment ── */}
      {selectedAgent && skillGw && (
        <div className="flex flex-col gap-2 border-t border-border p-4">
          <h4 className="text-sm font-semibold text-content">
            Skills — {selectedAgent.name}
          </h4>

          {/* Assigned skills */}
          {selectedAgent.skills.length === 0 ? (
            <p className="text-xs text-muted">No skills assigned.</p>
          ) : (
            <ul className="flex flex-wrap gap-1.5">
              {selectedAgent.skills.map((ref) => {
                const name =
                  skills.find((s) => s.id === ref.skillId)?.name ?? ref.skillId;
                return (
                  <li
                    key={ref.skillId}
                    className="flex items-center gap-1 rounded-full bg-raised px-2 py-0.5 text-xs text-content"
                  >
                    <span>{name}</span>
                    <button
                      type="button"
                      aria-label={`unassign ${name}`}
                      disabled={vm.busy}
                      onClick={() => void handleUnassignSkill(ref.skillId)}
                      className="text-faint hover:text-danger"
                    >
                      ✕
                    </button>
                  </li>
                );
              })}
            </ul>
          )}

          {/* Assign selector */}
          <div className="flex items-end gap-2">
            <select
              aria-label="skill to assign"
              value={skillToAssign}
              onChange={(e) => setSkillToAssign(e.target.value)}
              disabled={vm.busy}
              className={cn(
                "h-9 min-w-0 flex-1 rounded-md bg-raised px-3 text-sm text-content",
                "border border-border outline-none transition-colors",
                "focus:border-primary disabled:cursor-not-allowed disabled:opacity-50",
              )}
            >
              <option value="">— assign a skill —</option>
              {skills
                .filter(
                  (s) =>
                    !selectedAgent.skills.some((r) => r.skillId === s.id),
                )
                .map((s) => (
                  <option key={s.id} value={s.id}>
                    {s.name} ({s.scope})
                  </option>
                ))}
            </select>
            <Button
              variant="primary"
              aria-label="assign skill"
              disabled={vm.busy || !skillToAssign}
              onClick={() => void handleAssignSkill()}
            >
              Assign
            </Button>
          </div>
        </div>
      )}

      {/* ── Context editor ── */}
      {selectedAgent && (
        <div className="flex flex-col gap-2 border-t border-border p-4">
          <div className="flex items-center justify-between gap-2">
            <h4 className="text-sm font-semibold text-content">
              Context — {selectedAgent.name}
            </h4>
            <code className="text-xs text-muted">{selectedAgent.contextPath}</code>
          </div>
          <textarea
            aria-label="agent context"
            value={editedContext}
            onChange={(e) => setEditedContext(e.target.value)}
            rows={10}
            className={cn(
              "w-full rounded-md bg-raised px-3 py-2 text-sm text-content",
              "border border-border outline-none transition-colors",
              "focus:border-primary placeholder:text-faint",
              "disabled:cursor-not-allowed disabled:opacity-50 resize-y font-mono",
            )}
            disabled={vm.busy}
          />
          <div className="flex items-center justify-end gap-2">
            {vm.busy && <Spinner size={14} />}
            <Button
              variant="primary"
              disabled={vm.busy}
              onClick={() => void vm.saveContext(editedContext)}
            >
              Save
            </Button>
          </div>
        </div>
      )}

      {/* ── Profile-change confirmation dialog ── */}
      {pendingProfileChange && (
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Confirm profile change"
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4"
        >
          <div className="w-full max-w-sm rounded-lg border border-border bg-surface p-5 shadow-xl">
            <h4 className="text-sm font-semibold text-content">
              Changer le moteur IA
            </h4>
            <p className="mt-2 text-sm text-muted">
              Changer le moteur abandonne l'historique de conversation (le
              contexte et la mémoire sont conservés). Continuer&nbsp;?
            </p>
            <div className="mt-4 flex items-center justify-end gap-2">
              <Button
                variant="ghost"
                aria-label="cancel profile change"
                disabled={vm.busy}
                onClick={() => setPendingProfileChange(null)}
              >
                Annuler
              </Button>
              <Button
                variant="primary"
                aria-label="confirm profile change"
                loading={vm.busy}
                disabled={vm.busy}
                onClick={() => void confirmProfileChange()}
              >
                Continuer
              </Button>
            </div>
          </div>
        </div>
      )}
    </Panel>
  );
}