import React from 'react';
import { useAppSettings } from '../../hooks/useAppSettings';
import { resetPaperAccount } from '../../utils/backendApi';
import PaperSplitPanel from './PaperSplitPanel';

interface Props {
  onSettingsSaved?: () => void;
  onAccountReset?: () => void;
}

const PaperLeftSettingsTab: React.FC<Props> = ({ onSettingsSaved, onAccountReset }) => {
  const { defaults, save, isLoaded } = useAppSettings();

  if (!isLoaded) {
    return <p className="ptd-muted">설정 로딩…</p>;
  }

  const patch = (p: Parameters<typeof save>[0]) => {
    save(p);
    onSettingsSaved?.();
  };

  const handleReset = async () => {
    if (!window.confirm('모의투자 계좌를 초기화합니다. 계속할까요?')) return;
    const res = await resetPaperAccount();
    if (res) onAccountReset?.();
  };

  const top = (
    <>
      <div className="ptd-left-section">
        <label className="ptd-left-row">
          <span>모의투자 활성화</span>
          <input
            type="checkbox"
            checked={defaults.paperTradingEnabled}
            onChange={e => patch({ paperTradingEnabled: e.target.checked })}
          />
        </label>
      </div>
      <div className="ptd-left-section">
        <label className="ptd-left-row">
          <span>자동매매</span>
          <input
            type="checkbox"
            checked={defaults.paperAutoTradeEnabled}
            onChange={e => patch({ paperAutoTradeEnabled: e.target.checked })}
          />
        </label>
        <label className="ptd-left-field">
          <span>매수 예산 (%)</span>
          <input
            type="number"
            className="ptd-left-input"
            min={1}
            max={100}
            value={defaults.paperAutoTradeBudgetPct}
            disabled={!defaults.paperAutoTradeEnabled}
            onChange={e => patch({ paperAutoTradeBudgetPct: Number(e.target.value) })}
          />
        </label>
      </div>
    </>
  );

  const bottom = (
    <>
      <div className="ptd-left-section">
        <label className="ptd-left-field">
          <span>초기 자본 (KRW)</span>
          <input
            type="number"
            className="ptd-left-input"
            min={100000}
            step={100000}
            value={defaults.paperInitialCapital}
            onChange={e => patch({ paperInitialCapital: Number(e.target.value) })}
          />
        </label>
        <label className="ptd-left-field">
          <span>수수료율 (%)</span>
          <input
            type="number"
            className="ptd-left-input"
            min={0}
            max={1}
            step={0.01}
            value={defaults.paperFeeRatePct}
            onChange={e => patch({ paperFeeRatePct: Number(e.target.value) })}
          />
        </label>
        <label className="ptd-left-field">
          <span>슬리피지 (%)</span>
          <input
            type="number"
            className="ptd-left-input"
            min={0}
            max={5}
            step={0.01}
            value={defaults.paperSlippagePct}
            onChange={e => patch({ paperSlippagePct: Number(e.target.value) })}
          />
        </label>
        <label className="ptd-left-field">
          <span>최소 주문 (KRW)</span>
          <input
            type="number"
            className="ptd-left-input"
            min={1000}
            step={1000}
            value={defaults.paperMinOrderKrw}
            onChange={e => patch({ paperMinOrderKrw: Number(e.target.value) })}
          />
        </label>
      </div>
      <button type="button" className="bps-btn bps-btn--danger ptd-left-reset" onClick={() => void handleReset()}>
        계좌 초기화
      </button>
    </>
  );

  return (
    <PaperSplitPanel
      className="ptd-split-panel--left"
      topTitle="운영 · 자동매매"
      bottomTitle="계좌 · 비용"
      top={top}
      bottom={bottom}
    />
  );
};

export default PaperLeftSettingsTab;
