import { useState } from "react";
import { ChevronDown, ChevronUp, X } from "lucide-react";
import { useSessionStore } from "../store/sessionStore";
import { Button } from "../components/ui/button";

const TAIL_LINES = 5;

/** Left drawer showing "what's happening": the tail of the model's streamed output.
 *  Collapsed it shows the last few lines (refreshing as the stream grows); the expand
 *  toggle reveals the full stream. Opened on demand from the rotating activity icon. */
export function ModelActivityPanel({ onClose }: { onClose: () => void }) {
  const transcript = useSessionStore((s) => s.transcript);
  const [expanded, setExpanded] = useState(false);

  const lines = transcript
    .map((e) => e.text)
    .join("\n")
    .split("\n")
    .map((l) => l.trimEnd())
    .filter((l) => l.trim() !== "");
  const shown = expanded ? lines : lines.slice(-TAIL_LINES);
  const canExpand = lines.length > TAIL_LINES;

  return (
    <aside className="flex w-[380px] shrink-0 flex-col border-r border-border bg-sidebar">
      <div className="flex items-center justify-between border-b border-border/70 px-4 py-3">
        <h2 className="font-heading text-sm font-semibold text-foreground">Model activity</h2>
        <div className="flex items-center gap-1">
          {canExpand && (
            <Button
              size="icon-sm"
              variant="ghost"
              aria-label={expanded ? "Show less" : "Show more"}
              aria-expanded={expanded}
              onClick={() => setExpanded((v) => !v)}
            >
              {expanded ? <ChevronUp className="size-4" /> : <ChevronDown className="size-4" />}
            </Button>
          )}
          <Button size="icon-sm" variant="ghost" aria-label="Close model activity" onClick={onClose}>
            <X className="size-4" />
          </Button>
        </div>
      </div>
      <div className="flex-1 overflow-y-auto px-4 py-4">
        {shown.length === 0 ? (
          <p className="text-sm text-muted-foreground">No activity yet.</p>
        ) : (
          <div className="flex flex-col gap-1 font-mono text-xs leading-relaxed text-foreground/90">
            {shown.map((l, i) => (
              <p key={i} className="whitespace-pre-wrap break-words">{l}</p>
            ))}
          </div>
        )}
      </div>
    </aside>
  );
}