// js/view/lazy-load.js
const observer = new IntersectionObserver((entries, obs) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;           // we only care about the ones COMING IN

    const card = entry.target;
    loadTaskDetail(card.dataset.id);               // request the expensive stuff only now
    obs.unobserve(card);                           // ← no need to watch it any more
  }
}, {
  root: null,          // null = the viewport; it can also be a scrolling container
  rootMargin: '200px', // starts loading 200 px BEFORE it is visible: it feels instant
  threshold: 0.1       // 10 % of the element being visible is enough
});

document.querySelectorAll('.task[data-id]').forEach((t) => observer.observe(t));

entry.isIntersecting     // true if it is visible according to the threshold
entry.intersectionRatio  // 0 to 1: what proportion is visible
entry.target             // the observed element
entry.boundingClientRect // its geometry, without forcing a recalculation
entry.time               // timestamp

// A · Infinite scroll: load the next page when the sentinel is reached
const sentinel = document.querySelector('#end-of-list');
new IntersectionObserver(([e]) => { if (e.isIntersecting) loadNextPage(); })
  .observe(sentinel);

// B · Animate on appearance (respecting the user's preference, section 8)
new IntersectionObserver((entries) => {
  for (const e of entries) e.target.classList.toggle('visible', e.isIntersecting);
}, { threshold: 0.25 }).observe(section);

// C · A header that sticks on scroll, without listening for 'scroll'
new IntersectionObserver(([e]) => header.classList.toggle('stuck', !e.isIntersecting))
  .observe(document.querySelector('#top-sentinel'));

const watcher = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      console.log(`+${mutation.addedNodes.length} −${mutation.removedNodes.length} cards`);
    }
    if (mutation.type === 'attributes' && mutation.attributeName === 'data-status') {
      console.log('The card changed column:', mutation.target.dataset.id);
    }
  }
});

watcher.observe(document.querySelector('#task-list'), {
  childList: true, subtree: true, attributes: true, attributeFilter: ['data-status']
});

const sizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const width = entry.contentRect.width;
    // Compact columns when the board is narrow, without depending on the window width
    entry.target.classList.toggle('column--compact', width < 320);
  }
});

document.querySelectorAll('.column').forEach((c) => sizeObserver.observe(c));

// Query without asking for anything (not every API supports it)
const status = await navigator.permissions.query({ name: 'geolocation' });
console.log(status.state);          // 'granted' | 'denied' | 'prompt'

status.addEventListener('change', () => console.log('Changed to', status.state));

/** The right pattern: explain, ask inside a gesture, and accept the no. */
async function enableAlerts() {
  if (Notification.permission === 'denied') {
    showHelp('You have blocked notifications. You can re-enable them from the padlock in the address bar.');
    return false;
  }
  if (Notification.permission === 'granted') return true;

  const accepts = await showOwnDialog({
    title: 'Due-date alerts',
    text: 'We will let you know when a workshop task is about to fall due. Nothing else.'
  });
  if (!accepts) return false;                      // we do not even get as far as asking the browser

  return (await Notification.requestPermission()) === 'granted';
}

// 1 · Current state, without asking for anything
console.log(Notification.permission);      // 'default' | 'granted' | 'denied'

// 2 · Ask for permission (only inside a user gesture)
const result = await Notification.requestPermission();

// 3 · Show it
if (result === 'granted') {
  const notice = new Notification('Nómada Tasks', {
    body: '"Carpentry workshop quote" is due today.',
    icon: '/icons/icon-192.png',
    badge: '/icons/badge.png',
    tag: 'due-6',                          // ← same tag = replaces, does not pile up
    requireInteraction: false,
    silent: false
  });

  notice.addEventListener('click', () => {
    window.focus();
    document.querySelector('[data-id="6"]')?.scrollIntoView({ behavior: 'smooth' });
    notice.close();
  });
}

