# Svelte 5で「2フェーズUX」を実装する — パラメータ入力と生成結果のプログレッシブ・ディスクロージャー Implementing "2-Phase UX" in Svelte 5 — Progressive Disclosure of Parameter Input and Generated Results

// Collapsed state of the parameter input
let isParameterInputCollapsed = $state(false);

// Display state of the output area
let showOutput = $state(false);

// Streaming state
let isLoading = $state(false);
let isStreaming = $state(false);

async function generateOutput() {
  if (!selectedTemplate) return;

  // Validation
  const missingRequired = Object.entries(selectedTemplate.parameters)
    .filter(([key, param]) => param.required && !parameterValues[key])
    .map(([key]) => key);

  if (missingRequired.length > 0) {
    // m is an i18n (internationalization) message function provided by SvelteKit i18n libraries (such as Paraglide).
    // m.key_name() returns the translated string for the current locale.
    // Example: m.please_fill_required() → "必須項目を入力してください" (ja) / "Please fill required fields" (en)
    error = m.please_fill_required({ fields: missingRequired.join(', ') });
    return;
  }

  // Clear output
  output = '';
  error = null;
  isLoading = true;
  isStreaming = true;

  // This is where the phase transition happens
  isParameterInputCollapsed = true;  // Collapse the input
  showOutput = true;                  // Show the output area

  // Scroll to the top of the page
  window.scrollTo({ top: 0, behavior: 'smooth' });

  // Start streaming...
}

window.scrollTo({ top: 0, behavior: 'smooth' });

// Svelte 5 — dependencies are automatically tracked
let summary = $derived(() => parameterValues.name + selectedTemplate.title);

// React — dependency array must be specified manually (omissions cause stale value bugs)
const summary = useMemo(() => parameterValues.name + selectedTemplate.title,
  [parameterValues.name, selectedTemplate.title]);

let parameterSummary = $derived(() => {
  if (!selectedTemplate || !isParameterInputCollapsed) return '';

  const filledParams = Object.entries(parameterValues)
    // Keep only parameters that have been filled in (values that are only whitespace become empty strings after trim() and are excluded as falsy)
    .filter(([, value]) => value.trim())
    .map(([key, value]) => {
      // Truncate long text at 50 characters
      const truncatedValue = value.length > 50 ? value.slice(0, 50) + '...' : value;
      return `${key}: ${truncatedValue}`;
    })
    .slice(0, 3); // Display up to 3 parameters maximum

  if (filledParams.length === 0) {
    return m.no_parameters_set();
  }

  return filledParams.map(param => `• ${param}`).join('\n');
});

{#if !isParameterInputCollapsed}
  <!-- Input phase: display full parameter form -->
  <div class="space-y-6 parameter-inputs">
    {#if selectedTemplate}
      {#each Object.entries(selectedTemplate.parameters) as [paramKey, param]}
        <div class="magical-input-group">
          <label for={paramKey}>
            <span>{paramKey}</span>
            {#if param.required}
              <span class="magical-badge required-badge">{m.required()}</span>
            {/if}
          </label>
          <p>{param.description}</p>
          <!-- bind:value enables two-way binding.
               User input → automatically reflected in parameterValues[paramKey],
               Changes to parameterValues[paramKey] → automatically reflected in textarea display.
               React requires both value + onChange, but Svelte only needs bind: once. -->
          <textarea
            bind:value={parameterValues[paramKey]}
            placeholder={m.enter_parameter({ parameter: paramKey })}
            required={param.required}
            rows="4"
          ></textarea>
        </div>
      {/each}
    {/if}

    <!-- Generate button -->
    {#if selectedTemplate}
      <button onclick={generateOutput} disabled={isLoading || !hasAllRequiredParams()}>
        {#if isLoading}
          {m.generating_magic()}
        {:else}
          {m.generate_output()}
        {/if}
      </button>
    {/if}
  </div>
{/if}

<!-- Generation phase: display output -->
{#if showOutput}
  <div class="output-section">
    <OutputDisplay {output} {isLoading} {isStreaming} />
  </div>
{/if}

function toggleParameterInput() {
  isParameterInputCollapsed = !isParameterInputCollapsed;
}

function handleTemplateSelect(template: Template) {
  selectedTemplate = template;
  parameterValues = Object.keys(template.parameters).reduce((acc, key) => {
    acc[key] = '';
    return acc;
  }, {} as Record<string, string>);
  error = null;

  // Reset collapsed state
  isParameterInputCollapsed = false;
  showOutput = false;
  output = '';
}

<button
  onclick={$authState.isAuthenticated ? generateOutput : handleUnauthenticatedGenerate}
  disabled={isLoading || (!$authState.isAuthenticated ? false : !hasAllRequiredParams())}
>
  {#if isLoading}
    <div class="magical-loading mr-2"></div>
    {m.generating_magic()}
  {:else if !$authState.isAuthenticated}
    {m.sign_in_to_generate()}
  {:else if !hasAllRequiredParams()}
    {m.complete_required_fields()}
  {:else}
    {m.generate_output()}
  {/if}
</button>

function handleUnauthenticatedGenerate() {
  const authSettingsElement = document.querySelector('.magical-auth-container');
  if (authSettingsElement) {
    authSettingsElement.scrollIntoView({ behavior: 'smooth', block: 'center' });

    // Temporarily highlight to draw attention
    authSettingsElement.classList.add('auth-highlight');
    setTimeout(() => {
      authSettingsElement.classList.remove('auth-highlight');
    }, 2000);
  }
}