<script lang="ts">
  import { getLang, setLang, LANGS, type Lang, tStore } from '$lib/i18n.js';
  import { projectList, selectedProject } from '$lib/stores/project.js';

  interface Props {
    currentLabel: string;
  }

  let { currentLabel }: Props = $props();

  const GITHUB_URL = 'https://github.com/epicsagas/epic-harness';

  const SEL = [
    'background:var(--bg)',
    'border:1px solid var(--border)',
    'border-radius:var(--radius-sm)',
    'color:var(--fg)',
    'font-size:12px',
    'font-family:var(--font-mono)',
    'padding:4px 8px',
    'outline:none',
    'cursor:pointer',
  ].join(';');
</script>

<div class="topbar">
  <div class="topbar-left">
    <div class="breadcrumb">
      epic-harness <span>/</span> <span>{currentLabel}</span>
    </div>
  </div>
  <div class="topbar-right" style="display:flex;align-items:center;gap:8px;">

    <!-- Project selector -->
    <select
      value={$selectedProject}
      onchange={(e) => $selectedProject = (e.target as HTMLSelectElement).value}
      style="{SEL};max-width:160px;"
      title={$tStore('selectProject')}
      aria-label={$tStore('selectProject')}
    >
      <option value="__all__">{$tStore('allProjects')}</option>
      {#each $projectList as slug}
        <option value={slug}>{slug}</option>
      {/each}
    </select>

    <!-- Language selector -->
    <select
      value={getLang()}
      onchange={(e) => setLang((e.target as HTMLSelectElement).value as Lang)}
      style={SEL}
      title="Language"
    >
      {#each LANGS as l}
        <option value={l.code}>{l.flag} {l.label}</option>
      {/each}
    </select>

    <!-- GitHub Star -->
    <a
      href={GITHUB_URL}
      target="_blank"
      rel="noopener noreferrer"
      title="Star on GitHub"
      style="display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface,#161b22);color:var(--fg);font-size:12px;text-decoration:none;font-family:var(--font-mono);transition:border-color .15s;"
      onmouseenter={(e) => (e.currentTarget as HTMLElement).style.borderColor = 'var(--accent)'}
      onmouseleave={(e) => (e.currentTarget as HTMLElement).style.borderColor = 'var(--border)'}
    >
      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
          0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13
          -.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66
          .07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15
          -.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27
          .68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12
          .51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48
          0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
      </svg>
      Star
    </a>
  </div>
</div>
