"use client";

import { useEffect, useRef, useState } from "react";
import { newTurnId } from "@agent-client/shared";
import { createWsClient, type WsClient, type WsStatus } from "@/lib/ws-client";
import { useChatStore } from "@/lib/chat-store";
import { TurnView } from "@/components/turn-view";
import { Composer } from "@/components/composer";
import { ConnectionStatus } from "@/components/connection-status";

const WS_URL = process.env.NEXT_PUBLIC_WS_URL ?? "ws://localhost:4291";
const TOKEN = process.env.NEXT_PUBLIC_SERVICE_TOKEN ?? "demo-token-change-me";

export default function Page() {
  const [status, setStatus] = useState<WsStatus>("connecting");
  const [chat, dispatch] = useChatStore();
  const clientRef = useRef<WsClient | null>(null);
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // init-once: WS_URL / TOKEN are module constants, dispatch is stable.
    const client = createWsClient(WS_URL, TOKEN, {
      onStatus: setStatus,
      onMessage: (msg) => dispatch({ kind: "server", msg }),
    });
    clientRef.current = client;
    return () => client.close();
  }, [dispatch]);

  // Auto-scroll on new content; rAF batches with browser layout so streaming
  // tokens don't trigger a sync reflow per token.
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const id = requestAnimationFrame(() => {
      el.scrollTop = el.scrollHeight;
    });
    return () => cancelAnimationFrame(id);
  }, [chat.turns]);

  const lastTurn = chat.turns[chat.turns.length - 1];
  const busy = lastTurn?.status === "running";

  function send(text: string) {
    const id = newTurnId();
    dispatch({ kind: "user_send", id, prompt: text });
    clientRef.current?.send({ type: "user_prompt", id, prompt: text });
  }

  function abort() {
    if (lastTurn?.status === "running") {
      clientRef.current?.send({ type: "abort", id: lastTurn.id });
    }
  }

  const empty = chat.turns.length === 0;

  return (
    <main className="flex min-h-screen flex-col">
      <header className="flex items-center justify-between border-b border-neutral-800 bg-neutral-950/80 px-4 py-3 backdrop-blur">
        <h1 className="text-base font-semibold">AI 助手</h1>
        <ConnectionStatus status={status} />
      </header>

      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-6">
        <div className="mx-auto max-w-3xl space-y-8">
          {empty && (
            <div className="text-center text-sm text-neutral-500 mt-20">
              <p>开始一段对话——我可以读写本地文件、跑 shell 命令。</p>
              <p className="mt-2 text-xs text-neutral-600">
                例如：
                <span className="font-mono">列出当前目录</span> ·
                <span className="font-mono">读 README.md</span>
              </p>
            </div>
          )}
          {chat.turns.map((turn) => (
            <TurnView key={turn.id} turn={turn} />
          ))}
        </div>
      </div>

      <Composer
        disabled={status !== "open"}
        busy={busy}
        onSend={send}
        onAbort={abort}
      />
    </main>
  );
}