<script lang="ts">
  import Spinner from '$lib/Spinner.svelte';

  interface FormData {
    title:   string;
    quarter: string;
    date:    string;
    thesis:  string;
    tickers: string;
  }

  let {
    saving = false,
    error  = null,
    onSubmit,
    onCancel,
  }: {
    saving?:  boolean;
    error?:   string | null;
    onSubmit: (data: FormData) => void;
    onCancel: () => void;
  } = $props();

  function currentQuarter(): string {
    const d = new Date();
    return `Q${Math.ceil((d.getMonth() + 1) / 3)} ${d.getFullYear()}`;
  }

  let form = $state<FormData>({
    title:   '',
    quarter: currentQuarter(),
    date:    new Date().toISOString().slice(0, 10),
    thesis:  '',
    tickers: '',
  });

  function handleSubmit(e: SubmitEvent) {
    e.preventDefault();
    onSubmit({ ...form });
  }
</script>

<section class="section form-section">
  <div class="section-header"><h2>New Market Call</h2></div>
  <form class="call-form" onsubmit={handleSubmit}>
    <div class="call-form-row">
      <label>
        <span>Title</span>
        <input bind:value={form.title} placeholder="Q3 2025 — Rate pivot & tech rotation" required />
      </label>
      <label class="narrow">
        <span>Quarter</span>
        <input bind:value={form.quarter} placeholder="Q3 2025" required />
      </label>
      <label class="narrow">
        <span>Date</span>
        <input type="date" bind:value={form.date} required />
      </label>
    </div>
    <label>
      <span>Thesis</span>
      <textarea
        bind:value={form.thesis}
        rows="4"
        placeholder="Describe the macro thesis behind this call — why these tickers, why now..."
        required
      ></textarea>
    </label>
    <label>
      <span>Tickers to track</span>
      <input bind:value={form.tickers} placeholder="AAPL, MSFT, TLT, GLD …" required />
      <span class="call-hint">Comma or space separated. Current prices will be snapshot automatically.</span>
    </label>
    {#if error}
      <div class="form-error-block">⚠ {error}</div>
    {/if}
    <div class="call-form-actions">
      <button type="submit" class="btn-primary" disabled={saving}>
        {#if saving}<Spinner size="sm" /><span>Snapshotting prices…</span>
        {:else}Save Call{/if}
      </button>
      <button type="button" class="btn-ghost" onclick={onCancel}>Cancel</button>
    </div>
  </form>
</section>

