<script>
  import { journals, addEntry } from '../../stores/entriesStore.svelte.js';
  import { get } from 'svelte/store';
  import { flashCountry } from '../../layout/selection.svelte.js';
  import { countryNames } from '../../shared/countries.js';
  import { ALL_CITIES } from '../../shared/cities.js';
  import SearchInput from '../../shared/SearchInput.svelte';
  import PhotoEditor from './PhotoEditor.svelte';
  import StepNav from './StepNavbar.svelte';
  import airplaneImg from '../../../assets/airplane.png';
  import trainImg    from '../../../assets/train.png';
  import busImg      from '../../../assets/bus.png';
  import carImg      from '../../../assets/car.png';
  import shipImg     from '../../../assets/ship.png';
  import walkImg     from '../../../assets/walk.png';

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

  // ── Journal store (reactive) ────────────────────────────────────────
  let journalEntries = $state(get(journals));
  $effect(() => {
    const unsub = journals.subscribe(v => { journalEntries = v; });
    return unsub;
  });

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

  $effect(() => {
    country = initialCountry;
  });
  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([
          ...(ALL_CITIES[country.trim()] ?? []),
          ...journalEntries.filter(j => (j.location?.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location?.cities ?? []),
        ])]
      : []
  );

  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', img: airplaneImg },
    { value: 'train',  label: 'Train',  img: trainImg    },
    { value: 'bus',    label: 'Bus',    img: busImg      },
    { value: 'car',    label: 'Car',    img: carImg      },
    { value: 'ship',   label: 'Ship',   img: shipImg     },
    { value: 'walk',   label: 'Walk',   img: walkImg     },
  ];

  // ── 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);
  let saveError = $state('');

  async function save() {
    saving = true;
    saveError = '';
    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 addEntry({
        title: `${cities.join(', ')}, ${country}`,
        date,
        days: Number(days),
        tripType,
        transport,
        memo,
        photos,
        location: { cities, country },
      });
      flashCountry(country);
      onSaved();
    } catch (e) {
      saving = false;
      saveError = e?.message ?? 'Failed to save. Please try again.';
    }
  }

  let next = $derived(step < 3 ? nextStep : save);
</script>

<div class="layout">
  <StepNav {step} onback={prevStep} onnext={next} {saving} saveLabel="Save trip" {saveError} />

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

      {#if step === 1}
        <!-- headline -->
        <h1 class="page-headline">
          {#if country.trim()}
            Journal your trip to <strong>{country}</strong>!
          {:else}
            Journal your trip!
          {/if}
        </h1>

        <div class="row">
          <div class="field">
            <label class="label" for="nc-country">Which <span class="kw">country</span> did you visit? <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">Which <span class="kw">cities</span> did you visit? <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">When did you <span class="kw">arrive</span>? <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">How many <span class="kw">days</span> did you stay? <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">
          <span class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></span>
          <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">
          <span class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></span>
          <div class="transport-grid">
            {#each transportOptions as opt}
              <label class="toggle-opt" class:active={transport === opt.value}>
                <input type="radio" name="nc-transport" value={opt.value} bind:group={transport} />
                <img src={opt.img} alt={opt.label} class="transport-img" />
                {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{cities.length > 0 ? ` of ${cities.join(', ')}` : country.trim() ? ` of ${country}` : ''}
        </h2>
        {#if cities.length > 0 || country.trim()}
          <p class="step-sub">{cities.join(', ')}{cities.length > 0 && country.trim() ? `, ${country}` : country.trim()}</p>
        {/if}

        {#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);
  }

  /* 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;
  }
  .page-headline {
    font-size: 28px;
    font-weight: 500;
    color: var(--text-h);
    letter-spacing: -0.5px;
    margin: 0 0 4px;
  }
  .page-headline strong { font-weight: 600; }
  .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; }
  .kw { color: var(--accent); }

  .ferr { font-size: 13px; font-weight: 500; 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; flex-wrap: wrap; }
  .toggle-opt {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    font-size: 14px; font-weight: 400; color: var(--text);
    padding: 16px 10px; border-radius: 10px;
    border: 1px solid var(--border);
    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    background: var(--bg-subtle);
    white-space: nowrap;
    flex: 1;
  }
  .toggle-opt input { display: none; }
  .toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); }

  .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .transport-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }

  .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: 14px;
    background: var(--bg);
    border: 1.5px solid var(--accent-border);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  }
  .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: 16px;
    font-weight: 400;
    color: var(--text-h);
    background: var(--bg-subtle);
    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>
