// ─── 릴리즈 노트 시트 ─────────────────────────
function ReleaseNotesSheet({ onClose }) {
  const [sections, setSections] = React.useState(null);

  React.useEffect(() => {
    fetch('/RELEASE_NOTES.md')
      .then(r => r.text())
      .then(text => setSections(parseReleaseNotes(text)))
      .catch(() => setSections([]));
  }, []);

  return (
    <BottomSheet onClose={onClose}>
      <div style={appStyles.sheetHeader}>
        <div style={appStyles.sheetMeta}>앱 정보</div>
        <div style={{ ...appStyles.nameText, fontSize: 18 }}>릴리즈 노트</div>
        <div style={appStyles.subMeta}>버전별 업데이트 내역을 확인합니다.</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {sections === null && (
          <div style={{ color: '#8E8B82', fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
            불러오는 중…
          </div>
        )}
        {sections && sections.length === 0 && (
          <div style={{ color: '#8E8B82', fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
            릴리즈 노트를 불러올 수 없습니다.
          </div>
        )}
        {sections && sections.map((sec, i) => (
          <div key={i} style={{
            background: '#FFFFFF', border: '1px solid #E4E2DA',
            borderRadius: 12, overflow: 'hidden',
          }}>
            <div style={{
              padding: '12px 16px', borderBottom: '1px solid #F0EDE6',
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <i data-lucide="tag" style={{ width: 14, height: 14, color: '#2F7D4F', flexShrink: 0 }}></i>
              <span style={{ fontSize: 13, fontWeight: 700, color: '#2F7D4F' }}>{sec.version}</span>
            </div>
            <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {sec.groups.map((g, j) => (
                <div key={j}>
                  <div style={{
                    fontSize: 11, fontWeight: 700, color: '#8E8B82',
                    letterSpacing: '0.05em', textTransform: 'uppercase',
                    marginBottom: 6,
                  }}>
                    {g.heading}
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
                    {g.items.map((item, k) => (
                      <div key={k} style={{ display: 'flex', gap: 8, fontSize: 13, lineHeight: 1.55, color: '#1A1814' }}>
                        <span style={{ color: '#2F7D4F', flexShrink: 0, marginTop: 1 }}>•</span>
                        <span dangerouslySetInnerHTML={{ __html: item }} />
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <button style={appStyles.closeBtn} onClick={onClose}>닫기</button>
    </BottomSheet>
  );
}

function parseReleaseNotes(text) {
  const lines = text.split('\n');
  const sections = [];
  let current = null;
  let currentGroup = null;

  for (const raw of lines) {
    const line = raw.trimEnd();
    if (line.startsWith('## ')) {
      if (current) sections.push(current);
      current = { version: line.slice(3).trim(), groups: [] };
      currentGroup = null;
    } else if (line.startsWith('### ') && current) {
      currentGroup = { heading: line.slice(4).trim(), items: [] };
      current.groups.push(currentGroup);
    } else if (line.startsWith('- ') && currentGroup) {
      const content = line.slice(2).trim()
        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
      currentGroup.items.push(content);
    }
  }
  if (current) sections.push(current);
  return sections;
}