// The Suitcase (/suitcase) — saved properties as a private index.
const { useState: useStateSc, useEffect: useEffectSc } = React;

function SuitcasePage() {
  const [ids, setIds] = useStateSc(() => window.getSaved());
  useEffectSc(() => {
    const h = () => setIds(window.getSaved());
    window.addEventListener('lh_saved_change', h);
    return () => window.removeEventListener('lh_saved_change', h);
  }, []);

  const saved = window.PROPERTIES
    .filter(p => ids.includes(p.id))
    .sort((a, b) => a.rank - b.rank);

  return (
    <div data-screen-label="06 Suitcase">
      <ChapterOpener eyebrow="Your reading list" title="The Suitcase.">
        <p className="prose" style={{ margin: 0, fontSize: 19 }}>
          Properties you've marked while reading, kept in rank order. Saved on
          this device only — no account, no sync, no one watching.
        </p>
      </ChapterOpener>

      <section className="container" style={{ paddingTop: 64 }}>
        {saved.length > 0 ? (
          <div style={{ borderTop: '1px solid var(--ink)' }}>
            {saved.map(p => <IndexRow key={p.id} p={p} />)}
          </div>
        ) : (
          <div style={{ padding: '96px 0', textAlign: 'center' }}>
            <p className="display-s" style={{ margin: 0 }}>Empty, for now.</p>
            <p className="prose" style={{ margin: '20px auto 0', fontSize: 16, color: 'var(--folio)', maxWidth: '44ch' }}>
              The small □ on any entry or review adds it here.
            </p>
            <a href="#/100" className="utility link" style={{ display: 'inline-block', marginTop: 28, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              Start with the 100
            </a>
          </div>
        )}
      </section>
    </div>
  );
}

Object.assign(window, { SuitcasePage });