// js/view/alerts.js
export function notifyOverdue(board, today) {
  if (Notification.permission !== 'granted') return;      // no permission, absolute silence

  const critical = board.filter((t) => t.isOpen && t.daysLeft <= 0);
  if (critical.length === 0) return;

  const notice = new Notification('Nómada Tasks', {
    body: critical.length === 1
      ? `"${critical[0].title}" is overdue.`
      : `${critical.length} tasks are overdue.`,
    icon: '/icons/icon-192.png',
    tag: 'overdue'                                        // always the same: they never pile up
  });
  notice.addEventListener('click', () => { window.focus(); notice.close(); });
}

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude, accuracy } = position.coords;
      console.log(`You are within ${accuracy} m of ${latitude}, ${longitude}`);
    },
    (error) => {
      const reasons = {
        1: 'Permission denied',
        2: 'Position unavailable',
        3: 'Timed out'
      };
      console.warn(reasons[error.code] ?? error.message);
    },
    { enableHighAccuracy: false, timeout: 8000, maximumAge: 300000 }
  );
}

const currentPosition = (options) => new Promise((resolve, reject) =>
  navigator.geolocation.getCurrentPosition(resolve, reject, options)
);

try {
  const { coords } = await currentPosition({ timeout: 8000 });
} catch (error) {
  if (error.code === 1) show('We need your location to clock in at the workshop.');
}

// js/view/clipboard.js
export async function copySummary(board, today) {
  const r = board.summary(today);
  const text = [
    `Taller Nómada — summary for ${today}`,
    `Tasks: ${r.total} (${r.open} open)`,
    `Hours: ${r.totalHours} total, ${r.openHours} open`,
    `Overdue: ${r.overdue}`,
    `Weighted effort: ${r.effort}`
  ].join('\n');

  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (error) {
    console.warn('[nomada] Could not copy:', error);
    return false;
  }
}

// It must be called from a user GESTURE, not from a timer
$('#copy-summary').addEventListener('click', async () => {
  const copied = await copySummary(board, TODAY);
  $('#copy-notice').textContent = copied
    ? 'Summary copied to the clipboard.'
    : 'Could not copy. Select the text and use Ctrl+C.';
  $('#copy-notice').hidden = false;              // with role="status" so it is announced
});

// js/view/router.js
import { EVENTS, emit } from './events.js';

/** Reads the view state from the current URL. */
export function readStateFromUrl() {
  const p = new URLSearchParams(location.search);
  return {
    assignee: p.get('assignee'),                          // null if not present
    text: p.get('q') ?? '',
    sort: p.get('sort') ?? 'priority',
    status: p.get('status')
  };
}

/** Writes the state into the URL. `replace` avoids filling the history. */
export function writeStateToUrl(state, { replace = false } = {}) {
  const p = new URLSearchParams();
  if (state.assignee) p.set('assignee', state.assignee);
  if (state.text) p.set('q', state.text);
  if (state.sort && state.sort !== 'priority') p.set('sort', state.sort);
  if (state.status) p.set('status', state.status);

  const url = p.toString() ? `${location.pathname}?${p}` : location.pathname;
  const method = replace ? 'replaceState' : 'pushState';

  history[method](state, '', url);                        // ← the first argument comes back in popstate
}

/** The user pressed back or forward. */
window.addEventListener('popstate', (event) => {
  const state = event.state ?? readStateFromUrl();        // ← careful: state can be null
  emit(document, EVENTS.FILTER_APPLIED, state);
});

// js/app.js
// 1 · At startup, the URL rules
view.update({ filters: readStateFromUrl() });

// 2 · Every filter change is reflected in the URL
document.addEventListener(EVENTS.FILTER_APPLIED, (event) => {
  view.update({ filters: event.detail });
  writeStateToUrl(event.detail, { replace: event.detail.source === 'keyboard' });
});

const dark = window.matchMedia('(prefers-color-scheme: dark)');

console.log(dark.matches);                    // true if the system is in dark mode

dark.addEventListener('change', (event) => {  // ← reacts if the user changes it on the fly
  applyTheme(event.matches ? 'dark' : 'light');
});

