<script lang="ts">
  // @ts-nocheck
  import { Sparkles, AlertTriangle } from "lucide-svelte";
  import { llmStatus } from "$lib/stores/llmStatus.svelte.js";

  let { compact = false } = $props<{ compact?: boolean }>();

  let label = $derived.by(() => {
    switch (llmStatus.kind) {
      case "warming":
        return llmStatus.detail ?? "AI warming";
      case "ready":
        return "AI ready";
      case "generating":
        return llmStatus.detail ?? "Cleaning…";
      case "error":
        return "AI error";
      default:
        return "";
    }
  });

  let dotClass = $derived.by(() => {
    switch (llmStatus.kind) {
      case "warming":
        return "bg-warning animate-pulse";
      case "ready":
        return "bg-success";
      case "generating":
        return "bg-accent animate-pulse";
      case "error":
        return "bg-danger";
      default:
        return "bg-text-tertiary";
    }
  });
</script>

{#if llmStatus.kind !== "off"}
  {#if compact}
    <span
      class="inline-flex items-center justify-center w-[10px] h-[10px] rounded-full {dotClass}"
      title={label}
      aria-label={label}
    ></span>
  {:else}
    <span
      class="inline-flex items-center gap-1.5 px-2 py-[3px] rounded-full bg-bg-elevated border border-border-subtle text-[10px] text-text-secondary whitespace-nowrap"
      title={llmStatus.detail ?? label}
    >
      <span class="inline-block w-[6px] h-[6px] rounded-full {dotClass}"></span>
      {#if llmStatus.kind === "error"}
        <AlertTriangle size={10} class="text-danger" />
      {:else if llmStatus.kind === "generating"}
        <Sparkles size={10} class="text-accent" />
      {/if}
      <span>{label}</span>
    </span>
  {/if}
{/if}
