<script lang="ts">
  interface Props {
    toolName: string | null;
    content: string;
    timestamp: Date;
  }

  let { toolName, content, timestamp }: Props = $props();
  let isExpanded = $state(false);

  function toggleExpanded() {
    isExpanded = !isExpanded;
  }

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

<div class="tool-block">
  <button class="tool-header" onclick={toggleExpanded} type="button">
    <span class="tool-timestamp">{formatTime(timestamp)}</span>
    <svg
      class="tool-icon"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      width="16"
      height="16"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
      />
    </svg>
    {#if toolName}
      <span class="tool-name">[{toolName}]</span>
    {/if}
    <span class="tool-label">{content}</span>
    <svg
      class="chevron"
      class:expanded={isExpanded}
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      width="14"
      height="14"
    >
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
    </svg>
  </button>

  {#if isExpanded}
    <div class="tool-content">
      {content}
    </div>
  {/if}
</div>

<style>
  .tool-block {
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    opacity: 0.85;
  }

  .tool-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--terminal-tool, #c084fc);
    font-size: 0.875rem;
    transition: all 0.2s;
  }

  .tool-header:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  .tool-timestamp {
    font-family: monospace;
    font-size: 0.75rem;
    opacity: 0.7;
    color: var(--text-secondary);
    flex-shrink: 0;
  }

  .tool-icon {
    flex-shrink: 0;
  }

  .tool-name {
    font-family: monospace;
    font-weight: 600;
    flex-shrink: 0;
    color: var(--terminal-tool-name, #ddd6fe);
  }

  .tool-label {
    flex: 1;
    text-align: left;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .chevron.expanded {
    transform: rotate(180deg);
  }

  .tool-content {
    padding: 0.75rem;
    border-top: 1px solid var(--border-color);
    color: var(--terminal-tool, #c084fc);
    font-family: monospace;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
  }
</style>
