import { useQrState } from '../store/qrContext';
import { useQrEncode } from '../hooks/useQrEncode';
import { buildWifiText } from '../utils/qrText';

export default function WifiMode() {
  const { state, dispatch } = useQrState();
  const { encode } = useQrEncode();

  /** checkbox 的 boolean 值统一转为 'true'/'false' 字符串存入 formData */
  const update = (field: string, value: string) => {
    const data = { ...state.formData, [field]: value };
    dispatch({ type: 'SET_FORM_DATA', payload: data });
    encode(buildWifiText(data));
  };

  return (
    <div className="flex gap-2 items-center h-full px-4">
      <input
        placeholder="SSID"
        value={state.formData.ssid || ''}
        onChange={(e) => update('ssid', e.target.value)}
        className="flex-1 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30"
      />
      <input
        placeholder="密码"
        type="password"
        value={state.formData.password || ''}
        onChange={(e) => update('password', e.target.value)}
        className="flex-1 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30"
      />
      <select
        value={state.formData.encryption || 'WPA'}
        onChange={(e) => update('encryption', e.target.value)}
        className="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm bg-transparent outline-none focus:ring-2 focus:ring-blue-500/30"
      >
        <option value="WPA">WPA/WPA2</option>
        <option value="WEP">WEP</option>
        <option value="nopass">无密码</option>
      </select>
      <label className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
        <input
          type="checkbox"
          checked={state.formData.hidden === 'true'}
          onChange={(e) => update('hidden', e.target.checked ? 'true' : 'false')}
        />
        隐藏
      </label>
    </div>
  );
}