// ─── 공유: JSON 내보내기 / 불러오기 ──────────
function ShareSheet({ coloredCount, lastSyncedAt, onExport, onImport, onClose }) {
  const fileRef = useRef(null);

  return (
    <BottomSheet onClose={onClose}>
      <div style={appStyles.sheetHeader}>
        <div style={appStyles.sheetMeta}>공유</div>
        <div style={{ ...appStyles.nameText, fontSize: 18 }}>JSON 파일로 동기화</div>
        <div style={appStyles.subMeta}>
          현재 색상·이름·표시방식을 JSON 한 파일로 주고받습니다.
          카카오톡·이메일·드라이브로 공유 후 다른 사람이 불러오면 동일한 상태가 됩니다.
        </div>
      </div>

      <div style={appStyles.statRow}>
        <div style={appStyles.statBlock}>
          <div style={appStyles.statValue}>{coloredCount}</div>
          <div style={appStyles.statLabel}>지정된 지번</div>
        </div>
        <div style={appStyles.statBlock}>
          <div style={{ ...appStyles.statValue, fontSize: 14 }}>
            {lastSyncedAt
              ? lastSyncedAt.toLocaleTimeString('ko', { hour: '2-digit', minute: '2-digit' })
              : '—'}
          </div>
          <div style={appStyles.statLabel}>마지막 동기화</div>
        </div>
      </div>

      <button style={{
        ...appStyles.closeBtn, height: 52,
        background: '#2F7D4F', color: '#FFFFFF', border: '1px solid #2F7D4F',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }} onClick={onExport}>
        <i data-lucide="download" style={{ width: 18, height: 18 }}></i>
        <span>JSON 내보내기</span>
      </button>

      <input
        ref={fileRef}
        type="file"
        accept=".json,application/json"
        style={{ display: 'none' }}
        onChange={(e) => {
          const f = e.target.files && e.target.files[0];
          if (f) onImport(f);
          e.target.value = '';
        }}
      />
      <button style={{
        ...appStyles.closeBtn, height: 52,
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }} onClick={() => fileRef.current && fileRef.current.click()}>
        <i data-lucide="upload" style={{ width: 18, height: 18, color: '#5C5851' }}></i>
        <span>JSON 불러오기</span>
      </button>

      <div style={{
        padding: 12, background: '#FBFAF6', border: '1px solid #E4E2DA',
        borderRadius: 10, fontSize: 12, lineHeight: 1.5, color: '#5C5851',
      }}>
        <strong style={{ color: '#1A1814' }}>실시간 동기화</strong>가 활성화되어 있습니다.
        여러 기기에서 동시에 편집하면 자동으로 반영됩니다.
      </div>

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