<script lang="ts">
  import type { ChatMessage } from './types';
  import { agentColor, formatTime } from './utils';
  import ToolCard from './ToolCard.svelte';
  import { Message, MessageContent } from './components/ai-elements/message/index.js';
  import { Response } from './components/ai-elements/response/index.js';
  import {
    Reasoning,
    ReasoningTrigger,
    ReasoningContent,
  } from './components/ai-elements/reasoning/index.js';
  import TriangleAlert from '@lucide/svelte/icons/triangle-alert';

  let { message }: { message: ChatMessage } = $props();

  const isUser = $derived(message.from === 'user');
  const color = $derived(agentColor(message.from));
  const isTool = $derived(!!message.toolName);
  const role = $derived<'user' | 'assistant'>(isUser ? 'user' : 'assistant');

  const ERROR_HINTS: Record<string, string> = {
    credits_exhausted: 'Add credits to your API provider account to continue.',
    auth_error: 'Check that your API key is valid.',
    rate_limited: 'This is usually temporary — try sending your message again.',
    provider_error: 'This is usually temporary — try sending your message again.',
    timeout: 'This is usually temporary — try sending your message again.',
    no_output: 'The model returned an empty response. Try sending your message again.',
    context_corrupt: 'Some tool results were lost from the conversation history. Starting a new conversation should fix this.',
  };

  const errorHint = $derived(message.errorCode ? ERROR_HINTS[message.errorCode] : undefined);
</script>

{#if isTool}
  <ToolCard {message} />
{:else if message.isError}
  <Message from="assistant">
    <MessageContent variant="contained">
      <div class="rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2">
        <div class="flex items-start gap-2">
          <TriangleAlert class="mt-0.5 size-4 shrink-0 text-destructive" />
          <div class="min-w-0">
            <p class="text-sm text-destructive font-medium">{message.text}</p>
            {#if errorHint}
              <p class="text-xs text-muted-foreground mt-1">{errorHint}</p>
            {/if}
          </div>
        </div>
      </div>
      {#if message.timestamp}
        <div class="text-xs text-muted-foreground mt-1">
          {formatTime(message.timestamp)}
        </div>
      {/if}
    </MessageContent>
  </Message>
{:else}
  <Message from={role}>
    <MessageContent variant="contained">
      <div class="text-xs font-semibold mb-1">
        {#if message.routedTo}
          {@const targetColor = agentColor(message.routedTo)}
          <span style="color: {color}">{message.from}</span>
          <span class="text-muted-foreground font-normal mx-1">&rarr;</span>
          <span style="color: {targetColor}">{message.routedTo}</span>
        {:else}
          <span style="color: {color}">{isUser ? 'You' : message.from}</span>
        {/if}
      </div>

      {#if message.thinking}
        <Reasoning defaultOpen={false}>
          <ReasoningTrigger />
          <ReasoningContent>
            <div class="whitespace-pre-wrap">{message.thinking}</div>
          </ReasoningContent>
        </Reasoning>
      {/if}

      {#if isUser}
        <div class="whitespace-pre-wrap">{message.text}</div>
      {:else}
        <Response content={message.text} />
      {/if}

      {#if message.timestamp}
        <div class="text-xs text-muted-foreground mt-1">
          {formatTime(message.timestamp)}
        </div>
      {/if}
    </MessageContent>
  </Message>
{/if}
