import { AgentThread, ChatToolUIs } from "@/components/chat";
import { useAmaSessionEvents } from "../hooks/useAmaSessionEvents";
import { usePersistedSessionEvents } from "../hooks/usePersistedSessionEvents";
import { AmaRuntimeProvider, RelayRuntimeProvider } from "./RelayRuntimeProvider";

interface ChatPanelProps {
  taskId: string;
  agentId: string | null;
  taskDone: boolean;
  /** The AMA session this task is bound to (new ak runner). Present ⇒ AMA path. */
  amaSessionId?: string | null;
  /** The legacy daemon relay session (old, un-upgraded ak). Absent ama ⇒ tunnel. */
  relaySessionId?: string | null;
}

// Two clients can drive one board at once: a new ak (AMA runner) whose task is
// bound to an AMA session, and an old, un-upgraded ak whose legacy daemon relays
// over the tunnel. The chat renders each on its own path so neither blanks the
// other (see the design's Backward compatibility section).
export function ChatPanel({ taskId, agentId, taskDone, amaSessionId, relaySessionId }: ChatPanelProps) {
  if (!agentId) {
    return (
      <div className="flex-1 flex items-center justify-center">
        <p className="text-sm text-content-tertiary">No agent assigned. Chat is available when an agent is working on this task.</p>
      </div>
    );
  }

  if (amaSessionId) {
    return <AmaSessionChat taskId={taskId} taskDone={taskDone} unavailableMessage="Session history is not available for this task." />;
  }

  if (relaySessionId) {
    // When task is done/in_review, load persisted events from DB
    // instead of trying to connect to the (unavailable) WebSocket relay
    if (taskDone) {
      return <PersistedSessionChat taskId={taskId} sessionId={relaySessionId} taskDone={taskDone} />;
    }

    return (
      <RelayRuntimeProvider sessionId={relaySessionId} taskDone={taskDone}>
        <ChatToolUIs />
        <AgentThread taskDone={taskDone} />
      </RelayRuntimeProvider>
    );
  }

  return (
    <div className="flex-1 flex items-center justify-center px-6">
      <p className="text-sm text-content-tertiary text-center">Chưa có lịch sử hội thoại. Agent chưa bắt đầu thực hiện task này.</p>
    </div>
  );
}

// The AMA path: the task's events live in the AMA control plane (the Session DO
// for cloud-loop runtimes, the runner store for self-hosted CLI runtimes), read
// back through AK's server as a paginated snapshot and live-tailed.
export function AmaSessionChat({
  taskId,
  sessionId,
  taskDone,
  unavailableMessage = "Session history is not available.",
}: {
  taskId?: string;
  sessionId?: string;
  taskDone: boolean;
  unavailableMessage?: string;
}) {
  const { events, phase } = useAmaSessionEvents({
    taskId,
    sessionId,
    taskDone,
  });

  if (phase === "loading") {
    return (
      <div className="flex-1 flex items-center justify-center px-6">
        <p className="text-sm text-content-tertiary text-center">Loading runtime history...</p>
      </div>
    );
  }

  if (phase === "error") {
    return (
      <div className="flex-1 flex items-center justify-center px-6">
        <p className="text-sm text-content-tertiary text-center">{unavailableMessage}</p>
      </div>
    );
  }

  return (
    <AmaRuntimeProvider events={events} taskDone={taskDone}>
      <ChatToolUIs />
      <AgentThread taskDone={taskDone} />
    </AmaRuntimeProvider>
  );
}

/** Render persisted relay events loaded from the database. */
function PersistedSessionChat({ taskId, sessionId, taskDone }: { taskId: string; sessionId: string; taskDone: boolean }) {
  const { events, phase } = usePersistedSessionEvents({
    taskId,
    sessionId,
    enabled: true,
  });

  if (phase === "loading") {
    return (
      <div className="flex-1 flex items-center justify-center px-6">
        <p className="text-sm text-content-tertiary text-center">Đang tải lịch sử hoạt động...</p>
      </div>
    );
  }

  if (phase === "error" || phase === "empty") {
    return (
      <div className="flex-1 flex items-center justify-center px-6">
        <p className="text-sm text-content-tertiary text-center">Không có lịch sử hoạt động cho phiên làm việc này.</p>
      </div>
    );
  }

  return (
    <AmaRuntimeProvider events={events} taskDone={taskDone}>
      <ChatToolUIs />
      <AgentThread taskDone={taskDone} />
    </AmaRuntimeProvider>
  );
}