"use client";

import { Bot, Terminal, UserRound } from "lucide-react";

import { type SessionMessage } from "@/lib/api/claude-code";
import { formatTimestamp, truncateText } from "@/lib/formatters";
import { cn } from "@/lib/utils";

type SessionTimelineNavProps = {
  messages: SessionMessage[];
};

export function SessionTimelineNav({ messages }: SessionTimelineNavProps) {
  const visibleMessages = messages.slice(0, 80);

  if (messages.length === 0) return null;

  return (
    <aside className="sticky top-6 hidden max-h-[calc(100vh-3rem)] w-72 shrink-0 overflow-hidden rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-sm xl:block">
      <div className="border-b border-[color:var(--border)] px-4 py-3">
        <h2 className="text-sm font-semibold text-[color:var(--text)]">
          Session map
        </h2>
        <p className="mt-0.5 text-xs text-[color:var(--text-muted)]">
          Jump through turns and tool-heavy moments.
        </p>
      </div>
      <nav className="max-h-[calc(100vh-9rem)] overflow-y-auto p-2">
        {visibleMessages.map((message, index) => {
          const isAssistant = message.role === "assistant";
          const toolCount = message.tool_uses.length;
          const title =
            message.text_blocks[0]?.text ??
            (toolCount > 0 ? `${toolCount} tool calls` : message.role);

          return (
            <a
              key={message.uuid}
              href={`#message-${message.uuid}`}
              className="group flex items-start gap-3 rounded-xl px-3 py-2.5 transition hover:bg-[color:var(--surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]"
            >
              <span
                className={cn(
                  "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ring-1",
                  isAssistant
                    ? "bg-cyan-500/15 text-cyan-300 ring-cyan-400/20"
                    : "bg-violet-500/15 text-violet-300 ring-violet-400/20",
                )}
              >
                {toolCount > 0 ? (
                  <Terminal className="h-3.5 w-3.5" />
                ) : isAssistant ? (
                  <Bot className="h-3.5 w-3.5" />
                ) : (
                  <UserRound className="h-3.5 w-3.5" />
                )}
              </span>
              <span className="min-w-0 flex-1">
                <span className="block truncate text-xs font-semibold text-[color:var(--text)]">
                  #{index + 1} {isAssistant ? "Assistant" : "User"}
                  {toolCount > 0 ? ` · ${toolCount} tools` : ""}
                </span>
                <span className="mt-0.5 block break-words text-xs leading-5 text-[color:var(--text-muted)]">
                  {truncateText(title, 72)}
                </span>
                <span className="mt-1 block text-[11px] text-[color:var(--text-quiet)]">
                  {formatTimestamp(message.timestamp)}
                </span>
              </span>
            </a>
          );
        })}
        {messages.length > visibleMessages.length ? (
          <p className="px-3 py-3 text-xs text-[color:var(--text-muted)]">
            Showing first {visibleMessages.length.toLocaleString()} timeline items.
          </p>
        ) : null}
      </nav>
    </aside>
  );
}