// js/view/system-preferences.js
export const PREFERENCES = {
  darkTheme:     window.matchMedia('(prefers-color-scheme: dark)'),
  reducedMotion: window.matchMedia('(prefers-reduced-motion: reduce)'),
  wideScreen:    window.matchMedia('(min-width: 900px)')
};

/** Applies the theme: the stored preference (07-01) wins over the system one. */
export function applyTheme() {
  const stored = readPreferences().theme;                      // 'light' | 'dark' | 'system'
  const effective = stored === 'system'
    ? (PREFERENCES.darkTheme.matches ? 'dark' : 'light')
    : stored;

  document.documentElement.dataset.theme = effective;          // the CSS does the rest
  document.querySelector('meta[name="theme-color"]')
    ?.setAttribute('content', effective === 'dark' ? '#1b1f1e' : '#2b6b5b');
}

/** Moving a card to another column: with animation, or without it if the user avoids motion. */
export function moveCard(card, target) {
  if (PREFERENCES.reducedMotion.matches) {
    target.append(card);                                       // instant, no transition
    return;
  }
  card.animate(
    [{ opacity: 0, transform: 'translateY(-8px)' }, { opacity: 1, transform: 'none' }],
    { duration: 180, easing: 'ease-out' }
  );
  target.append(card);
}

// js/view/share.js
export async function shareBoard(board, today) {
  const data = {
    title: 'Nómada Tasks',
    text: `Workshop board: ${board.summary(today).open} open tasks.`,
    url: location.href                          // ← includes the filters, thanks to section 7
  };

  // 1 · Native sharing, if it exists (mostly on mobile)
  if (navigator.canShare?.(data)) {
    try {
      await navigator.share(data);
      return 'shared';
    } catch (error) {
      if (error.name === 'AbortError') return 'canceled';      // the user closed the dialog
      console.warn('[nomada] Failed to share:', error);
    }
  }

  // 2 · Fallback: copy the link to the clipboard (section 6)
  await navigator.clipboard.writeText(location.href);
  return 'copied';
}

// ✗ With setTimeout: "roughly" 60 fps, out of sync with painting
function animateBadly(element) {
  let x = 0;
  const id = setInterval(() => {
    x += 2;
    element.style.transform = `translateX(${x}px)`;
    if (x >= 200) clearInterval(id);
  }, 16);
}

