<script>
  import { get } from 'svelte/store';
  import { journals, addJournal } from '../stores/journalStore.js';
  import { countryNames } from '../shared/countries.js';
  import SearchInput from '../shared/SearchInput.svelte';
  import PhotoEditor from './PhotoEditor.svelte';

  let { initialCountry = '', onBack } = $props();

  // ── Fields ─────────────────────────────────────────────────────────
  let cities    = $state([]);
  let cityInput = $state('');
  let country   = $state(initialCountry);
  let date      = $state(new Date().toISOString().slice(0, 10));
  let days      = $state('');
  let tripType  = $state('');
  let transport = $state('');
  let photos    = $state([]);
  let answers   = $state(['', '', '']);

  let errors = $state({ country: '', cities: '', date: '', days: '', tripType: '', transport: '' });

  // ── Steps ──────────────────────────────────────────────────────────
  let step = $state(1); // 1 | 2 | 3

  // ── Random questions ───────────────────────────────────────────────
  const ALL_QUESTIONS = [
    'If this trip had a movie title, what would it be?',
    'What was the most unexpected thing that happened?',
    'Which moment would you relive for just 10 more minutes?',
    'What was your best accidental discovery?\n(A café, a street, a person, a view…)',
    'If your trip had a theme song, what would it sound like?',
    'What did you pack but never use?',
    'What was the smallest thing that made you surprisingly happy?',
    'If you could steal one thing from this place (without consequences), what would it be?\n(A tradition, a smell, a sunset, a food…)',
    'What story from this trip will you probably tell your friends first?',
    'What version of yourself showed up on this trip?',
  ];

  function pickRandom() {
    const shuffled = [...ALL_QUESTIONS].sort(() => Math.random() - 0.5);
    return shuffled.slice(0, 3);
  }

  const questions = pickRandom();

  // ── Helpers ────────────────────────────────────────────────────────
  // Suggest cities — if a country is selected, show cities only from that country;
  // otherwise show all known cities.
  let cityOptions = $derived(
    country.trim()
      ? [...new Set(get(journals).filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities))].sort()
      : [...new Set(get(journals).flatMap(e => e.location.cities))].sort()
  );

  function addCity(val) {
    const t = (val ?? cityInput).trim();
    if (t && !cities.includes(t)) cities = [...cities, t];
    cityInput = '';
  }

  function removeCity(c) { cities = cities.filter(x => x !== c); }

  $effect(() => { if (country.trim()) errors.country = ''; });
  $effect(() => { if (cities.length > 0) errors.cities = ''; });
  $effect(() => { if (date) errors.date = ''; });
  $effect(() => { if (days && Number(days) >= 1) errors.days = ''; });
  $effect(() => { if (tripType) errors.tripType = ''; });
  $effect(() => { if (transport) errors.transport = ''; });

  const transportOptions = [
    { value: 'flight', label: '✈ Flight' },
    { value: 'train',  label: '🚂 Train'  },
    { value: 'bus',    label: '🚌 Bus'    },
    { value: 'car',    label: '🚗 Car'    },
    { value: 'ship',   label: '🚢 Ship'   },
    { value: 'walk',   label: '🚶 Walk'   },
  ];

  // ── Navigation ─────────────────────────────────────────────────────
  function nextStep() {
    if (step === 1) {
      errors = { country: '', cities: '', date: '', days: '', tripType: '', transport: '' };
      let hasError = false;
      if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
      if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
      if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
      if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
      if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
      if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
      if (hasError) return;
    }
    step++;
  }

  function prevStep() {
    if (step === 1) onBack();
    else step--;
  }

  // ── Save ───────────────────────────────────────────────────────────
  let saving = $state(false);

  async function save() {
    saving = true;
    const memo = questions
      .map((q, i) => answers[i].trim() ? `Q: ${q.split('\n')[0]}\nA: ${answers[i].trim()}` : '')
      .filter(Boolean)
      .join('\n\n');
    try {
      await addJournal({
        title: `${cities.join(', ')}, ${country}`,
        date,
        days: Number(days),
        tripType,
        transport,
        memo,
        photos,
        location: { cities, country },
      });
      onBack();
    } catch {
      saving = false;
    }
  }
</script>

