<!-- [DEF:frontend.src.routes.storage.repos.+page:Module] -->
<!--
@TIER:      STANDARD
@SEMANTICS: git, dashboard, management, ui
@PURPOSE:   Dashboard management page for Git integration (moved from /git).
@LAYER:     UI (Page)
@RELATION:  DEPENDS_ON -> DashboardGrid
@RELATION:  DEPENDS_ON -> api
@INVARIANT: Dashboard grid is always shown when an environment is selected.
-->

<!-- [DEF:StorageReposPage:Page] -->
<script lang="ts">
  /**
   * @UX_STATE: Loading -> Showing spinner while fetching environments/dashboards.
   * @UX_STATE: Idle -> Showing dashboard grid with actions.
   * @UX_FEEDBACK: Toast -> Error messages on fetch failure.
   * @UX_RECOVERY: Environment Selection -> Switch environment to retry loading.
   */
  import { onMount } from 'svelte';
  import DashboardGrid from '../../../components/DashboardGrid.svelte';
  import { addToast as toast } from '$lib/toasts.js';
  import { api } from '$lib/api.js';
  import type { DashboardMetadata } from '$lib/types/dashboard';
  import { t } from '$lib/i18n';
  import { Button, Card, PageHeader, Select } from '$lib/ui';

  let environments: any[] = [];
  let selectedEnvId = "";
  let dashboards: DashboardMetadata[] = [];
  let loading = true;
  let fetchingDashboards = false;

  // [DEF:fetchEnvironments:Function]
  /**
   * @PURPOSE: Fetches the list of available environments.
   * @PRE: None.
   * @POST: environments array is populated, selectedEnvId is set to first env if available.
   */
  async function fetchEnvironments() {
    try {
      environments = await api.getEnvironmentsList();
      if (environments.length > 0) {
        selectedEnvId = environments[0].id;
      }
    } catch (e) {
      toast(e.message, 'error');
    } finally {
      loading = false;
    }
  }
  // [/DEF:fetchEnvironments:Function]

  // [DEF:fetchDashboards:Function]
  /**
   * @PURPOSE: Fetches dashboards for a specific environment.
   * @PRE: envId is a valid environment ID.
   * @POST: dashboards array is populated with metadata for the selected environment.
   */
  async function fetchDashboards(envId: string) {
    if (!envId) return;
    fetchingDashboards = true;
    try {
      dashboards = await api.requestApi(`/environments/${envId}/dashboards`);
    } catch (e) {
      toast(e.message, 'error');
      dashboards = [];
    } finally {
      fetchingDashboards = false;
    }
  }
  // [/DEF:fetchDashboards:Function]

  onMount(fetchEnvironments);

  $: if (selectedEnvId) {
    fetchDashboards(selectedEnvId);
    localStorage.setItem('selected_env_id', selectedEnvId);
  }
</script>

<div class="max-w-6xl mx-auto p-6">
  <PageHeader title={$t.nav?.repositories || "Git Repositories"}>
    <div slot="actions" class="flex items-center space-x-4">
      <Select
        label="Environment"
        bind:value={selectedEnvId}
        options={environments.map(e => ({ value: e.id, label: e.name }))}
      />
    </div>
  </PageHeader>

  {#if loading}
    <div class="flex justify-center py-12">
      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
    </div>
  {:else}
    <Card title="Select Dashboard to Manage">
      {#if fetchingDashboards}
        <p class="text-gray-500">Loading dashboards...</p>
      {:else if dashboards.length > 0}
        <DashboardGrid {dashboards} />
      {:else}
        <p class="text-gray-500 italic">No dashboards found in this environment.</p>
      {/if}
    </Card>
  {/if}
</div>
<!-- [/DEF:StorageReposPage:Page] -->
<!-- [/DEF:frontend.src.routes.storage.repos.+page:Module] -->
