Terminal

"use client";

import * as React from "react";
import { motion } from "motion/react";
import { Check, Copy, RotateCcw } from "lucide-react";
import { cn } from "@/lib/utils";

export type TerminalLine =
  | { type: "command"; text: string }
  | { type: "output"; text: string; tone?: "default" | "success" | "error" | "muted" }
  | { type: "progress"; text: string; ms?: number };

export interface TerminalProps {
  lines: TerminalLine[];
  title?: string;
  /** Type commands and reveal output over time. */
  animate?: boolean;
  /** ms per character when typing commands. */
  typingSpeed?: number;
  className?: string;
}

const tones = { default: "text-foreground/90", success: "text-emerald-500", error: "text-destructive", muted: "text-muted-foreground" };

/** A terminal window that can type its commands and stream output. */
export function Terminal({ lines, title = "zsh", animate = true, typingSpeed = 28, className }: TerminalProps) {
  const [shown, setShown] = React.useState(animate ? 0 : lines.length);
  const [typed, setTyped] = React.useState(0);
  const [run, setRun] = React.useState(0);
  const [copied, setCopied] = React.useState(false);
  const current = lines[shown];

  React.useEffect(() => {
    if (!animate || shown >= lines.length) return;
    if (current.type === "command" && typed < current.text.length) {
      const t = setTimeout(() => setTyped((n) => n + 1), typingSpeed);
      return () => clearTimeout(t);
    }
    const delay = current.type === "command" ? 300 : current.type === "progress" ? current.ms ?? 700 : 120;
    const t = setTimeout(() => {
      setShown((n) => n + 1);
      setTyped(0);
    }, delay);
    return () => clearTimeout(t);
  }, [animate, shown, typed, current, lines.length, typingSpeed, run]);

  const commands = lines.filter((l) => l.type === "command").map((l) => l.text).join("\n");

  return (
    <div className={cn("overflow-hidden rounded-lg border border-border bg-[#0b0b0c] font-mono text-[12.5px] text-neutral-100 shadow-elev-2", className)} data-theme="dark">
      <div className="flex items-center gap-3 border-b border-white/10 px-3.5 py-2">
        <span className="flex gap-1.5" aria-hidden>
          <span className="size-2.5 rounded-full bg-[#ff5f57]" />
          <span className="size-2.5 rounded-full bg-[#febc2e]" />
          <span className="size-2.5 rounded-full bg-[#28c840]" />
        </span>
        <span className="flex-1 text-center text-[11px] text-neutral-400">{title}</span>
        {animate && (
          <button type="button" aria-label="Replay" onClick={() => { setShown(0); setTyped(0); setRun((r) => r + 1); }} className="grid size-6 place-items-center rounded text-neutral-400 hover:bg-white/10 hover:text-white"><RotateCcw className="size-3" /></button>
        )}
        <button type="button" aria-label="Copy commands" onClick={async () => { await navigator.clipboard.writeText(commands); setCopied(true); setTimeout(() => setCopied(false), 1200); }} className="grid size-6 place-items-center rounded text-neutral-400 hover:bg-white/10 hover:text-white">
          {copied ? <Check className="size-3" /> : <Copy className="size-3" />}
        </button>
      </div>
      <div className="min-h-32 space-y-1 p-4" role="log" aria-live="polite">
        {lines.slice(0, shown + 1).map((l, i) => {
          const partial = i === shown && animate;
          if (i === shown && !animate) return null;
          if (l.type === "command")
            return (
              <div key={i} className="flex gap-2">
                <span className="text-[#c6f432]">❯</span>
                <span>{partial ? l.text.slice(0, typed) : l.text}{partial && <span className="ml-px inline-block h-3.5 w-1.5 translate-y-0.5 animate-pulse bg-neutral-300" />}</span>
              </div>
            );
          if (partial) return l.type === "progress" ? <motion.div key={i} className="text-neutral-400" animate={{ opacity: [0.4, 1, 0.4] }} transition={{ repeat: Infinity, duration: 1 }}>⠋ {l.text}</motion.div> : null;
          return l.type === "progress" ? (
            <div key={i} className="text-emerald-500">✓ <span className="text-neutral-300">{l.text}</span></div>
          ) : (
            <motion.div key={i} initial={{ opacity: 0 }} animate={{ opacity: 1 }} className={cn("whitespace-pre-wrap", tones[l.tone ?? "default"])}>{l.text}</motion.div>
          );
        })}
      </div>
    </div>
  );
}