<!-- #region ValidationTaskEditPage [C:3] [TYPE Page] [SEMANTICS validation-tasks,edit,update,multi-step] -->
<!-- @BRIEF Edit validation task page — renders ValidationTaskForm with initialData populated, handles update API call. -->
<!-- @RELATION DEPENDS_ON -> [ValidationTaskForm] -->
<!-- @RELATION CALLS -> [ApiModule.updateValidationTask] -->
<!-- @RELATION BINDS_TO -> [I18nModule] -->
<!-- @UX_STATE Loading -> Skeleton while page data loads -->
<!-- @UX_STATE Form -> Multi-step form pre-populated with task data -->
<!-- @UX_STATE Submitting -> Submit button shows spinner -->
<!-- @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';
  import { page } from '$app/state';

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

  let isSubmitting = $state(false);
  let task = $state(data.task);
  let llmProviders = $state(data.llmProviders ?? []);
  let policyId = $derived(page.params.policyId);

  // Transform task data to match form initialData shape
  /** @type {Record<string, any>} */
  let initialData = $derived({
    name: task.name || '',
    description: task.description || '',
    environment_id: task.environment_id || '',
    dashboard_ids: task.dashboard_ids || task.source_ids || [],
    parsed_urls: task.parsed_urls || [],
    screenshot_enabled: task.screenshot_enabled ?? false,
    logs_enabled: task.logs_enabled ?? true,
    execute_chart_data: task.execute_chart_data ?? false,
    llm_batch_size: task.llm_batch_size ?? 1,
    llm_provider_id: task.provider_id || '',
    prompt_template: task.prompt_template || '',
    schedule_days: task.schedule_days || [],
    window_start: task.window_start || '',
    window_end: task.window_end || '',
    is_active: task.is_active ?? true,
  });

  async function handleSubmit(formData) {
    isSubmitting = true;
    try {
      await api.updateValidationTask(policyId, formData);
      addToast($t.validation?.save_success || 'Task saved successfully.', 'success');
      goto(`/validation-tasks/${encodeURIComponent(policyId)}`, { 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/${encodeURIComponent(policyId)}`, { invalidateAll: false });
  }
</script>

<svelte:head>
  <title>{$t.validation?.edit_task_page || 'Edit Task'} — {task?.name || ''}</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?.edit_task_page || 'Edit Task'}
    </h1>
    <p class="text-sm text-gray-500 mt-1">
      {task?.name || ''}
    </p>
  </div>

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