<script lang="ts">
  import { Brain, ChevronRight } from '@lucide/svelte'
  let { thinking }: { thinking: string } = $props()
  let expanded = $state(false)
</script>

<div class="thinking-block">
  <button
    class="row"
    onclick={() => (expanded = !expanded)}
    aria-expanded={expanded}
  >
    <Brain class="icon size-3" />
    <span class="text min-w-0 flex-1">
      <span class="label">Thought{thinking.includes('\n') ? 's' : ''}</span>
    </span>
    <span class="summary">{thinking.slice(0, 60).replace(/\n/g, ' ')}{thinking.length > 60 ? '…' : ''}</span>
    <ChevronRight class="chev size-3 {expanded ? 'open' : ''}" />
  </button>

  {#if expanded}
    <div class="detail"><pre>{thinking}</pre></div>
  {/if}
</div>

<style>
  .thinking-block {
    border-left: 1px solid var(--border);
    padding-left: 0.5rem;
    animation: thinking-in 0.15s ease-out;
  }
  @keyframes thinking-in {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .thinking-block { animation: none; }
  }
  .row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.2rem 0;
    text-align: left;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  .row:hover .label {
    color: var(--foreground);
  }
  .icon {
    flex-shrink: 0;
    color: var(--muted-foreground);
  }
  .label {
    font-size: 12px;
    color: var(--muted-foreground);
  }
  .text {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
  }
  .summary {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 45%;
    opacity: 0.6;
  }
  .chev {
    flex-shrink: 0;
    color: var(--muted-foreground);
    opacity: 0.6;
    transition: transform 0.12s;
  }
  .chev.open {
    transform: rotate(90deg);
  }
  .detail {
    padding: 0.25rem 0 0.4rem 1.25rem;
  }
  .thinking-block :global(pre) {
    margin: 0;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--muted);
    border: 1px solid var(--border);
    padding: 0.4rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    color: var(--foreground);
  }
  @media (prefers-reduced-motion: reduce) {
    .chev { transition: none; }
  }
</style>