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

  /**
   * entry = null  →  "new entry" mode
   * entry = {...} →  "edit" mode
   * @type {{ entry?: import('../stores/journalStore.js').JournalEntry | null, initialCountry?: string, onBack: () => void }}
   */
  let { entry = null, initialCountry = '', onBack } = $props();

  let isNew = !entry;

  let city       = $state(entry?.location.city ?? '');
  let country    = $state(entry?.location.country ?? initialCountry);
  let date       = $state(entry?.date ?? new Date().toISOString().slice(0, 10));
  let days       = $state(String(entry?.days ?? 1));
  let tripType   = $state(entry?.tripType ?? 'solo');
  let photos     = $state([...(entry?.photos ?? [])]);
  let memo       = $state(entry?.memo ?? '');
  let transport  = $state(entry?.transport ?? 'flight');

  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'   },
  ];

  const MEMO_MAX = 100;
  let wordCount = $derived(memo.trim() === '' ? 0 : memo.trim().split(/\s+/).length);
  let memoOverLimit = $derived(wordCount > MEMO_MAX);

  function onMemoInput(e) {
    const raw = e.currentTarget.value;
    const words = raw.trim() === '' ? [] : raw.trim().split(/\s+/);
    if (words.length > MEMO_MAX) {
      // keep first 100 words, preserve trailing space if user is mid-word
      memo = words.slice(0, MEMO_MAX).join(' ');
      e.currentTarget.value = memo;
    } else {
      memo = raw;
    }
  }

  let cityOptions = $derived(
    [...new Set(get(journals).map(e => e.location.city))].sort()
  );

  function save() {
    if (isNew) {
      addJournal({
        title: `${city}, ${country}`,
        date,
        days: Number(days),
        tripType,
        memo,
        photos,
        transport,
        location: { city, country },
      });
    } else {
      updateJournal({
        ...entry,
        date,
        days: Number(days),
        tripType,
        transport,
        memo,
        photos,
        location: { city, country },
      });
    }
    onBack();
  }
</script>

<div class="edit-layout">

  <header class="edit-topbar">
    <div class="topbar-left">
      <button class="topbar-btn" onclick={onBack}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19 12H5M12 5l-7 7 7 7"/>
        </svg>
        Back
      </button>
    </div>
    <span class="topbar-title">{isNew ? 'New entry' : 'Edit'}</span>
    <div class="topbar-right">
      <button class="topbar-btn topbar-btn--save" onclick={save}>Save changes</button>
    </div>
  </header>

  <div class="edit-scroll">
    <form class="form" onsubmit={(e) => { e.preventDefault(); save(); }}>

      <div class="row">
        <div class="field">
          <label class="label" for="edit-country">Country <span class="req">*</span></label>
          <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
        </div>
        <div class="field">
          <label class="label" for="edit-city">City <span class="req">*</span></label>
          <SearchInput id="edit-city" bind:value={city} options={cityOptions} required />
        </div>
      </div>

      <div class="row">
        <div class="field">
          <label class="label" for="edit-date">Date <span class="req">*</span></label>
          <input id="edit-date" class="input" type="date" bind:value={date} required />
        </div>
        <div class="field">
          <label class="label" for="edit-days">Days <span class="req">*</span></label>
          <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
        </div>
      </div>

      <div class="field">
        <label class="label">Trip type</label>
        <div class="toggle-row">
          <label class="toggle-opt" class:active={tripType === 'solo'}>
            <input type="radio" name="tripType" value="solo" bind:group={tripType} /> Solo
          </label>
          <label class="toggle-opt" class:active={tripType === 'friends'}>
            <input type="radio" name="tripType" value="friends" bind:group={tripType} /> With friends
          </label>
        </div>
      </div>

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

      <PhotoEditor {photos} onchange={(p) => (photos = p)} />

      <div class="field">
        <div class="label-row">
          <label class="label" for="edit-memo">How was it?</label>
          <span class="char-count" class:over={memoOverLimit}>{wordCount} / {MEMO_MAX} words</span>
        </div>
        <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="4" value={memo} oninput={onMemoInput}></textarea>
      </div>


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

<style>
  .edit-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
  }

  .edit-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;
    gap: 4px;
    min-width: 120px;
  }
  .topbar-right { justify-content: flex-end; }

  .topbar-title {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-h);
  }

  .topbar-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 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  .topbar-btn:hover {
    background: var(--bg-subtle);
    border-color: var(--border);
    color: var(--text-h);
  }
  .topbar-btn--save {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .topbar-btn--save:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
  }

  .edit-scroll {
    flex: 1;
    overflow-y: auto;
  }

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

  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

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

  .label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

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

  .char-count {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-sub);
    transition: color 0.15s;
  }
  .char-count.over { color: #dc2626; }
  .input-over { border-color: #fca5a5; }

  .req {
    color: var(--accent);
    font-size: 11px;
  }

  .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%;
  }
  .input:focus { border-color: var(--accent-border); }

  .textarea {
    resize: vertical;
    line-height: 1.6;
  }

  .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);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    background: var(--bg-subtle);
    white-space: nowrap;
  }
  .transport-opt input { display: none; }
  .transport-opt.active {
    border-color: var(--accent-border);
    background: var(--accent-bg);
    color: var(--accent);
  }

</style>
