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

interface AppInfo {
  version: string;
  electron: string;
  node: string;
  os: string;
  profileDir: string;
}

export function InfoSection(): React.ReactElement {
  const [info, setInfo] = useState<AppInfo | null>(null);

  useEffect(() => {
    void (async () => setInfo(await inboxApi.getAppInfo()))();
  }, []);

  if (!info) return <div style={{ fontSize: 12 }}>로딩 중...</div>;

  return (
    <div>
      <dl style={{ fontSize: 12, lineHeight: 1.6 }}>
        <dt style={{ fontWeight: 600 }}>버전</dt>
        <dd>{info.version}</dd>
        <dt style={{ fontWeight: 600 }}>Electron</dt>
        <dd>{info.electron}</dd>
        <dt style={{ fontWeight: 600 }}>Node</dt>
        <dd>{info.node}</dd>
        <dt style={{ fontWeight: 600 }}>OS</dt>
        <dd>{info.os}</dd>
        <dt style={{ fontWeight: 600 }}>데이터 위치</dt>
        <dd style={{ wordBreak: 'break-all' }}>{info.profileDir}</dd>
      </dl>
      <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
        <button onClick={() => void inboxApi.openProfileDir()}>데이터 위치 열기</button>
        <button onClick={() => void inboxApi.copyAppInfo()}>정보 복사</button>
      </div>
    </div>
  );
}
