"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import {
  Check,
  Loader2,
  MessageSquare,
  NotebookPen,
  Sparkles,
  User,
} from "lucide-react";
import { useTranslation } from "react-i18next";
import PickerShell from "@/components/common/PickerShell";
import PickerHeader from "@/components/common/PickerHeader";
import { apiFetch, apiUrl } from "@/lib/api";
import {
  listNotebooks,
  type NotebookSummary as RealNotebookSummary,
} from "@/lib/notebook-api";

type RecordType =
  | "solve"
  | "question"
  | "research"
  | "chat"
  | "co_writer"
  | "tutorbot";

export interface NotebookSavePayload {
  recordType: RecordType;
  title: string;
  userQuery: string;
  output: string;
  metadata?: Record<string, unknown>;
  kbName?: string | null;
}

export interface NotebookSaveMessage {
  role: "user" | "assistant" | "system";
  content: string;
  capability?: string;
}

interface SaveToNotebookModalProps {
  open: boolean;
  payload: NotebookSavePayload | null;
  /**
   * Optional list of chat messages. When provided, the modal switches to
   * "selection mode" and lets the user pick which messages to include in the
   * saved notebook record. The transcript / userQuery in the final request
   * are rebuilt from the selected subset, while other fields (recordType,
   * metadata, kbName) come from `payload`.
   */
  messages?: NotebookSaveMessage[] | null;
  onClose: () => void;
  onSaved?: (result: { summary: string }) => void;
}

function parseSseEvents(
  buffer: string,
): Array<{ payload: Record<string, unknown> }> {
  const events: Array<{ payload: Record<string, unknown> }> = [];
  const chunks = buffer.split("\n\n");
  for (let i = 0; i < chunks.length - 1; i += 1) {
    const lines = chunks[i]
      .split("\n")
      .map((line) => line.trim())
      .filter(Boolean);
    const dataLine = lines.find((line) => line.startsWith("data:"));
    if (!dataLine) continue;
    try {
      const payload = JSON.parse(dataLine.slice(5).trim()) as Record<
        string,
        unknown
      >;
      events.push({ payload });
    } catch {
      continue;
    }
  }
  return events;
}

function roleLabelKey(role: NotebookSaveMessage["role"]): string {
  if (role === "user") return "User";
  if (role === "assistant") return "Assistant";
  return "System";
}

function buildTranscript(messages: NotebookSaveMessage[]): string {
  return messages
    .map((msg) => {
      const role =
        msg.role === "user"
          ? "User"
          : msg.role === "assistant"
            ? "Assistant"
            : "System";
      return `## ${role}\n${msg.content}`;
    })
    .join("\n\n");
}

function buildUserQuery(messages: NotebookSaveMessage[]): string {
  return messages
    .filter((msg) => msg.role === "user")
    .map((msg) => msg.content)
    .join("\n\n");
}

function deriveTitle(
  messages: NotebookSaveMessage[],
  fallback: string,
): string {
  const firstUser = messages.find((msg) => msg.role === "user");
  const candidate = firstUser?.content.trim();
  if (!candidate) return fallback;
  return candidate.slice(0, 80);
}

/**
 * Compute the indexes of the most recent N "turns". A turn is loosely
 * defined as a user message plus any assistant/system messages that follow
 * it until the next user message. When N exceeds the available turn count
 * we just return all message indexes.
 */
function indexesForLastTurns(
  messages: NotebookSaveMessage[],
  turnCount: number,
): number[] {
  if (messages.length === 0 || turnCount <= 0) return [];
  const userPositions: number[] = [];
  messages.forEach((msg, idx) => {
    if (msg.role === "user") userPositions.push(idx);
  });
  if (userPositions.length === 0) {
    return messages.map((_, idx) => idx);
  }
  const startUserIdx = Math.max(0, userPositions.length - turnCount);
  const startMessageIdx = userPositions[startUserIdx];
  const result: number[] = [];
  for (let i = startMessageIdx; i < messages.length; i += 1) result.push(i);
  return result;
}

