/**
 * 运行模式切换弹窗
 * =============
 *
 * 通过「关于我们」页面连击版本号 5 次触发。
 * 预设列表由 Rust 层提供，前端不硬编码任何 API 地址。
 */

import { useState, useEffect } from 'react';
import './ConfirmModal.css';
import { getEnvironmentPresets, type EnvironmentPreset } from '../../api/modules/config';

interface EnvironmentSwitchModalProps {
  open: boolean;
  currentEnv: string;
  onSave: (env: string) => void;
  onCancel: () => void;
}

export default function EnvironmentSwitchModal({
  open,
  currentEnv,
  onSave,
  onCancel,
}: EnvironmentSwitchModalProps) {
  const [presets, setPresets] = useState<EnvironmentPreset[]>([]);
  const [selected, setSelected] = useState(currentEnv);

  useEffect(() => {
    if (open) {
      getEnvironmentPresets().then(setPresets).catch(console.error);
    }
  }, [open]);

  if (!open) {return null;}

  const handleSave = () => {
    onSave(selected);
  };

  return (
    <div className="confirm-modal-overlay" onClick={onCancel}>
      <div className="confirm-modal-container" style={{ width: '100%', maxWidth: '440px', padding: '24px' }} onClick={e => e.stopPropagation()}>
        <div style={{ textAlign: 'center' }}>
          <div className="confirm-modal-icon" style={{ color: 'var(--text-tertiary)', margin: '0 auto 16px' }}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10" />
              <line x1="12" y1="16" x2="12" y2="12" />
              <line x1="12" y1="8" x2="12.01" y2="8" />
            </svg>
          </div>
          <h3 className="confirm-modal-title" style={{ marginBottom: '8px' }}>切换运行模式</h3>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <p style={{ color: 'var(--text-secondary)', fontSize: '13px', textAlign: 'center', margin: '0 0 12px' }}>
            切换后需重启应用生效
          </p>

          <div>
            {presets.map((preset) => (
              <label
                key={preset.env}
                style={{
                  display: 'block',
                  padding: '8px 12px',
                  borderRadius: '8px',
                  cursor: 'pointer',
                  background: selected === preset.env ? 'var(--bg-hover)' : 'transparent',
                }}
              >
                <div style={{ display: 'inline-block', verticalAlign: 'top', width: '20px' }}>
                  <input
                    type="radio"
                    name="env"
                    value={preset.env}
                    checked={selected === preset.env}
                    onChange={() => setSelected(preset.env)}
                    style={{ margin: '2px 0 0' }}
                  />
                </div>
                <div style={{ display: 'inline-block', verticalAlign: 'top', marginLeft: '8px' }}>
                  <div style={{ fontSize: '14px', lineHeight: '20px' }}>{preset.label}</div>
                </div>
              </label>
            ))}
          </div>
        </div>

        <div className="confirm-modal-actions">
          <button className="confirm-modal-btn cancel" onClick={onCancel}>
            取消
          </button>
          <button className="confirm-modal-btn primary" onClick={handleSave}>
            保存并重启
          </button>
        </div>
      </div>
    </div>
  );
}
