import { imgUrl } from '../../api.js';
import { BY_CODE, countryName, fmtRange } from './laender.js';

// Zeitleiste "Wann war ich wo?": alle Besuche, neueste zuerst, nach Jahren gruppiert
export default function Timeline({ visits, cities, onSelectCity, onEdit, onPhoto }) {
  if (!visits.length) {
    return <p className="hint travel-empty">Noch keine Besuche. Klick auf eine Stadt und dann auf „+ Besuch eintragen“.</p>;
  }
  const byId = new Map(cities.map((c) => [c.id, c]));
  const years = [];
  for (const v of visits) {
    const year = v.dateFrom.slice(0, 4);
    if (years.at(-1)?.year !== year) years.push({ year, visits: [] });
    years.at(-1).visits.push(v);
  }
  return (
    <div className="timeline-travel">
      {years.map((y) => (
        <section key={y.year} aria-labelledby={`jahr-${y.year}`}>
          <h2 className="section-title" id={`jahr-${y.year}`}>{y.year}</h2>
          <ol>
            {y.visits.map((v) => {
              const city = byId.get(v.cityId);
              if (!city) return null;
              return (
                <li key={v.id} className="timeline-entry">
                  <span className="timeline-date">{fmtRange(v.dateFrom, v.dateTo)}</span>
                  <div className="timeline-body">
                    <button type="button" className="timeline-city" onClick={() => onSelectCity(city)}>
                      {BY_CODE.get(city.country)?.flag} {city.name}
                      <small> {countryName(city.country)}</small>
                    </button>
                    {v.companions && <span className="hint">mit {v.companions}</span>}
                    {v.notes && <p className="timeline-notes">{v.notes}</p>}
                    {v.photos.length > 0 && (
                      <ul className="visit-photos small">
                        {v.photos.map((p) => (
                          <li key={p}>
                            <button type="button" onClick={() => onPhoto(imgUrl(p))} aria-label="Foto vergrößern">
                              <img src={imgUrl(p)} alt="" loading="lazy" />
                            </button>
                          </li>
                        ))}
                      </ul>
                    )}
                  </div>
                  <button className="link-btn" type="button" onClick={() => onEdit(city, v)} aria-label={`Besuch in ${city.name} bearbeiten`}>✎</button>
                </li>
              );
            })}
          </ol>
        </section>
      ))}
    </div>
  );
}