import { useParams } from "@octanejs/tanstack-router";
import { useEffect, useRef, useState, useSyncExternalStore } from "octane";
import { Button } from "octane-kumo/components/button";
import { InputArea } from "octane-kumo/components/input";
import { Loader } from "octane-kumo/components/loader";
import { ShikiProvider } from "octane-kumo/code";
import { useShellSession } from "../runtime/shell-session";
import { ConversationSession } from "../runtime/conversation-session";
import { ChatMessage } from "../components/chat-message";
import { ChatModelPicker } from "../components/chat-model-picker";
import { ModelEffortSelect } from "../components/model-effort-select";
import {
  isCredentialProvider,
  type ModelProvider,
} from "../../shared/model-providers";

type ShellStatus = ReturnType<typeof useShellSession>["status"];

// Mounted memory only. No transcript or draft is cached across route changes.
const positions = new Map<
  string,
  { top: number; pinned: boolean; count: number }
>();
function ConversationContent({
  id,
  name,
  shell,
}: {
  id: string;
  name: string;
  shell: ShellStatus;
}) {
  const [session] = useState(() => new ConversationSession(id));
  const view = useSyncExternalStore(
    session.subscribe,
    session.getSnapshot,
    session.getServerSnapshot,
  );
  const [draft, setDraft] = useState("");
  const [count, setCount] = useState(40);
  const [pinned, setPinned] = useState(true);
  const scroller = useRef<HTMLDivElement | null>(null);
  const content = useRef<HTMLDivElement | null>(null);
  const follow = useRef(true);
  const scrollJob = useRef<number | null>(null);
  const restored = useRef(false);
  const restorePosition = useRef<{ top: number; pinned: boolean } | undefined>(
    undefined,
  );
  const latestCount = useRef(count);
  latestCount.current = count;
  const anchor = useRef<{ id: string; top: number } | null>(null);
  const scheduleScroll = () => {
    if (scrollJob.current !== null) cancelAnimationFrame(scrollJob.current);
    scrollJob.current = requestAnimationFrame(() => {
      scrollJob.current = null;
      if (
        !restored.current &&
        scroller.current &&
        content.current?.querySelector("[data-message-id]")
      ) {
        restored.current = true;
        const saved = restorePosition.current;
        if (saved && !saved.pinned) {
          scroller.current.scrollTop = saved.top;
          return;
        }
      }
      const preserved = anchor.current;
      if (preserved && scroller.current) {
        const row = content.current?.querySelector<HTMLElement>(
          `[data-message-id="${CSS.escape(preserved.id)}"]`,
        );
        if (row)
          scroller.current.scrollTop +=
            row.getBoundingClientRect().top - preserved.top;
        anchor.current = null;
      } else if (follow.current && scroller.current)
        scroller.current.scrollTop = scroller.current.scrollHeight;
    });
  };
  useEffect(() => {
    session.start();
    const saved = positions.get(id);
    restorePosition.current = saved;
    if (saved) {
      follow.current = saved.pinned;
      setPinned(saved.pinned);
      setCount(saved.count);
    }
    const resize = new ResizeObserver(scheduleScroll);
    if (content.current) resize.observe(content.current);
    return () => {
      positions.set(id, {
        top: scroller.current?.scrollTop ?? positions.get(id)?.top ?? 0,
        pinned: follow.current,
        count: latestCount.current,
      });
      if (positions.size > 30) positions.delete(positions.keys().next().value!);
      resize.disconnect();
      if (scrollJob.current !== null) cancelAnimationFrame(scrollJob.current);
      session.close();
    };
  }, [session]);
  useEffect(() => {
    if (!view.messages.length) return;
    scheduleScroll();
  }, [view.messages, count]);
  useEffect(() => {
    if (view.connection === "signed-out" || view.connection === "missing") {
      setDraft("");
      positions.delete(id);
    }
  }, [view.connection]);
  const previousShell = useRef(shell);
  useEffect(() => {
    const was = previousShell.current;
    previousShell.current = shell;
    // Signing back in through the shell also recovers a signed-out conversation.
    if (
      shell === "connected" &&
      was !== "connected" &&
      view.connection === "signed-out"
    )
      session.reconnect();
  }, [shell]);
  const busy =
    view.status === "submitted" ||
    view.status === "streaming" ||
    view.serverStreaming ||
    view.recovering ||
    view.stopping;
  const ready = view.connection === "connected" && !view.reconciling;
  const configuration =
    view.modelSelection ?? view.modelSettings?.configuration;
  const providerReady = (provider: ModelProvider) =>
    Boolean(
      view.modelSettings?.providers[provider] &&
      (!isCredentialProvider(provider) ||
        view.modelSettings.credentials[provider] === "configured"),
    );
  const modelReady = !!configuration && providerReady(configuration.provider);
  const jump = () => {
    follow.current = true;
    setPinned(true);
    scheduleScroll();
  };
  const earlier = Math.max(0, view.messages.length - count);
  const terminal =
    view.connection === "signed-out" || view.connection === "missing";
  return (
    <main className="conversation-page" aria-label="Conversation">
      <div className="conversation-heading">
        <h1>
          {view.connection === "missing"
            ? "Conversation not found"
            : terminal
              ? "Conversation"
              : name}
        </h1>
        <p className="muted" role="status">
          {view.stopping
            ? "Stopping…"
            : view.recovering
              ? "Recovering saved progress…"
              : view.connection === "loading"
                ? "Loading conversation…"
                : view.connection === "offline"
                  ? "Reconnecting…"
                  : view.reconciling
                    ? "Checking saved progress…"
                    : busy
                      ? "Flarebot is working…"
                      : view.connection === "connected"
                        ? "Connected"
                        : ""}
        </p>
      </div>
      {view.notice ? (
        <div
          className="chat-notice"
          role={terminal || view.error ? "alert" : "status"}
        >
          <p>{view.notice}</p>
          {!busy ? (
            <Button size="sm" variant="secondary" onClick={session.reconnect}>
              Reconnect
            </Button>
          ) : null}
        </div>
      ) : null}
      <div
        className="chat-scroll"
        ref={scroller}
        onScroll={() => {
          const element = scroller.current;
          if (!element) return;
          const near =
            element.scrollHeight - element.scrollTop - element.clientHeight <
            64;
          follow.current = near;
          setPinned(near);
          positions.set(id, { top: element.scrollTop, pinned: near, count });
        }}
      >
        <div className="chat-transcript" ref={content}>
          {earlier > 0 ? (
            <Button
              variant="secondary"
              onClick={() => {
                const row =
                  content.current?.querySelector<HTMLElement>(
                    "[data-message-id]",
                  );
                if (row)
                  anchor.current = {
                    id: row.dataset.messageId!,
                    top: row.getBoundingClientRect().top,
                  };
                follow.current = false;
                setPinned(false);
                setCount(count + 40);
              }}
            >
              Load earlier messages ({earlier})
            </Button>
          ) : null}
          {!view.messages.length &&
          view.connection === "connected" &&
          !view.reconciling ? (
            <div className="chat-welcome">
              <h2>How can I help?</h2>
              <p>
                Ask a question, research a topic, or schedule something for
                later.
              </p>
            </div>
          ) : null}
          <ShikiProvider
            engine="javascript"
            languages={[
              "javascript",
              "typescript",
              "json",
              "bash",
              "python",
              "html",
              "css",
              "sql",
            ]}
          >
            {view.messages.slice(earlier).map((message) => (
              <ChatMessage
                key={message.id}
                message={message}
                activities={view.activities}
                streaming={busy && message.id === view.messages.at(-1)?.id}
              />
            ))}
          </ShikiProvider>
          {busy ? (
            <p className="inline-loading muted">
              <Loader />
              {view.stopping
                ? "Waiting for cancellation to finish…"
                : "Working…"}
            </p>
          ) : null}
          {view.messages.some((message) =>
            message.parts.some((part) => "toolCallId" in part),
          ) && view.activityCursor !== null ? (
            <Button
              size="sm"
              variant="secondary"
              disabled={view.activitiesLoading || !ready}
              onClick={() => {
                void session.loadActivities();
              }}
            >
              {view.activitiesLoading
                ? "Loading activity…"
                : "Load earlier tool activity"}
            </Button>
          ) : null}
          {view.messages.length > 0 && !busy && !terminal ? (
            <div className="chat-retry">
              <Button
                size="sm"
                variant="secondary"
                disabled={!ready || !modelReady}
                onClick={() => {
                  jump();
                  void session.retry();
                }}
              >
                Retry last response
              </Button>
            </div>
          ) : null}
        </div>
      </div>
      {!pinned ? (
        <div className="chat-jump">
          <Button size="sm" variant="secondary" onClick={jump}>
            Jump to latest
          </Button>
        </div>
      ) : null}
      {view.unsentText ? (
        <div className="chat-notice" role="alert">
          <p>The message was not saved. Your text is retained.</p>
          <details>
            <summary>Unsent message</summary>
            <pre>{view.unsentText}</pre>
          </details>
          <Button
            size="sm"
            variant="secondary"
            disabled={!!draft}
            onClick={() => setDraft(view.unsentText!)}
          >
            Restore unsent message
          </Button>
        </div>
      ) : null}
      {!terminal ? (
        <form
          className="chat-composer"
          onSubmit={(event) => {
            event.preventDefault();
            if (!draft.trim() || !ready || busy || !modelReady) return;
            const text = draft;
            setDraft("");
            jump();
            void session.send(text);
          }}
        >
          <div className="chat-composer-surface">
            <InputArea
              aria-label="Message"
              placeholder="Message Flarebot…"
              value={draft}
              onValueChange={setDraft}
              rows={3}
              maxLength={32_000}
              disabled={terminal}
              onKeyDown={(event) => {
                if (
                  event.key === "Enter" &&
                  !event.shiftKey &&
                  !event.isComposing
                ) {
                  event.preventDefault();
                  event.currentTarget.form?.requestSubmit();
                }
              }}
            />
            <div className="chat-composer-actions">
              <div className="chat-model-controls">
                <ChatModelPicker
                  value={view.modelSelection ?? null}
                  disabled={!ready || busy || !view.modelSettings}
                  providerReady={providerReady}
                  onChange={session.selectModel}
                />
                {configuration && (
                  <ModelEffortSelect
                    compact
                    configuration={configuration}
                    disabled={!ready || busy || !modelReady}
                    onChange={session.selectModel}
                  />
                )}
              </div>
              {busy ? (
                <Button
                  variant="secondary"
                  size="sm"
                  aria-label={view.stopping ? "Stopping…" : "Stop response"}
                  disabled={view.stopping || view.connection !== "connected"}
                  onClick={() => {
                    void session.stop();
                  }}
                >
                  {view.stopping ? "Stopping…" : "Stop"}
                </Button>
              ) : (
                <Button
                  type="submit"
                  variant="primary"
                  aria-label="Send message"
                  disabled={!ready || !draft.trim() || !modelReady}
                >
                  Send
                </Button>
              )}
            </div>
          </div>
          {view.modelSettings && !modelReady ? (
            <p className="chat-model-hint muted">
              Set up the selected provider before sending.{" "}
              <a href="/settings">Provider settings</a>
            </p>
          ) : null}
        </form>
      ) : null}
    </main>
  );
}
export function Conversation() {
  const { id } = useParams({ from: "/conversations/$id" });
  const { conversations, status } = useShellSession();
  return (
    <ConversationContent
      key={id}
      id={id}
      name={
        conversations.find((item) => item.id === id)?.name ?? "Conversation"
      }
      shell={status}
    />
  );
}