// Zukan (collection) screen — variant-styled.
function ZukanScreen({ variant, entries, onOpen, onClose, onClear }) {
  const headers = {
    museum: { title: '収蔵目録', sub: 'Collection', count: entries.length },
    notebook: { title: 'なぜなに帳', sub: 'Field Notes', count: entries.length },
    encyclopedia: { title: '索引', sub: 'Index', count: entries.length },
  };
  const accent = variant === 'museum' ? '#8b2920' : variant === 'notebook' ? '#5a6b4a' : '#1e3a5f';
  const h = headers[variant];

  return (
    <div style={{
      position: 'absolute', inset: 0, background: '#f4ecdc',
      overflowY: 'auto', WebkitOverflowScrolling: 'touch',
      fontFamily: '"Noto Serif JP", serif', color: '#1a1612',
    }}>
      <StickyHeader variant={variant} onClose={onClose}/>

      <div style={{ padding: '14px 20px 40px' }}>
        {/* Header */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          paddingBottom: 10, marginBottom: 18,
          borderBottom: variant === 'encyclopedia' ? '2px double #1a1612' : '1px solid #1a1612',
        }}>
          <div>
            <div style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: 3,
              color: accent, marginBottom: 2,
            }}>{h.sub.toUpperCase()}</div>
            <div style={{ fontSize: 30, fontWeight: 500, letterSpacing: 2, lineHeight: 1 }}>
              {h.title}
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: 2,
              color: '#6b5a3a',
            }}>TOTAL</div>
            <div style={{
              fontSize: 28, fontWeight: 600, letterSpacing: 1,
              fontFamily: '"Noto Serif JP", serif',
            }}>{String(h.count).padStart(3, '0')}</div>
          </div>
        </div>

        {/* Entries */}
        {entries.length === 0 ? (
          <div style={{
            padding: '60px 20px', textAlign: 'center', color: '#6b5a3a',
            fontSize: 13, lineHeight: 2,
          }}>
            まだ記録がありません。<br/>
            気になるものを撮ってみよう。
          </div>
        ) : variant === 'encyclopedia' ? (
          <ZukanIndex entries={entries} onOpen={onOpen} accent={accent}/>
        ) : variant === 'museum' ? (
          <ZukanCatalog entries={entries} onOpen={onOpen} accent={accent}/>
        ) : (
          <ZukanScrapbook entries={entries} onOpen={onOpen}/>
        )}

        {entries.length > 0 && (
          <button onClick={onClear} style={{
            marginTop: 28, background: 'none', border: `0.5px solid ${accent}`,
            color: accent, padding: '8px 16px',
            fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: 2,
            cursor: 'pointer',
          }}>すべて消去</button>
        )}
      </div>
    </div>
  );
}

// Museum-style grid of catalog cards
function ZukanCatalog({ entries, onOpen, accent }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      {entries.map(e => (
        <button key={e.id} onClick={() => onOpen(e)} style={{
          background: '#f9f3e2', border: '0.5px solid #1a1612', padding: 8,
          textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit',
        }}>
          <div style={{
            background: '#f4ecdc', border: '0.5px dashed #6b5a3a',
            height: 110, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <SubjectIllustration which={e.subject.thumb} size={100}/>
          </div>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 8, letterSpacing: 1.5,
            color: accent, marginTop: 6,
          }}>№ {e.subject.catalogNo}</div>
          <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: 1 }}>
            {e.subject.name}
          </div>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 8, letterSpacing: 1,
            color: '#6b5a3a', marginTop: 1,
          }}>{e.date}</div>
        </button>
      ))}
    </div>
  );
}

// Encyclopedia-style alphabetical index list
function ZukanIndex({ entries, onOpen, accent }) {
  const sorted = [...entries].sort((a, b) => a.subject.reading.localeCompare(b.subject.reading));
  return (
    <div>
      {sorted.map((e, i) => (
        <button key={e.id} onClick={() => onOpen(e)} style={{
          display: 'flex', width: '100%', alignItems: 'center', gap: 12,
          padding: '12px 0', borderBottom: '0.5px dotted #1a1612',
          background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
          fontFamily: 'inherit',
        }}>
          <div style={{
            width: 36, height: 36, flexShrink: 0, overflow: 'hidden',
            border: '0.5px solid #1a1612',
          }}>
            <SubjectIllustration which={e.subject.thumb} size={36}/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontSize: 15, fontWeight: 500, letterSpacing: 1,
            }}>{e.subject.name}</div>
            <div style={{
              fontSize: 10, color: '#5a4818',
              fontFamily: 'ui-monospace, monospace', letterSpacing: 1,
            }}>{e.subject.reading} · {e.subject.category}</div>
          </div>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: 1,
            color: accent,
          }}>p. 0{Math.abs(e.subject.catalogNo.length * 7) % 900}</div>
        </button>
      ))}
    </div>
  );
}

// Notebook-style scattered polaroids
function ZukanScrapbook({ entries, onOpen }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, paddingTop: 8 }}>
      {entries.map((e, i) => {
        const rot = (i % 2 ? 1 : -1) * (1 + (i % 3) * 0.6);
        const tints = ['#fff8c4', '#c9e0c4', '#fdd6c4', '#c4dde8', '#fff'];
        return (
          <button key={e.id} onClick={() => onOpen(e)} style={{
            background: '#fff', padding: 8, paddingBottom: 26,
            transform: `rotate(${rot}deg)`,
            boxShadow: '2px 3px 0 rgba(0,0,0,0.15)', cursor: 'pointer',
            border: 'none', textAlign: 'center', fontFamily: 'inherit',
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: -8, right: 14, width: 36, height: 14,
              background: tints[i % tints.length] + 'cc',
              transform: `rotate(${-rot * 2}deg)`,
            }}/>
            <SubjectIllustration which={e.subject.thumb} size={110}/>
            <div style={{
              fontFamily: '"Kosugi Maru", sans-serif', fontSize: 13,
              fontWeight: 700, marginTop: 6, color: '#1a1612',
            }}>{e.subject.name}</div>
            <div style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 9,
              color: '#5a6b4a', letterSpacing: 1, marginTop: 2,
            }}>{e.date}</div>
          </button>
        );
      })}
    </div>
  );
}

window.ZukanScreen = ZukanScreen;