<script lang="ts">
  import { claudeStore, type TerminalLine } from "$lib/stores/claude";
  import { afterUpdate } from "svelte";

  let terminalElement: HTMLDivElement;
  let shouldAutoScroll = true;
  let lines: TerminalLine[] = [];

  claudeStore.terminalLines.subscribe((value) => {
    lines = value;
  });

  function handleScroll() {
    if (!terminalElement) return;
    const { scrollTop, scrollHeight, clientHeight } = terminalElement;
    shouldAutoScroll = scrollHeight - scrollTop - clientHeight < 100;
  }

  afterUpdate(() => {
    if (shouldAutoScroll && terminalElement) {
      terminalElement.scrollTop = terminalElement.scrollHeight;
    }
  });

  function getLineClass(type: string): string {
    switch (type) {
      case "user":
        return "text-cyan-400";
      case "assistant":
        return "text-gray-100";
      case "system":
        return "text-gray-500 italic";
      case "tool":
        return "text-purple-400";
      case "error":
        return "text-red-400";
      default:
        return "text-gray-300";
    }
  }

  function getLinePrefix(type: string): string {
    switch (type) {
      case "user":
        return ">";
      case "assistant":
        return "";
      case "system":
        return "[system]";
      case "tool":
        return "[tool]";
      case "error":
        return "[error]";
      default:
        return "";
    }
  }

  function formatTime(date: Date): string {
    return date.toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
    });
  }
</script>

<div
  class="terminal-container flex-1 overflow-hidden rounded-lg bg-[var(--bg-terminal)] border border-[var(--border-color)]"
>
  <div
    class="terminal-header flex items-center gap-2 px-4 py-2 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]"
  >
    <div class="flex gap-1.5">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <span class="text-sm text-gray-400 ml-2">Terminal</span>
  </div>

  <div
    bind:this={terminalElement}
    onscroll={handleScroll}
    class="terminal-content h-[calc(100%-40px)] overflow-y-auto p-4 font-mono text-sm"
  >
    {#if lines.length === 0}
      <div class="text-gray-500 italic">Waiting for Claude... Type a message below to start!</div>
    {:else}
      {#each lines as line (line.id)}
        <div class="terminal-line mb-2 {getLineClass(line.type)}">
          <span class="text-gray-600 text-xs mr-2">{formatTime(line.timestamp)}</span>
          {#if getLinePrefix(line.type)}
            <span class="text-gray-500 mr-2">{getLinePrefix(line.type)}</span>
          {/if}
          {#if line.toolName}
            <span class="text-purple-300 mr-2">[{line.toolName}]</span>
          {/if}
          <span class="whitespace-pre-wrap">{line.content}</span>
        </div>
      {/each}
    {/if}
  </div>
</div>

<style>
  .terminal-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-terminal);
  }
</style>
