<!-- #region ValidationTaskNewPage [C:3] [TYPE Page] [SEMANTICS validation-tasks,new,create,multi-step] -->
<!-- @BRIEF New validation task creation page — renders ValidationTaskForm in create mode, handles create API call. -->
<!-- @RELATION DEPENDS_ON -> [ValidationTaskForm] -->
<!-- @RELATION CALLS -> [ApiModule.createValidationTask] -->
<!-- @RELATION BINDS_TO -> [environmentContextStore] -->
<!-- @RELATION BINDS_TO -> [I18nModule] -->
<!-- @UX_STATE Loading -> Skeleton placeholder while data loads -->
<!-- @UX_STATE Form -> Multi-step form visible -->
<!-- @UX_STATE Submitting -> Submit button shows spinner, navigation disabled -->
<!-- @UX_STATE Success -> Toast + redirect to task detail page -->
<!-- @UX_STATE Error -> Toast error message -->
<script lang="ts">
  import { goto } from '$app/navigation';
  import { t } from '$lib/i18n/index.svelte.js';
  import { addToast } from '$lib/toasts.svelte.js';
  import { api } from '$lib/api.js';
  import ValidationTaskForm from '$lib/components/llm/ValidationTaskForm.svelte';

  /** @type {{ data: import('./$types').PageData }} */
  let { data } = $props();

  let isSubmitting = $state(false);
  let llmProviders = $state(data.llmProviders ?? []);
  let providersError = $state(data.providersError ?? null);

  async function handleSubmit(formData) {
    isSubmitting = true;
    try {
      const result = await api.createValidationTask(formData);
      addToast($t.validation?.save_success || 'Task created successfully.', 'success');
      const taskId = result?.id || result?.task_id;
      if (taskId) {
        goto(`/validation-tasks/${encodeURIComponent(taskId)}`, { invalidateAll: true });
      } else {
        goto('/validation-tasks', { invalidateAll: true });
      }
    } catch (err) {
      const msg = err?.message || ($t.validation?.save_failed || 'Failed to save');
      addToast(msg, 'error');
    } finally {
      isSubmitting = false;
    }
  }

  function handleCancel() {
    goto('/validation-tasks', { invalidateAll: false });
  }
</script>

<svelte:head>
  <title>{$t.validation?.new_task_page || 'New Validation Task'}</title>
</svelte:head>

<div class="max-w-7xl mx-auto px-4 py-6">
  <!-- Back link -->
  <a
    href="/validation-tasks"
    class="inline-flex items-center text-sm text-gray-500 hover:text-gray-700 mb-6 transition-colors"
  >
    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
    </svg>
    {$t.validation?.back_to_tasks || '← Back to tasks'}
  </a>

  <!-- Page Header -->
  <div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">
      {$t.validation?.new_task_page || 'New Validation Task'}
    </h1>
    <p class="text-sm text-gray-500 mt-1">
      {$t.validation?.step_x_of_y || 'Configure a new LLM-powered dashboard validation task'}
    </p>
  </div>

  <!-- Provider loading error banner -->
  {#if providersError}
    <div class="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6 flex items-center gap-2 text-sm text-amber-700" role="alert">
      <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
      </svg>
      <span>{$t.validation?.providers_load_failed || 'Failed to load providers'}: {providersError}</span>
    </div>
  {/if}

  <!-- Form -->
  <ValidationTaskForm
    {llmProviders}
    {isSubmitting}
    onSubmit={handleSubmit}
    onCancel={handleCancel}
  />
</div>
<!-- #endregion ValidationTaskNewPage -->
