import React from 'react';
import { useInbox } from '../store.js';
import { AiProviderSection } from './settings/AiProviderSection.js';
import { AutostartSection } from './settings/AutostartSection.js';
import { BackupSection } from './settings/BackupSection.js';
import { InfoSection } from './settings/InfoSection.js';
import { SyncSection } from './settings/SyncSection.js';

export function SettingsPage(): React.ReactElement {
  const setShowSettings = useInbox((s) => s.setShowSettings);
  return (
    <div style={{ padding: 16, maxWidth: 720, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
        <button
          onClick={() => setShowSettings(false)}
          style={{
            background: 'transparent',
            border: 'none',
            fontSize: 14,
            cursor: 'pointer',
            color: '#0a4b80'
          }}
        >
          ← 돌아가기
        </button>
        <h1 style={{ fontSize: 18, margin: 0 }}>설정</h1>
      </div>
      <section style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: 14, marginBottom: 8 }}>AI 제공자</h2>
        <AiProviderSection />
      </section>
      <section style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: 14, marginBottom: 8 }}>자동 실행</h2>
        <AutostartSection />
      </section>
      <section style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: 14, marginBottom: 8 }}>백업 / 복원</h2>
        <BackupSection />
      </section>
      <section style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: 14, marginBottom: 8 }}>정보</h2>
        <InfoSection />
      </section>
      <section style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: 14, marginBottom: 8 }}>동기화</h2>
        <SyncSection />
      </section>
    </div>
  );
}
