<script>
  let { prefs, onchange, onclose } = $props();

  let term = $state('');

  function addTerm() {
    const v = term.trim();
    if (v && !prefs.avoid_terms.includes(v)) {
      prefs.avoid_terms.push(v);
      onchange?.();
    }
    term = '';
  }
  function removeTerm(i) { prefs.avoid_terms.splice(i, 1); onchange?.(); }
  function removePause(i) { prefs.pauses.splice(i, 1); onchange?.(); }
  function removeMute(kind, value) {
    const arr = kind === 'topic' ? prefs.mute_topics : prefs.mute_flavors;
    const i = arr.indexOf(value);
    if (i >= 0) arr.splice(i, 1);
    onchange?.();
  }
  function reset() {
    for (const k of ['avoid_terms', 'pauses', 'mute_topics', 'mute_flavors', 'include_topics', 'include_flavors'])
      prefs[k].length = 0;
    prefs.max_cortisol = null;
    onchange?.();
  }

  function when(iso) {
    try {
      return new Date(iso).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric' });
    } catch { return ''; }
  }

  let mutes = $derived([
    ...prefs.mute_topics.map((v) => ['topic', v]),
    ...prefs.mute_flavors.map((v) => ['flavor', v]),
  ]);
  let anything = $derived(prefs.avoid_terms.length || prefs.pauses.length || mutes.length);
</script>

<section class="panel rise">
  <div class="head">
    <h2>Your boundaries</h2>
    {#if onclose}<button class="close" onclick={() => onclose?.()} aria-label="close">done</button>{/if}
  </div>
  <p class="reassure">Your calm filters — kept on this device, and synced to your account when you're signed in.</p>

  <div class="group">
    <label class="label" for="avoid">Avoid words or phrases</label>
    <div class="addrow">
      <input id="avoid" type="text" bind:value={term} placeholder="a name, a condition, a topic you'd rather not meet"
             onkeydown={(e) => e.key === 'Enter' && addTerm()} />
      <button class="add" onclick={addTerm}>Add</button>
    </div>
    {#if prefs.avoid_terms.length}
      <div class="pills">
        {#each prefs.avoid_terms as t, i (t)}
          <span class="pill">{t}<button onclick={() => removeTerm(i)} aria-label={`stop avoiding ${t}`}>×</button></span>
        {/each}
      </div>
    {:else}
      <p class="empty">Anything you'd rather not see — a person, a diagnosis, a subject — goes here and is hidden everywhere.</p>
    {/if}
  </div>

  <div class="group">
    <span class="label">Paused for now</span>
    {#if prefs.pauses.length}
      <div class="pills">
        {#each prefs.pauses as p, i (p.kind + p.value + p.until)}
          <span class="pill soft">{p.value}<small> · until {when(p.until)}</small><button onclick={() => removePause(i)} aria-label="resume">×</button></span>
        {/each}
      </div>
    {:else}
      <p class="empty">Nothing paused.</p>
    {/if}
  </div>

  <div class="group">
    <span class="label">Always hidden</span>
    {#if mutes.length}
      <div class="pills">
        {#each mutes as [kind, v] (kind + v)}
          <span class="pill">{v}<button onclick={() => removeMute(kind, v)} aria-label={`show ${v} again`}>×</button></span>
        {/each}
      </div>
    {:else}
      <p class="empty">Nothing hidden.</p>
    {/if}
  </div>

  {#if anything}
    <button class="reset" onclick={reset}>Clear all boundaries</button>
  {/if}
</section>

<style>
  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin: 8px 0 18px;
  }
  .head { display: flex; align-items: baseline; justify-content: space-between; }
  .head h2 { font-size: 1.3rem; }
  .close { background: none; border: none; color: var(--accent-deep); font-size: 0.85rem; text-decoration: underline; }
  .reassure { margin: 4px 0 16px; color: var(--muted); font-size: 0.85rem; }
  .group { margin-bottom: 16px; }
  .label {
    display: block; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--muted); margin-bottom: 8px; font-weight: 600;
  }
  .addrow { display: flex; gap: 8px; }
  .addrow input {
    flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
    font-size: 0.92rem; background: var(--bg);
  }
  .addrow input:focus { outline: none; border-color: var(--accent); }
  .add { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 9px; padding: 9px 16px; font-size: 0.88rem; }
  .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--accent-soft); color: var(--accent-deep);
    border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.85rem;
  }
  .pill small { color: var(--muted); }
  .pill button { background: none; border: none; color: var(--accent-deep); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0 4px; }
  .empty { margin: 0; color: var(--muted); font-size: 0.85rem; font-style: italic; }
  .reset { background: none; border: none; color: var(--muted); font-size: 0.82rem; text-decoration: underline; margin-top: 4px; }
</style>