export default function SaveToNotebookModal({
  open,
  payload,
  messages,
  onClose,
  onSaved,
}: SaveToNotebookModalProps) {
  const { t } = useTranslation();
  const [notebooks, setNotebooks] = useState<RealNotebookSummary[]>([]);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [title, setTitle] = useState("");
  const [titleEdited, setTitleEdited] = useState(false);
  const [summaryPreview, setSummaryPreview] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingNotebooks, setIsLoadingNotebooks] = useState(false);
  const [error, setError] = useState("");
  const [selectedMessageIdx, setSelectedMessageIdx] = useState<Set<number>>(
    new Set(),
  );
  const abortRef = useRef<AbortController | null>(null);

  const hasMessageSelection = Array.isArray(messages) && messages.length > 0;

  useEffect(() => {
    if (!open) {
      abortRef.current?.abort();
      return;
    }
    setSummaryPreview("");
    setError("");
    setSelectedIds([]);
    setTitleEdited(false);
    if (hasMessageSelection && messages) {
      setSelectedMessageIdx(new Set(messages.map((_, idx) => idx)));
      setTitle(deriveTitle(messages, payload?.title || ""));
    } else {
      setSelectedMessageIdx(new Set());
      setTitle(payload?.title || "");
    }
    setIsLoadingNotebooks(true);
    void (async () => {
      try {
        const list = await listNotebooks();
        setNotebooks(list);
      } catch {
        setNotebooks([]);
      } finally {
        setIsLoadingNotebooks(false);
      }
    })();
  }, [open, payload, messages, hasMessageSelection]);

  const orderedSelectedMessages = useMemo<NotebookSaveMessage[]>(() => {
    if (!hasMessageSelection || !messages) return [];
    const indexes = Array.from(selectedMessageIdx).sort((a, b) => a - b);
    return indexes
      .map((idx) => messages[idx])
      .filter((msg): msg is NotebookSaveMessage => Boolean(msg));
  }, [hasMessageSelection, messages, selectedMessageIdx]);

  // When the user hasn't manually edited the title yet, keep it in sync
  // with the first selected user message so it stays meaningful as the
  // selection changes.
  useEffect(() => {
    if (!open || !hasMessageSelection || titleEdited) return;
    const next = deriveTitle(orderedSelectedMessages, payload?.title || "");
    setTitle(next);
  }, [
    open,
    hasMessageSelection,
    titleEdited,
    orderedSelectedMessages,
    payload?.title,
  ]);

  const effectiveOutput = useMemo(() => {
    if (hasMessageSelection) {
      return buildTranscript(orderedSelectedMessages);
    }
    return payload?.output || "";
  }, [hasMessageSelection, orderedSelectedMessages, payload?.output]);

  const effectiveUserQuery = useMemo(() => {
    if (hasMessageSelection) {
      return buildUserQuery(orderedSelectedMessages);
    }
    return payload?.userQuery || "";
  }, [hasMessageSelection, orderedSelectedMessages, payload?.userQuery]);

  const canSave = useMemo(
    () =>
      Boolean(
        payload &&
        title.trim() &&
        selectedIds.length > 0 &&
        effectiveOutput.trim() &&
        (!hasMessageSelection || orderedSelectedMessages.length > 0),
      ),
    [
      payload,
      title,
      selectedIds.length,
      effectiveOutput,
      hasMessageSelection,
      orderedSelectedMessages.length,
    ],
  );

  const toggleNotebook = (id: string) => {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
    );
  };

  const toggleMessage = (idx: number) => {
    setSelectedMessageIdx((prev) => {
      const next = new Set(prev);
      if (next.has(idx)) {
        next.delete(idx);
      } else {
        next.add(idx);
      }
      return next;
    });
  };

  const selectAllMessages = () => {
    if (!messages) return;
    setSelectedMessageIdx(new Set(messages.map((_, idx) => idx)));
  };

  const clearMessages = () => {
    setSelectedMessageIdx(new Set());
  };

  const selectLastTurns = (turnCount: number) => {
    if (!messages) return;
    setSelectedMessageIdx(new Set(indexesForLastTurns(messages, turnCount)));
  };

  const handleSave = async () => {
    if (!payload || !canSave) return;
    abortRef.current?.abort();
    const controller = new AbortController();
    abortRef.current = controller;
    setIsLoading(true);
    setError("");
    setSummaryPreview("");

    const metadata: Record<string, unknown> = { ...(payload.metadata || {}) };
    if (hasMessageSelection && messages) {
      metadata.message_count = orderedSelectedMessages.length;
      metadata.total_message_count = messages.length;
      metadata.selected_message_indexes = Array.from(selectedMessageIdx).sort(
        (a, b) => a - b,
      );
    }

    try {
      const response = await apiFetch(
        apiUrl("/api/v1/notebook/add_record_with_summary"),
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            notebook_ids: selectedIds,
            record_type: payload.recordType,
            title: title.trim(),
            user_query: effectiveUserQuery,
            output: effectiveOutput,
            metadata,
            kb_name: payload.kbName || null,
          }),
          signal: controller.signal,
        },
      );

      if (!response.ok || !response.body) {
        throw new Error(t("Failed to save to notebook."));
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let buffer = "";
      let finalSummary = "";

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buffer += decoder.decode(value, { stream: true });
        const lastSeparator = buffer.lastIndexOf("\n\n");
        if (lastSeparator === -1) continue;

        const consumable = buffer.slice(0, lastSeparator + 2);
        buffer = buffer.slice(lastSeparator + 2);

        for (const event of parseSseEvents(consumable)) {
          const type = String(event.payload.type || "");
          if (type === "summary_chunk") {
            const chunk = String(event.payload.content || "");
            finalSummary += chunk;
            setSummaryPreview(finalSummary);
          } else if (type === "error") {
            throw new Error(
              String(event.payload.detail || t("Failed to save to notebook.")),
            );
          } else if (type === "result") {
            const summary = String(event.payload.summary || finalSummary);
            setSummaryPreview(summary);
            onSaved?.({ summary });
            setIsLoading(false);
            onClose();
            return;
          }
        }
      }

      throw new Error(t("Notebook save stream ended unexpectedly."));
    } catch (err) {
      if (controller.signal.aborted) return;
      setError(
        err instanceof Error ? err.message : t("Failed to save to notebook."),
      );
      setIsLoading(false);
    }
  };

  // payload may be null while the parent is preparing the save context.
  // Treat that as "not open" so the shell never renders without content.
  const isOpen = open && !!payload;

  const totalMessages = messages?.length ?? 0;
  const selectedMessageCount = selectedMessageIdx.size;
  const allMessagesSelected =
    totalMessages > 0 && selectedMessageCount === totalMessages;

  return (
    <PickerShell
      open={isOpen}
      onClose={onClose}
      labelledBy="save-to-notebook-title"
      zIndex={80}
      className="p-4 backdrop-blur-md"
      backdropClass="bg-[var(--background)]/65"
    >
      <div className="surface-card flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] text-[var(--card-foreground)] shadow-[0_22px_70px_rgba(0,0,0,0.18)]">
        <PickerHeader
          icon={NotebookPen}
          titleId="save-to-notebook-title"
          title={t("Save to Notebook")}
          subtitle={
            hasMessageSelection
              ? t(
                  "Choose which messages to include, pick one or more notebooks, and a summary will be generated automatically.",
                )
              : t(
                  "Select one or more notebooks. A summary will be generated automatically.",
                )
          }
          onClose={onClose}
        />

        <div className="flex-1 space-y-5 overflow-y-auto bg-[var(--background)]/40 px-5 py-5">
          <div>
            <label className="mb-2 block text-sm font-medium text-[var(--foreground)]">
              {t("Title")}
            </label>
            <input
              value={title}
              onChange={(e) => {
                setTitle(e.target.value);
                setTitleEdited(true);
              }}
              className="w-full rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-2.5 text-sm text-[var(--foreground)] outline-none transition focus:border-[var(--primary)]/60 focus:ring-2 focus:ring-[var(--primary)]/15"
            />
          </div>

          {hasMessageSelection && messages && (
            <div>
              <div className="mb-2 flex items-center justify-between gap-2">
                <label className="block text-sm font-medium text-[var(--foreground)]">
                  {t("Messages to include")}
                </label>
                <span className="text-xs text-[var(--muted-foreground)]">
                  {t("{{selected}} of {{total}} selected", {
                    selected: selectedMessageCount,
                    total: totalMessages,
                  })}
                </span>
              </div>
              <div className="mb-2 flex flex-wrap items-center gap-1.5">
                <button
                  type="button"
                  onClick={selectAllMessages}
                  disabled={allMessagesSelected}
                  className="rounded-md border border-[var(--border)] bg-[var(--card)] px-2.5 py-1 text-[11px] font-medium text-[var(--muted-foreground)] transition-colors hover:border-[var(--primary)]/40 hover:text-[var(--foreground)] disabled:cursor-not-allowed disabled:opacity-50"
                >
                  {t("Select all")}
                </button>
                <button
                  type="button"
                  onClick={clearMessages}
                  disabled={selectedMessageCount === 0}
                  className="rounded-md border border-[var(--border)] bg-[var(--card)] px-2.5 py-1 text-[11px] font-medium text-[var(--muted-foreground)] transition-colors hover:border-[var(--primary)]/40 hover:text-[var(--foreground)] disabled:cursor-not-allowed disabled:opacity-50"
                >
                  {t("Clear")}
                </button>
                <button
                  type="button"
                  onClick={() => selectLastTurns(1)}
                  className="rounded-md border border-[var(--border)] bg-[var(--card)] px-2.5 py-1 text-[11px] font-medium text-[var(--muted-foreground)] transition-colors hover:border-[var(--primary)]/40 hover:text-[var(--foreground)]"
                >
                  {t("Last turn")}
                </button>
                <button
                  type="button"
                  onClick={() => selectLastTurns(3)}
                  className="rounded-md border border-[var(--border)] bg-[var(--card)] px-2.5 py-1 text-[11px] font-medium text-[var(--muted-foreground)] transition-colors hover:border-[var(--primary)]/40 hover:text-[var(--foreground)]"
                >
                  {t("Last 3 turns")}
                </button>
              </div>
              <div className="max-h-72 space-y-1.5 overflow-y-auto rounded-xl border border-[var(--border)] bg-[var(--card)] p-2">
                {messages.map((msg, idx) => {
                  const selected = selectedMessageIdx.has(idx);
                  const Icon =
                    msg.role === "user"
                      ? User
                      : msg.role === "assistant"
                        ? Sparkles
                        : MessageSquare;
                  const preview = msg.content.replace(/\s+/g, " ").trim();
                  const empty = preview.length === 0;
                  return (
                    <button
                      key={idx}
                      type="button"
                      onClick={() => toggleMessage(idx)}
                      className={`flex w-full items-start gap-3 rounded-lg border px-3 py-2 text-left transition ${
                        selected
                          ? "border-[var(--primary)]/40 bg-[var(--primary)]/8"
                          : "border-transparent hover:border-[var(--border)] hover:bg-[var(--muted)]/40"
                      }`}
                    >
                      <span
                        className={`mt-0.5 flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-md border transition-colors ${
                          selected
                            ? "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-foreground)]"
                            : "border-[var(--border)] text-transparent"
                        }`}
                      >
                        <Check className="h-3 w-3" />
                      </span>
                      <div className="min-w-0 flex-1">
                        <div className="mb-0.5 flex items-center gap-1.5 text-[11px] font-medium text-[var(--muted-foreground)]">
                          <Icon className="h-3 w-3" />
                          <span>{t(roleLabelKey(msg.role))}</span>
                          <span className="text-[var(--muted-foreground)]/60">
                            ·
                          </span>
                          <span>#{idx + 1}</span>
                        </div>
                        <p
                          className={`line-clamp-2 text-xs leading-5 ${
                            empty
                              ? "italic text-[var(--muted-foreground)]/70"
                              : "text-[var(--foreground)]/85"
                          }`}
                        >
                          {empty ? t("(empty message)") : preview}
                        </p>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          <div>
            <div className="mb-2 flex items-center justify-between">
              <label className="block text-sm font-medium text-[var(--foreground)]">
                {t("Notebooks")}
              </label>
              {selectedIds.length > 0 && (
                <span className="text-xs text-[var(--muted-foreground)]">
                  {selectedIds.length} {t("selected")}
                </span>
              )}
            </div>
            <div className="max-h-64 space-y-2 overflow-y-auto rounded-xl border border-[var(--border)] bg-[var(--card)] p-2">
              {isLoadingNotebooks ? (
                <div className="flex items-center justify-center px-3 py-8">
                  <Loader2 className="h-4 w-4 animate-spin text-[var(--muted-foreground)]" />
                </div>
              ) : notebooks.length === 0 ? (
                <div className="flex flex-col items-center gap-2 px-3 py-6 text-center text-sm text-[var(--muted-foreground)]">
                  <NotebookPen className="h-5 w-5 text-[var(--muted-foreground)]/60" />
                  <span>{t("No notebooks found.")}</span>
                  <span className="text-[11px] text-[var(--muted-foreground)]/80">
                    {t("Create one from the Knowledge → Notebooks page.")}
                  </span>
                </div>
              ) : (
                notebooks.map((notebook) => {
                  const selected = selectedIds.includes(notebook.id);
                  return (
                    <button
                      key={notebook.id}
                      onClick={() => toggleNotebook(notebook.id)}
                      className={`flex w-full items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition ${
                        selected
                          ? "border-[var(--primary)]/40 bg-[var(--primary)]/8"
                          : "border-transparent hover:border-[var(--border)] hover:bg-[var(--muted)]/40"
                      }`}
                    >
                      <div
                        className="mt-1 h-3 w-3 shrink-0 rounded-full"
                        style={{
                          backgroundColor: notebook.color || "var(--primary)",
                        }}
                      />
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center justify-between gap-2">
                          <div className="text-sm font-medium text-[var(--foreground)]">
                            {notebook.name}
                          </div>
                          <span
                            className={`flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-md border transition-colors ${
                              selected
                                ? "border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-foreground)]"
                                : "border-[var(--border)] text-transparent"
                            }`}
                            style={{ width: 18, height: 18 }}
                          >
                            <Check className="h-3 w-3" />
                          </span>
                        </div>
                        {notebook.description && (
                          <p className="mt-1 line-clamp-2 text-xs text-[var(--muted-foreground)]">
                            {notebook.description}
                          </p>
                        )}
                        <div className="mt-1 text-[11px] text-[var(--muted-foreground)]/85">
                          {notebook.record_count ?? 0} {t("records")}
                        </div>
                      </div>
                    </button>
                  );
                })
              )}
            </div>
          </div>

          <div>
            <div className="mb-2 text-sm font-medium text-[var(--foreground)]">
              {t("Summary preview")}
            </div>
            <div className="min-h-24 rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 text-sm leading-6 text-[var(--foreground)]/85">
              {summaryPreview || (
                <span className="text-[var(--muted-foreground)]">
                  {t("The generated summary will appear here during saving.")}
                </span>
              )}
            </div>
          </div>

          {error && (
            <div className="rounded-xl border border-[var(--destructive)]/30 bg-[var(--destructive)]/8 px-4 py-3 text-sm text-[var(--destructive)]">
              {error}
            </div>
          )}
        </div>

        <div className="flex items-center justify-end gap-2 border-t border-[var(--border)] bg-[var(--card)] px-5 py-4">
          <button
            onClick={onClose}
            className="rounded-xl px-4 py-2 text-sm text-[var(--muted-foreground)] transition-colors hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
          >
            {t("Cancel")}
          </button>
          <button
            onClick={handleSave}
            disabled={!canSave || isLoading}
            className="btn-primary inline-flex items-center gap-2 rounded-xl bg-[var(--primary)] px-4 py-2 text-sm font-medium text-[var(--primary-foreground)] transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
            {t("Save")}
          </button>
        </div>
      </div>
    </PickerShell>
  );
}