<!-- #region DatasetReviewWorkspaceEntry [C:3] [TYPE Page] [SEMANTICS sveltekit, dataset, review, session, source-intake] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Entry route for Dataset Review Workspace — start a new resumable review session or navigate to existing sessions. -->
<!-- @LAYER Page -->
<!-- @RELATION DEPENDS_ON -> [SourceIntakePanel] -->
<!-- @RELATION BINDS_TO -> [EXT:frontend:environmentContextStore] -->
<!-- @RELATION CALLS -> [EXT:frontend:api_module] -->
<!-- @UX_STATE Empty -> Source intake form for Superset link or dataset reference. -->
<!-- @UX_STATE ResumeList -> Existing resumable sessions listed with direct navigation. -->
<!-- @UX_STATE Submitting -> Controls disabled during session creation. -->
<!-- @UX_STATE Error -> Inline error shown while keeping intake editable. -->
<!-- @UX_RECOVERY User can correct invalid input and retry without losing environment selection. -->
<script lang="ts">
  import { SvelteURLSearchParams } from "svelte/reactivity";
  import { goto } from "$app/navigation";
  import SourceIntakePanel from "$lib/components/dataset-review/SourceIntakePanel.svelte";
  import { t } from "$lib/i18n/index.svelte.js";
  import { api } from "$lib/api.js";

  import {
    environmentContextStore,
    initializeEnvironmentContext,
  } from "$lib/stores/environmentContext.svelte.js";

  let isBootstrapping = $state(true);
  let isSubmitting = $state(false);
  let submitError = $state("");
  let intakeAcknowledgment = $state("");
  let sessions = $state([]);
  let sessionsLoading = $state(false);

  let searchQuery = $state("");
  let currentPage = $state(1);
  let pageSize = $state(5);

  const environments = $derived(environmentContextStore.value?.environments || []);
  const selectedEnvironmentId = $derived(
    environmentContextStore.value?.selectedEnvId || "",
  );
  const hasExistingSessions = $derived(sessions.length > 0);
  

  function buildSessionUrl(sessionId) {
    return `/datasets/review/${encodeURIComponent(String(sessionId))}`;
  }


  async function loadExistingSessions() {
    sessionsLoading = true;
    try {
      const params = new SvelteURLSearchParams();
      params.append("page", String(currentPage));
      params.append("page_size", String(pageSize));
      if (searchQuery.trim()) {
        params.append("search", searchQuery.trim());
      }
      const response = await api.fetchApi(`/dataset-orchestration/sessions?${params.toString()}`);
      sessions = Array.isArray(response?.items) ? response.items : [];
    } catch {
      sessions = [];
    } finally {
      sessionsLoading = false;
    }
  }



  async function bootstrap() {
    isBootstrapping = true;
    try {
      await initializeEnvironmentContext();
      await loadExistingSessions();
    } finally {
      isBootstrapping = false;
    }
  }

  async function handleSourceSubmit(payload) {
    isSubmitting = true;
    submitError = "";
    intakeAcknowledgment = payload.source_kind === "superset_link"
      ? $t.dataset_review?.source?.recognized_link_hint
      : $t.dataset_review?.source?.dataset_selection_acknowledged;
    try {
      const summary = await api.postApi("/dataset-orchestration/sessions", payload);
      if (!summary?.session_id) {
        throw new Error($t.dataset_review?.source?.submit_failed || "Failed to start review");
      }
      await goto(buildSessionUrl(summary.session_id));
    } catch (error) {
      submitError = error?.message || $t.dataset_review?.source?.submit_failed || $t.common?.error;
      throw error;
    } finally {
      isSubmitting = false;
    }
  }

  bootstrap();
</script>

<div class="mx-auto w-full max-w-7xl space-y-5 px-4 py-6">
  <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
    <div>
      <p class="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
        {$t.dataset_review?.workspace?.eyebrow}
      </p>
      <h1 class="text-2xl font-bold text-text">
        {$t.dataset_review?.workspace?.title}
      </h1>
      <p class="mt-1 max-w-3xl text-sm text-text-muted">
        {$t.dataset_review?.workspace?.description}
      </p>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <span class="rounded-full bg-surface-muted px-3 py-1 text-xs font-medium text-text">
        {$t.dataset_review?.workspace?.state_label}: {$t.dataset_review?.workspace?.state?.empty || "Empty"}
      </span>
      {#if hasExistingSessions}
        <span class="rounded-full bg-primary-light px-3 py-1 text-xs font-medium text-primary">
          {$t.dataset_review?.workspace_entry?.resume_available_badge}: {sessions.length}
        </span>
      {/if}
    </div>
  </div>

  {#if isBootstrapping}
    <div class="rounded-2xl border border-border bg-surface-card p-6 text-sm text-text-muted shadow-sm">
      {$t.dataset_review?.workspace?.loading}
    </div>
  {:else}
    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]">
      <section class="rounded-2xl border border-border bg-surface-card p-5 shadow-sm">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
          <div>
            <p class="text-xs font-semibold uppercase tracking-wide text-primary">
              {$t.dataset_review?.workspace_entry?.resume_eyebrow}
            </p>
            <h2 class="text-xl font-semibold text-text">
              {$t.dataset_review?.workspace_entry?.resume_title}
            </h2>
            <p class="mt-1 max-w-2xl text-sm text-text-muted">
              {$t.dataset_review?.workspace_entry?.resume_description}
            </p>
          </div>
          <button
            type="button"
            class="inline-flex items-center justify-center rounded-xl border border-border-strong bg-surface-card px-4 py-2 text-sm font-medium text-text transition hover:bg-surface-page disabled:cursor-not-allowed disabled:opacity-50"
            onclick={loadExistingSessions}
            disabled={sessionsLoading}
          >
            {#if sessionsLoading}
              <svg class="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              {$t.dataset_review?.workspace_entry?.resume_loading}
            {:else}
              <svg class="mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
              </svg>
              {$t.common?.refresh}
            {/if}
          </button>
        </div>
        <!-- Search and session listing continues... -->
      </section>
      <div class="space-y-5">
        <SourceIntakePanel
          environments={environments}
          selectedEnvironmentId={selectedEnvironmentId}
          submitting={isSubmitting}
          acknowledgment={intakeAcknowledgment}
          onsubmit={handleSourceSubmit}
        />
        {#if submitError}
          <div class="rounded-2xl border border-destructive-light bg-destructive-light px-4 py-4 text-sm text-destructive">
            {submitError}
          </div>
        {/if}
      </div>
    </div>
  {/if}
</div>
<!-- #endregion DatasetReviewWorkspaceEntry -->
