<!-- #region DashboardLinkedResources [C:3] [TYPE Component] [SEMANTICS sveltekit, dashboard, charts, datasets, overview] -->
<!-- @BRIEF Displays dashboard linked resources: overview metrics, charts table, and datasets list. -->
<!-- @LAYER UI -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:DashboardDetailPage]] -->
<!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
<script lang="ts">
  /**
   * @PURPOSE: Block for overview, charts table, and datasets list.
   * @LAYER UI
   */
  import { t } from "$lib/i18n/index.svelte.js";
  import Icon from "$lib/ui/Icon.svelte";

  let {
    dashboard,
    openDataset,
    formatDate
  } = $props();
</script>

{#if dashboard.description}
  <div class="rounded-xl border border-slate-200 bg-white p-4">
    <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
      {$t.dashboard?.overview}
    </h2>
    <p class="mt-2 text-sm text-slate-700">{dashboard.description}</p>
  </div>
{/if}

<div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
  <div class="border-b border-slate-200 px-4 py-3">
    <h2 class="text-lg font-semibold text-slate-900">
      {$t.dashboard?.charts}
    </h2>
  </div>
  {#if dashboard.charts && dashboard.charts.length > 0}
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-slate-200 text-sm">
        <thead class="bg-slate-50">
          <tr>
            <th class="px-4 py-2 text-left font-semibold text-slate-600">
              {$t.settings?.type_chart}
            </th>
            <th class="px-4 py-2 text-left font-semibold text-slate-600">
              {$t.nav?.datasets}
            </th>
            <th class="px-4 py-2 text-left font-semibold text-slate-600">
              {$t.dashboard?.overview}
            </th>
            <th class="px-4 py-2 text-left font-semibold text-slate-600">
              {$t.dashboard?.last_modified}
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-100">
          {#each dashboard.charts as chart}
            <tr class="hover:bg-slate-50">
              <td class="px-4 py-3">
                <div class="font-medium text-slate-900">{chart.title}</div>
                <div class="text-xs text-slate-500">
                  ID: {chart.id}{#if chart.viz_type} • {chart.viz_type}{/if}
                </div>
              </td>
              <td class="px-4 py-3">
                {#if chart.dataset_id}
                  <button
                    class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-50 hover:text-blue-800"
                    onclick={() => openDataset(chart.dataset_id)}
                    title={`${$t.datasets?.table_name} ${chart.dataset_id}`}
                  >
                    {$t.nav?.datasets}
                    {chart.dataset_id}
                    <Icon name="chevronRight" size={12} className="text-blue-500" />
                  </button>
                {:else}
                  <span class="text-xs text-slate-400">-</span>
                {/if}
              </td>
              <td class="px-4 py-3 text-slate-700">{chart.overview || "-"}</td>
              <td class="px-4 py-3 text-slate-700">{formatDate(chart.last_modified)}</td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  {:else}
    <div class="px-4 py-8 text-sm text-slate-500">
      {$t.dashboard?.no_charts}
    </div>
  {/if}
</div>

<div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
  <div class="border-b border-slate-200 px-4 py-3">
    <h2 class="text-lg font-semibold text-slate-900">{$t.nav?.datasets}</h2>
  </div>
  {#if dashboard.datasets && dashboard.datasets.length > 0}
    <div class="divide-y divide-slate-100">
      {#each dashboard.datasets as dataset}
        <button
          class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-slate-50"
          onclick={() => openDataset(dataset.id)}
        >
          <div class="min-w-0">
            <div class="truncate font-medium text-slate-900">
              {dataset.table_name}
            </div>
            <div class="truncate text-xs text-slate-500">
              {dataset.overview || `${dataset.schema || ""}.${dataset.table_name}`}
              {#if dataset.database} • {dataset.database}{/if}
            </div>
          </div>
          <div class="flex items-center gap-3">
            <span class="text-xs text-slate-500">{formatDate(dataset.last_modified)}</span>
            <Icon name="chevronRight" size={16} className="text-slate-400" />
          </div>
        </button>
      {/each}
    </div>
  {:else}
    <div class="px-4 py-8 text-sm text-slate-500">
      {$t.dashboard?.no_datasets}
    </div>
  {/if}
</div>
<!-- #endregion DashboardLinkedResources -->