<!-- #region ReviewWorkspaceLeftSidebar [C:3] [TYPE Component] [SEMANTICS dataset-review, sidebar, session, milestones, import] -->
<!-- @BRIEF Left sidebar for dataset review workspace: source info, import status, session summary, clarification focus, primary actions. -->
<!-- @LAYER UI -->
<script lang="ts">
  import { t } from "$lib/i18n/index.svelte.js";

  let {
    session,
    profile,
    currentWorkspaceState,
    readinessLabel,
    getWorkspaceStateLabel,
    importedFilters,
    executionMappings,
    findings,
    clarificationCurrentQuestion,
    clarificationRemainingCount,
    clarificationTotalCount,
    importMilestones,
    launchDisabled,
    saveDisabled,
    getPrimaryActionCtaLabel,
    onPrimaryAction,
    onSaveSession,
    onPromptAssistant,
  } = $props();
</script>

<section class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
  <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
    {$t.dataset_review?.workspace?.source_session_title}
  </p>

  <div class="mt-3 rounded-2xl border border-slate-200 bg-slate-50 p-4">
    <div class="text-[11px] uppercase tracking-wide text-slate-500">
      {$t.dataset_review?.workspace?.source_label}
    </div>
    <div class="mt-1 break-words text-sm font-medium leading-6 text-slate-900">
      {session.source_input || session.dataset_ref}
    </div>
  </div>

  <div class="mt-3 rounded-2xl border border-slate-200 bg-slate-50 p-4">
    <div class="flex items-center justify-between gap-2">
      <div>
        <div class="text-[11px] uppercase tracking-wide text-slate-500">
          {$t.dataset_review?.workspace?.import_status_title}
        </div>
        <div class="mt-1 text-sm font-medium text-slate-900">
          {getWorkspaceStateLabel(currentWorkspaceState)}
        </div>
      </div>
      <span class="rounded-full bg-white px-2.5 py-1 text-xs font-medium text-slate-700">
        {readinessLabel}
      </span>
    </div>

    <ol class="mt-4 space-y-2">
      {#each importMilestones as milestone}
        <li class="flex items-center gap-2 text-sm text-slate-700">
          <span class={`inline-flex h-2.5 w-2.5 rounded-full ${
            milestone.state === "done" ? "bg-emerald-500" : milestone.state === "active" ? "bg-blue-500" : "bg-slate-300"
          }`}></span>
          <span>{milestone.label}</span>
        </li>
      {/each}
    </ol>
  </div>

  <div class="mt-3 rounded-2xl border border-slate-200 bg-slate-50 p-4">
    <div class="text-[11px] uppercase tracking-wide text-slate-500">
      {$t.dataset_review?.workspace?.session_label || "Session summary"}
    </div>
    <div class="mt-2 text-sm font-semibold text-slate-900">
      {profile?.dataset_name || session.dataset_ref}
    </div>
    <div class="mt-1 text-xs text-slate-600">
      {profile?.business_summary_source || "ai_draft"} • {profile?.confidence_state || "unresolved"}
    </div>
    <div class="mt-3 flex flex-wrap gap-2 text-[11px] text-slate-600">
      <span class="rounded-full bg-white px-2.5 py-1">
        {$t.dataset_review?.workspace?.filter_count_label || "Filters"}: {importedFilters.length}
      </span>
      <span class="rounded-full bg-white px-2.5 py-1">
        {$t.dataset_review?.workspace?.mapping_count_label || "Mappings"}: {executionMappings.length}
      </span>
      <span class="rounded-full bg-white px-2.5 py-1">
        {$t.dataset_review?.workspace?.finding_count_label || "Findings"}: {findings.length}
      </span>
    </div>
  </div>

  {#if clarificationCurrentQuestion}
    <div class="rounded-2xl border border-violet-200 bg-violet-50 p-4 text-sm text-violet-900">
      <div class="text-[11px] font-semibold uppercase tracking-wide text-violet-600">
        {$t.dataset_review?.workspace?.clarification_focus_label || "Clarification focus"}
      </div>
      <div class="mt-2 font-medium">{clarificationCurrentQuestion.question_text}</div>
      <p class="mt-2 text-xs text-violet-700">{clarificationCurrentQuestion.why_it_matters}</p>
      <button
        type="button"
        class="mt-3 inline-flex items-center justify-center rounded-xl border border-violet-300 bg-white px-3 py-2 text-xs font-medium text-violet-700 transition hover:bg-violet-100"
        onclick={() => onPromptAssistant(`clarification:${clarificationCurrentQuestion.question_id}`, clarificationCurrentQuestion.question_text)}
      >
        {$t.dataset_review?.clarification?.resume_action || "Resume clarification"}
      </button>
    </div>
  {/if}

  <div class="flex flex-wrap gap-2 mt-3">
    <button
      type="button"
      class="inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-sm font-medium text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:bg-slate-300"
      onclick={onPrimaryAction}
      disabled={launchDisabled}
    >
      {getPrimaryActionCtaLabel()}
    </button>
    <button
      type="button"
      class="inline-flex items-center justify-center rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
      onclick={onSaveSession}
      disabled={saveDisabled}
    >
      {$t.dataset_review?.workspace?.save_session_action}
    </button>
  </div>
</section>
<!-- #endregion ReviewWorkspaceLeftSidebar -->
