import { useMemo, useState, useEffect, useRef, type OctaneNode } from "octane";
import { Lexer, type Token, type Tokens } from "marked";
import { decodeHTML } from "entities";
import { CodeHighlighted } from "octane-kumo/code";
import { Button } from "octane-kumo/components/button";
import type { UIMessage } from "ai";
import type { ToolActivity } from "../../shared/tool-activity";

/** Application links have a deliberately smaller surface than external links. */
export function safeChatUrl(
  value: string,
  application = true,
): string | undefined {
  const url = decodeHTML(value);
  if (/[\u0000-\u0020\\]/.test(url)) return;
  if (
    application &&
    /^\/(tasks|conversations)\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(
      url,
    )
  )
    return url;
  try {
    const parsed = new URL(url);
    if (
      !["http:", "https:"].includes(parsed.protocol) ||
      parsed.username ||
      parsed.password
    )
      return;
    return parsed.href;
  } catch {
    return;
  }
}
function SafeLink({ href, children }: { href: string; children: OctaneNode }) {
  const safe = safeChatUrl(href);
  return safe ? (
    <a
      href={safe}
      {...(safe.startsWith("/")
        ? {}
        : { target: "_blank", rel: "noopener noreferrer" })}
    >
      {children}
    </a>
  ) : (
    <span>{children}</span>
  );
}
function Code({
  code,
  language,
  streaming,
}: {
  code: string;
  language: string;
  streaming: boolean;
}) {
  const [notice, setNotice] = useState("");
  const mounted = useRef(false);
  useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
    };
  }, []);
  return (
    <div className="chat-code">
      <div className="chat-code-toolbar">
        <span>{language || "Plain text"}</span>
        <Button
          size="sm"
          variant="secondary"
          aria-label="Copy code"
          onClick={async () => {
            try {
              if (!navigator.clipboard)
                throw new Error("Clipboard unavailable");
              await navigator.clipboard.writeText(code);
              if (mounted.current) setNotice("Copied");
            } catch {
              if (mounted.current)
                setNotice("Could not copy. Select the code to copy it.");
            }
          }}
        >
          Copy
        </Button>
        <span role="status">{notice}</span>
      </div>
      {streaming || code.length > 40_000 ? (
        <pre>
          <code>{code}</code>
        </pre>
      ) : (
        <CodeHighlighted code={code} lang={language} />
      )}
    </div>
  );
}
function renderTokens(
  tokens: Token[],
  streaming: boolean,
  depth = 0,
): OctaneNode {
  if (depth > 32) return tokens.map((token) => token.raw).join("");
  return tokens.map((token, index) => {
    const child = (children: Token[]) =>
      renderTokens(children, streaming, depth + 1);
    switch (token.type) {
      case "space":
      case "def":
        return null;
      case "heading":
        return <h3 key={index}>{child((token as Tokens.Heading).tokens)}</h3>;
      case "paragraph":
        return <p key={index}>{child((token as Tokens.Paragraph).tokens)}</p>;
      case "text": {
        const text = token as Tokens.Text;
        return text.tokens ? child(text.tokens) : decodeHTML(text.text);
      }
      case "escape":
        return decodeHTML((token as Tokens.Escape).text);
      case "html":
        return <span key={index}>{token.raw}</span>;
      case "strong":
        return (
          <strong key={index}>{child((token as Tokens.Strong).tokens)}</strong>
        );
      case "em":
        return <em key={index}>{child((token as Tokens.Em).tokens)}</em>;
      case "del":
        return <del key={index}>{child((token as Tokens.Del).tokens)}</del>;
      case "codespan":
        return (
          <code key={index}>{decodeHTML((token as Tokens.Codespan).text)}</code>
        );
      case "code": {
        const code = token as Tokens.Code;
        return (
          <Code
            key={index}
            code={code.text}
            language={code.lang?.split(/\s/)[0] ?? ""}
            streaming={streaming}
          />
        );
      }
      case "link": {
        const link = token as Tokens.Link;
        return (
          <SafeLink key={index} href={link.href}>
            {child(link.tokens)}
          </SafeLink>
        );
      }
      case "image":
        return (
          <span key={index}>
            [Image: {decodeHTML((token as Tokens.Image).text)}]
          </span>
        );
      case "br":
        return <br key={index} />;
      case "hr":
        return <hr key={index} />;
      case "blockquote":
        return (
          <blockquote key={index}>
            {child((token as Tokens.Blockquote).tokens)}
          </blockquote>
        );
      case "list": {
        const list = token as Tokens.List;
        const items = list.items.map((item, i) => (
          <li key={i}>
            {item.task ? (
              <span aria-label={item.checked ? "Completed" : "Not completed"}>
                {item.checked ? "☑ " : "☐ "}
              </span>
            ) : null}
            {child(item.tokens)}
          </li>
        ));
        return list.ordered ? (
          <ol key={index} start={list.start || 1}>
            {items}
          </ol>
        ) : (
          <ul key={index}>{items}</ul>
        );
      }
      case "table": {
        const table = token as Tokens.Table;
        return (
          <div className="chat-table" key={index}>
            <table>
              <thead>
                <tr>
                  {table.header.map((cell, i) => (
                    <th key={i}>{child(cell.tokens)}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {table.rows.map((row, i) => (
                  <tr key={i}>
                    {row.map((cell, j) => (
                      <td key={j}>{child(cell.tokens)}</td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        );
      }
      default:
        return <span key={index}>{token.raw}</span>;
    }
  });
}
function Markdown({ text, streaming }: { text: string; streaming: boolean }) {
  const tokens = useMemo(() => Lexer.lex(text, { gfm: true }), [text]);
  return <div className="chat-markdown">{renderTokens(tokens, streaming)}</div>;
}
type ToolPart = UIMessage["parts"][number] & {
  toolCallId: string;
  state: string;
  toolName?: string;
  input?: unknown;
  output?: unknown;
  errorText?: string;
};
function detail(value: unknown): string {
  if (value === undefined) return "Not available yet.";
  try {
    const text = JSON.stringify(value, null, 2);
    return text.length > 20_000
      ? `${text.slice(0, 20_000)}\n… Detail truncated.`
      : text;
  } catch {
    return "Detail unavailable.";
  }
}
function ToolRow({
  part,
  activity,
}: {
  part: ToolPart;
  activity?: ToolActivity;
}) {
  const [open, setOpen] = useState(false);
  const fallback =
    part.state === "output-error" || part.state === "output-denied"
      ? "failed"
      : part.state === "output-available"
        ? "result available"
        : "running";
  const status = activity?.status ?? fallback;
  const result =
    part.output && typeof part.output === "object"
      ? (part.output as { url?: unknown; status?: unknown })
      : undefined;
  const taskUrl =
    typeof result?.url === "string" && result.url.startsWith("/tasks/")
      ? safeChatUrl(result.url)
      : undefined;
  return (
    <details
      className="chat-tool"
      onToggle={(event) => setOpen(event.currentTarget.open)}
    >
      <summary>
        <span className="chat-tool-name">
          {activity?.inputSummary ||
            part.toolName ||
            part.type.replace(/^tool-/, "")}
        </span>
        <span className="chat-tool-status" data-status={status}>
          {status}
        </span>
        {activity?.progress && status === "running" ? (
          <span>{activity.progress.text}</span>
        ) : null}
      </summary>
      {activity?.outputSummary ? <p>{activity.outputSummary}</p> : null}
      {taskUrl ? (
        <p>
          <a href={taskUrl}>View scheduled task</a>
          {result?.status === "unavailable"
            ? " — schedule unavailable"
            : result?.status === "inactive"
              ? " — inactive"
              : ""}
        </p>
      ) : null}
      {open ? (
        <div className="chat-tool-detail">
          {activity && activity.attempts > 1 ? (
            <p>
              Attempt {activity.attempts}
              {activity.interruptedAt ? " · resumed after interruption" : ""}
            </p>
          ) : null}
          <h4>Input</h4>
          <pre>{detail(part.input)}</pre>
          <h4>Result</h4>
          <pre>{part.errorText ?? detail(part.output)}</pre>
        </div>
      ) : null}
    </details>
  );
}
function sources(message: UIMessage) {
  const result = new Map<
    string,
    { url: string; title: string; kind: string }
  >();
  const add = (url: unknown, title: unknown, kind: string) => {
    if (typeof url !== "string") return;
    const safe = safeChatUrl(url, false);
    if (safe && !result.has(safe))
      result.set(safe, {
        url: safe,
        title:
          typeof title === "string" && title ? title : new URL(safe).hostname,
        kind,
      });
  };
  for (const part of message.parts) {
    if (part.type === "source-url") add(part.url, part.title, "Source");
    if (
      "output" in part &&
      part.output &&
      typeof part.output === "object" &&
      "sources" in part.output &&
      Array.isArray(part.output.sources)
    ) {
      for (const source of part.output.sources)
        if (source && typeof source === "object")
          add(
            source.finalUrl,
            source.title,
            source.sourceKind === "search"
              ? "Search result"
              : source.sourceKind === "browser"
                ? "Browser page"
                : "Read page",
          );
    }
  }
  return [...result.values()];
}
export function ChatMessage({
  message,
  activities,
  streaming,
}: {
  message: UIMessage;
  activities: ReadonlyMap<string, ToolActivity>;
  streaming: boolean;
}) {
  const citations = useMemo(() => sources(message), [message]);
  return (
    <article
      className="chat-message"
      data-message-id={message.id}
      data-role={message.role}
    >
      <h2>{message.role === "user" ? "You" : "Flarebot"}</h2>
      <div className="chat-message-body">
        {message.parts.map((part, index) =>
          part.type === "text" ? (
            message.role === "user" ? (
              <p key={index} className="chat-user-text">
                {part.text}
              </p>
            ) : (
              <Markdown key={index} text={part.text} streaming={streaming} />
            )
          ) : "toolCallId" in part ? (
            <ToolRow
              key={part.toolCallId}
              part={part as ToolPart}
              activity={activities.get(part.toolCallId)}
            />
          ) : null,
        )}
        {citations.length ? (
          <details className="chat-source-disclosure">
            <summary>Sources ({citations.length})</summary>
            <nav className="chat-sources" aria-label="Sources">
              {citations.map((source) => (
                <a
                  key={source.url}
                  href={source.url}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span>{source.title}</span>
                  <small>{source.kind}</small>
                </a>
              ))}
            </nav>
          </details>
        ) : null}
      </div>
    </article>
  );
}