<script>
  import { countryNames } from '../../shared/countries.js';
  import { getCitiesForCountry, ALL_CITIES } from '../../shared/cities.js';
  import { getEntries } from '../../stores/entriesStore.svelte.js';
  import SearchInput from '../../shared/SearchInput.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 {
    country = $bindable(''),
    cities = $bindable([]),
    date = $bindable(''),
    days = $bindable(''),
    tripType = $bindable(''),
    transport = $bindable(''),
    errors = $bindable({ country: '', cities: '', date: '', days: '', tripType: '', transport: '' }),
    isNew = false,
  } = $props();

  let cityInput = $state('');

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

  let allEntries = $derived(getEntries());
  let cityOptions = $derived(
    country.trim()
      ? [...new Set([...getCitiesForCountry(country), ...allEntries.filter(j => (j.location.country || '').toLowerCase() === country.trim().toLowerCase()).flatMap(e => e.location.cities)])].sort()
      : [...new Set([...Object.values(ALL_CITIES).flat(), ...allEntries.flatMap(e => e.location.cities)])].sort()
  );

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

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

<h1 class="page-headline">
  {isNew ? 'Journal your trip!' : 'Edit your trip'}
</h1>

<div class="row">
  <div class="field">
    <label class="label" for="tbi-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
    <SearchInput id="tbi-country" bind:value={country} options={countryNames} required />
    {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
  </div>
  <div class="field">
    <label class="label" for="tbi-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
    <SearchInput id="tbi-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="tbi-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
    <input id="tbi-date" class="input" type="date" bind:value={date} required />
    {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
  </div>
  <div class="field">
    <label class="label" for="tbi-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
    <input id="tbi-days" class="input" type="number" min="1" bind:value={days} required />
    {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
  </div>
</div>

<div class="field">
  <label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <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="tbi-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 <span class="kw">get</span> there? <span class="req">*</span></label>
  <div class="transport-grid">
    {#each transportOptions as opt}
      <label class="toggle-opt transport-opt" class:active={transport === opt.value}>
        <input type="radio" name="tbi-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>

<style>
  .page-headline {
    font-size: 28px;
    font-weight: 500;
    color: var(--text-h);
    letter-spacing: -0.5px;
    margin: 0 0 4px;
  }

  .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-h);
  }
  .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: 10px; flex-wrap: wrap; }
  .toggle-opt {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 400; color: var(--text);
    padding: 12px 14px; 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;
  }
  .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-opt { flex-direction: column; gap: 6px; padding: 16px 10px; }
  .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; }
</style>