// ✓ With requestAnimationFrame: the browser decides the exact moment before painting
function animateWell(element) {
  let start = null;

  function step(timestamp) {                    // timestamp = high-precision ms, given by the browser
    start ??= timestamp;
    const elapsed = timestamp - start;
    const progress = Math.min(elapsed / 300, 1);            // 300 ms duration

    element.style.transform = `translateX(${progress * 200}px)`;

    if (progress < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

// ✗ The hand-written array of months: English only, no alternative formats, and yours to maintain
export function readableDate(iso) {
  const MONTHS = ['January', 'February', 'March', /* … */];
  const [year, month, day] = iso.split('-');
  return `${Number(day)} ${MONTHS[Number(month) - 1]} ${year}`;
}

const date = new Date('2026-09-05T00:00:00');

new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(date);
// '5 September 2026'

new Intl.DateTimeFormat('en-GB', { dateStyle: 'short' }).format(date);
// '05/09/2026'

new Intl.DateTimeFormat('en-GB', { weekday: 'long', day: 'numeric', month: 'long' }).format(date);
// 'Saturday 5 September'

new Intl.DateTimeFormat('en-GB', { dateStyle: 'medium', timeStyle: 'short' }).format(new Date());
// '20 Sept 2026, 10:14'

new Intl.NumberFormat('en-GB').format(1234.5);                             // '1,234.5'
new Intl.NumberFormat('en-GB', { minimumFractionDigits: 1 }).format(48);   // '48.0'

new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'EUR' }).format(1250);
// '€1,250.00'

new Intl.NumberFormat('en-GB', { style: 'percent', maximumFractionDigits: 0 }).format(0.9375);
// '94%'

new Intl.NumberFormat('en-GB', { style: 'unit', unit: 'hour', unitDisplay: 'long' }).format(12);
// '12 hours'

const relative = new Intl.RelativeTimeFormat('en-GB', { numeric: 'auto' });

relative.format(-15, 'day');   // '15 days ago'   ← task 6, overdue
relative.format(10, 'day');    // 'in 10 days'
relative.format(-1, 'day');    // 'yesterday'     ← thanks to numeric: 'auto'
relative.format(0, 'day');     // 'today'
relative.format(1, 'day');     // 'tomorrow'
relative.format(2, 'week');    // 'in 2 weeks'

const labels = ['Ávila', 'Zurbarán', 'archive', 'Barcelona', 'ñu', 'note'];

console.log([...labels].sort());
// ['Barcelona', 'Zurbarán', 'archive', 'note', 'Ávila', 'ñu']   ← a disaster

const collator = new Intl.Collator('en', { sensitivity: 'base', numeric: true });
console.log([...labels].sort(collator.compare));
// ['archive', 'Ávila', 'Barcelona', 'note', 'ñu', 'Zurbarán']   ← correct

new Intl.ListFormat('en-GB', { style: 'long', type: 'conjunction' })
  .format(['Marta', 'Iván', 'Lucía']);
// 'Marta, Iván and Lucía'   ← the final 'and', free

const plural = new Intl.PluralRules('en-GB');
plural.select(1);    // 'one'
plural.select(0);    // 'other'
plural.select(5);    // 'other'

// ✗ Creates a formatter per card, on every render
tasks.map((t) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(t.dueDate));

// ✓ A single one, reused
const LONG_DATE = new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' });
tasks.map((t) => LONG_DATE.format(new Date(t.dueDate)));

// js/util/format.js — rewritten with Intl
const LOCALE = 'en-GB';

// Formatters created ONCE: creating them is expensive
const LONG_DATE  = new Intl.DateTimeFormat(LOCALE, { dateStyle: 'long' });
const SHORT_DATE = new Intl.DateTimeFormat(LOCALE, { day: 'numeric', month: 'short' });
const DATE_TIME  = new Intl.DateTimeFormat(LOCALE, { dateStyle: 'medium', timeStyle: 'short' });
const RELATIVE   = new Intl.RelativeTimeFormat(LOCALE, { numeric: 'auto' });
const NUMBER     = new Intl.NumberFormat(LOCALE, { maximumFractionDigits: 1 });
const HOURS      = new Intl.NumberFormat(LOCALE, { style: 'unit', unit: 'hour', unitDisplay: 'long' });
const PERCENT    = new Intl.NumberFormat(LOCALE, { style: 'percent', maximumFractionDigits: 0 });
const LIST       = new Intl.ListFormat(LOCALE, { style: 'long', type: 'conjunction' });
const COLLATOR   = new Intl.Collator(LOCALE, { sensitivity: 'base', numeric: true });

export const BADGES  = Object.freeze({ pending: '○', 'in-progress': '▸', done: '✓' });
export const WEIGHTS = Object.freeze({ high: 3, medium: 2, low: 1 });

export function statusBadge(status) {
  return BADGES[status] ?? '?';
}

/** '2026-09-05' → '5 September 2026' */
export function readableDate(iso) {
  return LONG_DATE.format(new Date(`${iso}T00:00:00`));
}

/** '2026-09-05' → '5 Sept' — for the cards, where space is tight */
export function shortDate(iso) {
  return SHORT_DATE.format(new Date(`${iso}T00:00:00`));
}

/** -15 → '15 days ago' · 0 → 'today' · 1 → 'tomorrow' */
export function readableDays(days) {
  if (Math.abs(days) >= 14) return RELATIVE.format(Math.round(days / 7), 'week');
  return RELATIVE.format(days, 'day');
}

/** 12 → '12 hours' · 1 → '1 hour' — without the hand-written plural() */
export function readableHours(hours) {
  return HOURS.format(hours);
}

export function number(value) {
  return NUMBER.format(value);
}

/** 0.9375 → '94%' */
export function percentage(fraction) {
  return PERCENT.format(fraction);
}

/** ['Marta','Iván','Lucía'] → 'Marta, Iván and Lucía' */
export function formatList(items) {
  return LIST.format(items);
}

/** Comparator for sort(): respects accents, ñ and numbers inside the text */
export const compareText = COLLATOR.compare;

// js/view/card.js (excerpt)
import { shortDate, readableDays, readableHours } from '../util/format.js';

const footer = buildElement('p', { class: 'task__footer' });
footer.textContent = `${shortDate(task.dueDate)} · ${readableDays(task.daysLeft)} · ${readableHours(task.estimatedHours)}`;
// '5 Sept · 15 days ago · 5 hours'   ← task 6, overdue (R10)

// js/view/board-view.js — sorting by title, correctly
import { compareText } from '../util/format.js';

const SORTS = {
  priority: (a, b) => WEIGHTS[b.priority] - WEIGHTS[a.priority],
  date:     (a, b) => a.dueDate.localeCompare(b.dueDate),
  title:    (a, b) => compareText(a.title, b.title)            // ← Intl.Collator
};

// ✓ Check the feature
if ('share' in navigator)              { /* … */ }
if ('IntersectionObserver' in window)  { /* … */ }
if ('clipboard' in navigator)          { /* … */ }
if ('serviceWorker' in navigator)      { /* … */ }
if (typeof Intl?.RelativeTimeFormat === 'function') { /* … */ }

// Optional chaining for specific methods
navigator.canShare?.(data);
registration.sync?.register('send');

// ✗ Never detect the browser by its identification string
if (navigator.userAgent.includes('Chrome')) { /* … */ }   // fragile, dishonest and obsolete

export function copyLink(url) {
  // Layer 1 · The best one: the modern API
  if (navigator.clipboard?.writeText) {
    return navigator.clipboard.writeText(url).then(() => 'copied');
  }
  // Layer 2 · The old fallback
  const field = Object.assign(document.createElement('textarea'), { value: url });
  document.body.append(field);
  field.select();
  const ok = document.execCommand?.('copy');            // deprecated, but it still works
  field.remove();
  if (ok) return Promise.resolve('copied');

  // Layer 3 · Let the user do it by hand
  return Promise.resolve('manual');
}

// js/view/router.js
import { EVENTS, emit } from './events.js';

const DEFAULTS = Object.freeze({ assignee: null, text: '', sort: 'priority', status: null });

export function readStateFromUrl(url = location.href) {
  const p = new URL(url).searchParams;
  return {
    assignee: p.get('assignee'),
    text: p.get('q') ?? '',
    sort: p.get('sort') ?? DEFAULTS.sort,
    status: p.get('status')
  };
}

export function writeStateToUrl(state, { replace = false } = {}) {
  const p = new URLSearchParams();
  // Only what differs from the default value: clean URLs
  if (state.assignee) p.set('assignee', state.assignee);
  if (state.text) p.set('q', state.text);
  if (state.sort !== DEFAULTS.sort) p.set('sort', state.sort);
  if (state.status) p.set('status', state.status);

  const query = p.toString();
  const url = query ? `${location.pathname}?${query}` : location.pathname;

  if (url === location.pathname + location.search) return;      // nothing to change
  history[replace ? 'replaceState' : 'pushState']({ ...state }, '', url);
}

export function connectRouter(view, { signal } = {}) {
  view.update({ filters: readStateFromUrl() });                 // 1 · the URL rules at startup

  document.addEventListener(EVENTS.FILTER_APPLIED, (event) => {
    const { source, ...filters } = event.detail;
    view.update({ filters });
    writeStateToUrl(filters, { replace: source === 'text' });    // 2 · reflect it
  }, { signal });

  window.addEventListener('popstate', (event) => {              // 3 · back / forward
    const state = event.state ?? readStateFromUrl();
    view.update({ filters: state });
  }, { signal });
}

document.querySelector('#copy-link').addEventListener('click', async () => {
  const notice = document.querySelector('#copy-notice');        // role="status" aria-live="polite"
  try {
    await navigator.clipboard.writeText(location.href);
    notice.textContent = 'Link to this view copied.';
  } catch {
    notice.textContent = 'Could not copy. The link is in the address bar.';
  }
  notice.hidden = false;
}, { signal });

// js/view/theme.js
const KEY = 'nomada:theme';
const QUERY = window.matchMedia('(prefers-color-scheme: dark)');

const readPreference  = () => localStorage.getItem(KEY) ?? 'system';
const effectiveTheme = (pref) => (pref === 'system' ? (QUERY.matches ? 'dark' : 'light') : pref);

const COLORS = Object.freeze({ light: '#2b6b5b', dark: '#1b1f1e' });

export function applyTheme(preference = readPreference()) {
  const effective = effectiveTheme(preference);
  document.documentElement.dataset.theme = effective;
  document.querySelector('meta[name="theme-color"]')?.setAttribute('content', COLORS[effective]);
  return effective;
}

export function connectThemeSelector(selector, { signal } = {}) {
  selector.value = readPreference();

  selector.addEventListener('change', () => {
    const chosen = selector.value;
    try { localStorage.setItem(KEY, chosen); } catch { /* private mode: it does not persist */ }
    applyTheme(chosen);
  }, { signal });

  // Only when the preference is 'system' does what the system does matter
  QUERY.addEventListener('change', () => {
    if (readPreference() === 'system') applyTheme('system');
  }, { signal });

  applyTheme();
}

<!-- In <head>, BEFORE the CSS: avoids the flash of the wrong theme -->
<script>
  (function () {
    var pref = localStorage.getItem('nomada:theme') || 'system';
    var dark = pref === 'dark' ||
      (pref === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
    document.documentElement.dataset.theme = dark ? 'dark' : 'light';
  })();
</script>

// js/view/summary.js
import { readableDate, readableDays, number, percentage, formatList, compareText, readableHours }
  from '../util/format.js';

export function readableSummary(board, today) {
  const r = board.summary(today);
  const completed = r.total === 0 ? 0 : (r.total - r.open) / r.total;

  // Open hours per assignee, sorted by name with the Collator
  const byAssignee = new Map();
  for (const task of board.filter((t) => t.isOpen)) {
    const who = task.assignee ?? 'Unassigned';
    byAssignee.set(who, (byAssignee.get(who) ?? 0) + task.estimatedHours);
  }
  const breakdown = [...byAssignee.entries()]
    .sort((a, b) => compareText(a[0], b[0]))
    .map(([who, hours]) => `  · ${who}: ${readableHours(hours)}`);

  const team = formatList([...byAssignee.keys()].sort(compareText));

  const overdue = board
    .filter((t) => t.isOpen && t.daysLeft < 0)
    .map((t) => `  ! ${t.title} — was due ${readableDays(t.daysLeft)}`);

  return [
    `Taller Nómada — ${readableDate(today)}`,
    '',
    `Tasks: ${number(r.total)} (${number(r.open)} open, ${percentage(completed)} completed)`,
    `Hours: ${readableHours(r.totalHours)} total · ${readableHours(r.openHours)} open`,
    `Weighted effort: ${number(r.effort)}`,
    '',
    `Team: ${team}`,
    ...breakdown,
    ...(overdue.length ? ['', `Overdue (${overdue.length}):`, ...overdue] : [])
  ].join('\n');
}

export async function copySummary(board, today, notice) {
  try {
    await navigator.clipboard.writeText(readableSummary(board, today));
    notice.textContent = 'Summary copied to the clipboard.';
  } catch {
    notice.textContent = 'Could not copy. Select the text and use Ctrl+C.';
  }
  notice.hidden = false;
}

Taller Nómada — 20 September 2026

Tasks: 6 (5 open, 17% completed)
Hours: 48 hours total · 45 hours open
Weighted effort: 124

Team: Iván, Lucía and Marta
  · Iván: 25 hours
  · Lucía: 14 hours
  · Marta: 6 hours

Overdue (1):
  ! Carpentry workshop quote — was due 15 days ago