import React, { useState } from 'react';
import { inboxApi } from '../../api.js';

export function BackupSection(): React.ReactElement {
  const [status, setStatus] = useState<string | null>(null);

  // IPC 핸들러 (settingsApi.ts) 가 자체 try/catch + Notification 으로 결과를 사용자에게 알림.
  // 이 컴포넌트의 status 는 보조 진행 표시 — 결과 (성공/실패) 는 native UX 에 의존.
  async function run(label: string, fn: () => Promise<unknown>): Promise<void> {
    setStatus(`${label}: 진행 중...`);
    await fn();
    setStatus(null);
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <button onClick={() => run('지금 백업', () => inboxApi.runBackup())}>지금 백업</button>
      <button onClick={() => run('내보내기', () => inboxApi.runExport())}>내보내기...</button>
      <button onClick={() => run('백업에서 복원', () => inboxApi.runImport())}>백업에서 복원...</button>
      <button onClick={() => run('지금 동기화', () => inboxApi.runSync())}>지금 동기화</button>
      <button onClick={() => run('사용 로그 내보내기', () => inboxApi.runExportTelemetry())}>사용 로그 내보내기...</button>
      {status && <div style={{ fontSize: 12 }}>{status}</div>}
    </div>
  );
}