<div class="layout">
  <header class="topbar">
    <div class="topbar-left">
      <button class="ghost-btn" onclick={prevStep}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
        {step === 1 ? 'Back' : 'Previous'}
      </button>
    </div>

    <div class="steps">
      {#each [1,2,3] as s}
        <div class="step-dot" class:active={step === s} class:done={step > s}></div>
      {/each}
    </div>

    <div class="topbar-right">
      {#if step < 3}
        <button class="save-btn" onclick={nextStep}>Next</button>
      {:else}
        <button class="save-btn" onclick={save} disabled={saving}>
          {saving ? 'Saving…' : 'Save trip'}
        </button>
      {/if}
    </div>
  </header>

  <div class="scroll">
    <div class="form">

      {#if step === 1}
        <!-- ── STEP 1: Details ── -->
        <h2 class="step-title">Trip details</h2>

        <div class="row">
          <div class="field">
            <label class="label" for="nc-country">Country <span class="req">*</span></label>
            <SearchInput id="nc-country" bind:value={country} options={countryNames} />
            {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
          </div>
          <div class="field">
            <label class="label" for="nc-city">Cities <span class="req">*</span></label>
            <SearchInput id="nc-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
            {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
            {#if cities.length > 0}
              <div class="tags">
                {#each cities as c}
                  <span class="tag">{c}<button type="button" class="tag-rm" onclick={() => removeCity(c)}>×</button></span>
                {/each}
              </div>
            {/if}
          </div>
        </div>

        <div class="row">
          <div class="field">
            <label class="label" for="nc-date">Date <span class="req">*</span></label>
            <input id="nc-date" class="input" type="date" bind:value={date} />
            {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
          </div>
          <div class="field">
            <label class="label" for="nc-days">Days <span class="req">*</span></label>
            <input id="nc-days" class="input" type="number" min="1" bind:value={days} />
            {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
          </div>
        </div>

        <div class="field">
          <label class="label">Trip type <span class="req">*</span></label>
          <div class="toggle-row">
            {#each ['solo','friends','family'] as t}
              <label class="toggle-opt" class:active={tripType === t}>
                <input type="radio" name="nc-tripType" value={t} bind:group={tripType} />
                {t === 'solo' ? 'Solo' : t === 'friends' ? 'With friends' : 'With family'}
              </label>
            {/each}
          </div>
          {#if errors.tripType}<span class="ferr">{errors.tripType}</span>{/if}
        </div>

        <div class="field">
          <label class="label">How did you get there? <span class="req">*</span></label>
          <div class="transport-grid">
            {#each transportOptions as opt}
              <label class="transport-opt" class:active={transport === opt.value}>
                <input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
                {opt.label}
              </label>
            {/each}
          </div>
          {#if errors.transport}<span class="ferr">{errors.transport}</span>{/if}
        </div>

      {:else if step === 2}
        <!-- ── STEP 2: Photos ── -->
        <h2 class="step-title">Photos</h2>
        <p class="step-sub">Optional — add photos from your trip</p>
        <PhotoEditor {photos} onchange={(p) => (photos = p)} />

      {:else}
        <!-- ── STEP 3: Questions ── -->
        <h2 class="step-title">Your memories</h2>

        {#each questions as q, i}
          <div class="q-card">
            <p class="q-text">{q}</p>
            <textarea class="q-input" rows="3" placeholder="Your answer…" bind:value={answers[i]}></textarea>
          </div>
        {/each}
      {/if}

    </div>
  </div>
</div>

<style>
  .layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg);
    font-family: var(--sans);
  }

  /* topbar */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 52px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    min-width: 110px;
  }
  .topbar-right { justify-content: flex-end; }

  .steps {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s, transform 0.2s;
  }
  .step-dot.active {
    background: var(--accent);
    transform: scale(1.25);
  }
  .step-dot.done {
    background: var(--accent);
    opacity: 0.35;
  }

  .ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 300;
    color: var(--text);
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .ghost-btn:hover { background: var(--bg-subtle); border-color: var(--border); color: var(--text-h); }

  .save-btn {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
  }
  .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
  .save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

  /* scroll + form */
  .scroll { flex: 1; overflow-y: auto; }

  .form {
    max-width: 560px;
    margin: 0 auto;
    padding: 36px 48px 80px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .step-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--text-h);
    letter-spacing: -0.3px;
    margin: 0 0 2px;
  }
  .step-sub {
    font-size: 13px;
    font-weight: 300;
    color: var(--text-sub);
    margin: -10px 0 4px;
  }

  /* fields (same as EditForm) */
  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .field { display: flex; flex-direction: column; gap: 6px; }

  .label {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-sub);
  }
  .req { color: var(--accent); font-size: 11px; }

  .ferr { font-size: 11px; color: #dc2626; }

  .input {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 300;
    color: var(--text-h);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
  }
  .input:focus { border-color: var(--accent-border); }

  .toggle-row { display: flex; gap: 8px; }
  .toggle-opt {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 300; color: var(--text);
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
    background: var(--bg-subtle);
  }
  .toggle-opt input { display: none; }
  .toggle-opt.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }

  .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .transport-opt {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; font-weight: 300; color: var(--text);
    padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg-subtle);
    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .transport-opt input { display: none; }
  .transport-opt.active { border-color: var(--accent-border); background: var(--accent-bg); color: var(--accent); }

  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 300; color: var(--accent);
    background: var(--accent-bg); border: 1px solid var(--accent-border);
    border-radius: 20px; padding: 3px 10px 3px 12px;
  }
  .tag-rm {
    background: none; border: none; color: var(--accent);
    font-size: 15px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.6;
  }
  .tag-rm:hover { opacity: 1; }

  /* question cards */
  .q-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
  }
  .q-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-h);
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
  }
  .q-input {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 300;
    color: var(--text-h);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    outline: none;
    resize: none;
    line-height: 1.6;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
  }
  .q-input:focus { border-color: var(--accent-border); }
  .q-input::placeholder { color: var(--text-sub); font-style: italic; }
</style>
