// Horizontal timeline view — destinations + dated snips/goals laid out chronologically
const { useMemo: useMemoTL } = React;

function PlaybookTimeline({ playbook }) {
  const items = useMemoTL(() => {
    const all = [];
    for (const d of playbook.destinations) {
      if (d.arrival) all.push({ kind: 'arrive', date: d.arrival, label: `Arrive ${d.label}`, dest: d });
      if (d.departure) all.push({ kind: 'depart', date: d.departure, label: `Depart ${d.label}`, dest: d });
    }
    for (const s of playbook.snips) {
      if (s.when) all.push({ kind: 'snip', date: s.when, snip: s });
    }
    for (const g of playbook.goals) {
      if (g.date) all.push({ kind: 'goal', date: g.date, goal: g });
    }
    return all
      .map(x => ({ ...x, t: parseDate(x.date) }))
      .filter(x => !isNaN(x.t))
      .sort((a, b) => a.t - b.t);
  }, [playbook]);

  if (!items.length) {
    return (
      <div className="page-empty side-empty">
        <div className="empty-icon">⌖</div>
        <div className="empty-title">Timeline is empty</div>
        <div className="empty-sub">Add dates to destinations or snips to see them here.</div>
      </div>
    );
  }

  const minT = items[0].t;
  const maxT = items[items.length - 1].t;
  const span = Math.max(1, maxT - minT);

  return (
    <div className="timeline-view">
      <div className="timeline-rail">
        <div className="timeline-axis"></div>
        <div className="timeline-points">
          {items.map((it, i) => {
            const pct = ((it.t - minT) / span) * 100;
            const cat = it.kind === 'snip' ? window.snipCategoryById(it.snip.type) : null;
            const color = cat?.color || (it.kind === 'arrive' ? '#7fb6d9' : it.kind === 'depart' ? '#d99a8c' : '#e5c07b');
            return (
              <div key={i} className={`timeline-pt ${it.kind} ${i % 2 === 0 ? 'above' : 'below'}`}
                style={{ left: `${pct}%`, '--c': color }}>
                <div className="timeline-pt-dot"></div>
                <div className="timeline-pt-stem"></div>
                <div className="timeline-pt-card">
                  <div className="timeline-pt-date">{formatDate(it.t)}</div>
                  <div className="timeline-pt-label">
                    {it.kind === 'arrive' && `→ ${it.dest.label}`}
                    {it.kind === 'depart' && `${it.dest.label} →`}
                    {it.kind === 'snip' && (<><span className="timeline-pt-icon" style={{ color: cat.color }}>{cat.icon}</span> {it.snip.title}</>)}
                    {it.kind === 'goal' && (<>★ {it.goal.text}</>)}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="timeline-scale">
        <span>{formatDate(minT)}</span>
        <span>{formatDate(maxT)}</span>
      </div>
    </div>
  );
}

function parseDate(s) {
  if (!s) return NaN;
  // accepts YYYY-MM-DD, YYYY-MM, ISO
  const d = new Date(s.length === 7 ? s + '-01' : s);
  return d.getTime();
}
function formatDate(t) {
  const d = new Date(t);
  return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
}

window.PlaybookTimeline = PlaybookTimeline;