<!-- [DEF:App:Component] -->
<!--
@SEMANTICS: main, entrypoint, layout, navigation
@PURPOSE: The root component of the frontend application. Manages navigation and layout.
@LAYER: UI
@RELATION: DEPENDS_ON -> frontend/src/pages/Dashboard.svelte
@RELATION: DEPENDS_ON -> frontend/src/pages/Settings.svelte
@RELATION: DEPENDS_ON -> frontend/src/lib/stores.js

@INVARIANT: Navigation state must be persisted in the currentPage store.
-->
<script>
  // [SECTION: IMPORTS]
  import { get } from 'svelte/store';
  import Dashboard from './pages/Dashboard.svelte';
  import Settings from './pages/Settings.svelte';
  import { selectedPlugin, selectedTask, currentPage } from './lib/stores.js';
  import TaskRunner from './components/TaskRunner.svelte';
  import DynamicForm from './components/DynamicForm.svelte';
  import { api } from './lib/api.js';
  import Toast from './components/Toast.svelte';
  // [/SECTION]

  // [DEF:handleFormSubmit:Function]
  /**
   * @purpose Handles form submission for task creation.
   * @param {CustomEvent} event - The submit event from DynamicForm.
   */
  async function handleFormSubmit(event) {
    console.log("[App.handleFormSubmit][Action] Handling form submission for task creation.");
    const params = event.detail;
    try {
      const plugin = get(selectedPlugin);
      const task = await api.createTask(plugin.id, params);
      selectedTask.set(task);
      selectedPlugin.set(null);
      console.log(`[App.handleFormSubmit][Coherence:OK] Task created id=${task.id}`);
    } catch (error) {
      console.error(`[App.handleFormSubmit][Coherence:Failed] Task creation failed error=${error}`);
    }
  }
  // [/DEF:handleFormSubmit]

  // [DEF:navigate:Function]
  /**
   * @purpose Changes the current page and resets state.
   * @param {string} page - Target page name.
   */
  function navigate(page) {
    console.log(`[App.navigate][Action] Navigating to ${page}.`);
    // Reset selection first
    if (page !== get(currentPage)) {
      selectedPlugin.set(null);
      selectedTask.set(null);
    }
    // Then set page
    currentPage.set(page);
  }
  // [/DEF:navigate]
</script>

<!-- [SECTION: TEMPLATE] -->
<Toast />

<main class="bg-gray-50 min-h-screen">
  <header class="bg-white shadow-md p-4 flex justify-between items-center">
    <button
      type="button"
      class="text-3xl font-bold text-gray-800 focus:outline-none"
      on:click={() => navigate('dashboard')}
    >
      Superset Tools
    </button>
    <nav class="space-x-4">
      <button
        type="button"
        on:click={() => navigate('dashboard')}
        class="text-gray-600 hover:text-blue-600 font-medium {$currentPage === 'dashboard' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
      >
        Dashboard
      </button>
      <button
        type="button"
        on:click={() => navigate('settings')}
        class="text-gray-600 hover:text-blue-600 font-medium {$currentPage === 'settings' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
      >
        Settings
      </button>
    </nav>
  </header>

  <div class="p-4">
    {#if $currentPage === 'settings'}
      <Settings />
    {:else if $selectedTask}
      <TaskRunner />
      <button on:click={() => selectedTask.set(null)} class="mt-4 bg-blue-500 text-white p-2 rounded">
        Back to Task List
      </button>
    {:else if $selectedPlugin}
      <h2 class="text-2xl font-bold mb-4">{$selectedPlugin.name}</h2>
      <DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
      <button on:click={() => selectedPlugin.set(null)} class="mt-4 bg-gray-500 text-white p-2 rounded">
        Back to Dashboard
      </button>
    {:else}
      <Dashboard />
    {/if}
  </div>
</main>
<!-- [/SECTION] -->

<!-- [/DEF:App] -->
