<!-- #region DashboardRow [C:3] [TYPE Component] [SEMANTICS dashboard, row, grid, git, validation] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Single row in the DashboardHub grid — checkbox, title, git status, validation indicator, actions, changed date, owners. -->
<!-- @LAYER UI -->
<script lang="ts">
  import { ROUTES } from "$lib/routes.js";
  import { t } from "$lib/i18n/index.svelte.js";
  import DashboardMaintenanceBadge from "$lib/components/DashboardMaintenanceBadge.svelte";
  import { formatDate } from "./dashboard-helpers.js";

  let {
    dashboard,
    isSelected,
    validationStatus,
    validationStatusLoading,
    isValidationPopoverOpen,
    validationPopoverPosition,
    onCheckboxChange,
    onNavigate,
    onToggleValidationPopover,
    onAction,
  } = $props<{
    dashboard: any;
    isSelected: boolean;
    validationStatus: any;
    validationStatusLoading: boolean;
    isValidationPopoverOpen: boolean;
    validationPopoverPosition: { left: number; top: number };
    onCheckboxChange: (_e: Event) => void;
    onNavigate: () => void;
    onToggleValidationPopover: (_e: Event) => void;
    onAction: (_action: string) => void;
  }>();
</script>

<div
  class="grid items-center gap-4 px-6 py-3 border-b border-border last:border-b-0 hover:bg-surface-muted transition-colors text-[13px]"
  style="width: max(100%, 1460px); grid-template-columns: 40px minmax(250px,2.3fr) minmax(118px,0.9fr) minmax(70px,0.5fr) minmax(110px,0.7fr) minmax(280px,2fr) minmax(150px,1fr) 124px;"
>
  <!-- Checkbox -->
  <div>
    <input type="checkbox" checked={isSelected} onchange={onCheckboxChange} />
  </div>

  <!-- Title -->
  <div class="font-medium text-sm text-text">
    <button
      class="text-left text-primary hover:text-primary-hover hover:underline transition-colors"
      onclick={onNavigate}
      title={$t.dashboard?.open_overview}
    >
      {dashboard.title}
    </button>
  </div>

  <!-- Git Status -->
  <div>
    <div class="flex flex-col gap-1">
      <span class="inline-flex w-fit items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide {dashboard.git?.hasRepo === null ? 'bg-surface-muted text-text-muted' : dashboard.git?.hasRepo ? 'bg-primary-light text-primary' : 'bg-surface-muted text-text'}">
        {dashboard.git?.hasRepo === null ? $t.common?.loading || "Loading" : dashboard.git?.hasRepo ? $t.dashboard?.status_repo || "Repo" : $t.dashboard?.status_no_repo || "No Repo"}
      </span>
      {#if dashboard.git?.hasRepo}
        <span class="inline-flex w-fit items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide {dashboard.git?.hasChangesForCommit ? 'bg-warning-light text-warning' : 'bg-success-light text-success'}">
          {dashboard.git?.hasChangesForCommit ? $t.dashboard?.status_changes || "Diff" : $t.dashboard?.status_no_changes || "Synced"}
        </span>
      {/if}
    </div>
  </div>

  <!-- Validation Status Dot -->
  <div class="relative">
    {#if validationStatus}
      {@const vs = validationStatus}
      {@const dotClass = vs.status === "PASS" ? "bg-success" : vs.status === "WARN" ? "bg-warning" : vs.status === "FAIL" ? "bg-destructive-light" : "bg-border"}
      <button
        class="inline-flex h-5 w-5 items-center justify-center rounded-full border border-border-strong transition-colors hover:ring-2 hover:ring-border-strong"
        onclick={onToggleValidationPopover}
        title={vs.status || "UNKNOWN"}
        aria-label={$t.dashboard?.validation_status || "Validation status"}
      >
        <span class="block h-3 w-3 rounded-full {dotClass}"></span>
      </button>
    {:else if validationStatusLoading}
      <span class="inline-flex h-5 w-5 items-center justify-center">
        <span class="block h-3 w-3 animate-pulse rounded-full bg-surface-muted"></span>
      </span>
    {:else}
      <span class="text-text-subtle text-xs">-</span>
    {/if}

    <!-- Validation Popover -->
    {#if isValidationPopoverOpen}
      <div
        class="fixed z-50 w-80 rounded-lg border border-border bg-surface-card shadow-lg"
        style="left: {validationPopoverPosition.left}px; top: {validationPopoverPosition.top}px;"
        onclick={(e) => e.stopPropagation()}
      >
        <div class="border-b border-border px-3 py-2 text-xs font-semibold uppercase tracking-wide text-text-muted">
          {$t.dashboard?.validation_history || "Validation History"}
        </div>
        {#if validationStatus?.history?.length > 0}
          <div class="max-h-48 overflow-y-auto">
            {#each validationStatus.history.slice(0, 3) as run}
              <div class="flex items-center justify-between px-3 py-2 text-xs border-b border-border last:border-b-0">
                <div class="flex items-center gap-2">
                  <span class="block h-2.5 w-2.5 rounded-full {run.status === 'PASS' ? 'bg-success' : run.status === 'WARN' ? 'bg-warning' : run.status === 'FAIL' ? 'bg-destructive-light' : 'bg-border'}"></span>
                  <span class="text-text">{run.status || "UNKNOWN"}</span>
                </div>
                <div class="flex items-center gap-2">
                  <span class="text-text-subtle">{run.task_name || "-"}</span>
                  <span class="text-text-subtle">{formatDate(run.last_run_at)}</span>
                </div>
              </div>
            {/each}
          </div>
        {:else}
          <div class="px-3 py-3 text-xs text-text-subtle text-center">
            {$t.dashboard?.no_validation_runs || "No validation runs yet"}
          </div>
        {/if}
        <div class="border-t border-border px-3 py-2">
          <a href={ROUTES.validationTasks.list(String(dashboard.id))} class="text-xs text-primary hover:text-primary-hover hover:underline">
            {$t.dashboard?.view_all_runs || "View all runs →"}
          </a>
        </div>
      </div>
    {/if}
  </div>

  <!-- Maintenance Badge -->
  <div>
    <DashboardMaintenanceBadge dashboardId={dashboard.id} />
  </div>

  <!-- Actions -->
  <div class="flex items-center">
    <div class="flex items-center gap-1.5">
      <button
        class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-surface-card text-primary hover:bg-primary-light hover:border-primary-ring transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        onclick={() => onAction("migrate")}
        title={$t.dashboard?.action_migrate}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M5 12h14M12 5l7 7-7 7" />
        </svg>
      </button>
      <button
        class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-surface-card text-warning hover:bg-warning-light hover:border-warning transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        onclick={() => onAction("backup")}
        title={$t.dashboard?.action_backup}
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
          <polyline points="7,10 12,15 17,10" />
          <line x1="12" y1="15" x2="12" y2="3" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Changed On -->
  <div class="text-xs text-text-muted">
    {dashboard.changedOnLabel}
  </div>

  <!-- Owners -->
  <div class="text-xs">
    {#if dashboard.owners?.length > 0}
      <div class="flex flex-wrap items-center gap-1">
        {#each dashboard.owners as owner (owner)}
          <span class="rounded bg-surface-muted px-2 py-0.5 text-xs text-text truncate max-w-[180px]" title={owner}>
            {owner}
          </span>
        {/each}
      </div>
    {:else}
      <div class="text-text-subtle">-</div>
    {/if}
  </div>
</div>
<!-- #endregion DashboardRow -->