import { useState } from 'react';
import { View, Text, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { safeNavigateTo } from '@/utils/navigate';
import { useAuthStore } from '../../stores/auth';
import './index.scss';

declare const __wxConfig: Record<string, unknown> | undefined;

const IS_DEV = process.env.NODE_ENV !== 'production';
const IS_SIMULATOR = typeof __wxConfig !== 'undefined' && (__wxConfig as Record<string, unknown>)?.envVersion === 'develop';
const SHOW_DEV_LOGIN = (IS_DEV || IS_SIMULATOR) && !!(process.env.TARO_APP_DEV_USER && process.env.TARO_APP_DEV_PASS);

export default function Login() {
  const [agreed, setAgreed] = useState(false);
  const [needBind, setNeedBind] = useState(false);

  const credentialLogin = useAuthStore((s) => s.credentialLogin);
  const login = useAuthStore((s) => s.login);
  const bindPhone = useAuthStore((s) => s.bindPhone);
  const loading = useAuthStore((s) => s.loading);
  const isMedicalStaff = useAuthStore((s) => s.isMedicalStaff);

  const navigateAfterLogin = () => {
    if (isMedicalStaff()) {
      Taro.redirectTo({
        url: '/pages/pkg-doctor-core/index',
        fail: () => {
          Taro.switchTab({
            url: '/pages/index/index',
            success: () => {
              setTimeout(() => {
                Taro.navigateTo({ url: '/pages/pkg-doctor-core/index' });
              }, 500);
            },
          });
        },
      });
    } else {
      Taro.switchTab({ url: '/pages/index/index' });
    }
  };

  const requireAgreement = () => {
    if (!agreed) {
      Taro.showToast({ title: '请先阅读并同意用户协议', icon: 'none' });
      return false;
    }
    return true;
  };

  const handleWechatLogin = async () => {
    if (!requireAgreement()) return;
    try {
      const { code } = await Taro.login();
      const result = await login(code);
      if (result) {
        navigateAfterLogin();
      } else {
        setNeedBind(true);
        Taro.showToast({ title: '请授权手机号完成绑定', icon: 'none' });
      }
    } catch (err: unknown) {
      const msg = err instanceof Error ? err.message : '登录失败，请重试';
      Taro.showToast({ title: msg.substring(0, 20), icon: 'none', duration: 3000 });
    }
  };

  const handleGetPhone = async (e: { detail: { errMsg: string; encryptedData: string; iv: string } }) => {
    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
      Taro.showToast({ title: '需要授权手机号', icon: 'none' });
      return;
    }
    const { encryptedData, iv } = e.detail;
    try {
      const success = await bindPhone(encryptedData, iv);
      if (success) {
        navigateAfterLogin();
      }
    } catch (err: unknown) {
      Taro.showModal({
        title: '绑定手机号失败',
        content: err instanceof Error ? err.message : '绑定失败',
        confirmText: '重新登录',
        cancelText: '取消',
        success: (res) => { if (res.confirm) setNeedBind(false); },
      });
    }
  };

  // DevTools 中 getPhoneNumber 不可用，直接传 mock 数据绕过微信 SDK
  // 仅在后端 wechat_dev_mode=true 时有效，后端会生成 mock 手机号
  const handleDevBindPhone = async () => {
    try {
      const success = await bindPhone('dev_mock', 'dev_mock');
      if (success) {
        navigateAfterLogin();
      }
    } catch (err: unknown) {
      Taro.showModal({
        title: '绑定失败',
        content: err instanceof Error ? err.message : '绑定失败',
        confirmText: '重新登录',
        cancelText: '取消',
        success: (res) => { if (res.confirm) setNeedBind(false); },
      });
    }
  };

  const handleDevQuickLogin = async () => {
    if (!requireAgreement()) return;
    const devUser = process.env.TARO_APP_DEV_USER || '';
    const devPass = process.env.TARO_APP_DEV_PASS || '';
    if (!devUser || !devPass) return;
    try {
      const success = await credentialLogin(devUser, devPass);
      if (success) {
        navigateAfterLogin();
      }
    } catch (err: unknown) {
      Taro.showToast({ title: err instanceof Error ? err.message : '登录失败', icon: 'none' });
    }
  };

  return (
    <View className="login-page">
      {/* 品牌区 */}
      <View className="login-brand">
        <View className="login-logo">
          <Text className="login-logo-letter">H</Text>
        </View>
        <Text className="login-title">HMS 健康</Text>
        <Text className="login-subtitle">您的专属健康管家</Text>
      </View>

      {!needBind ? (
        <>
          {/* 微信一键登录（主按钮） */}
          <View className="login-wechat-btn" onClick={handleWechatLogin}>
            <Text className="login-wechat-icon">微</Text>
            <Text className="login-wechat-text">微信一键登录</Text>
          </View>

          {/* 协议 */}
          <View className="agreement-row">
            <View
              className={`agreement-check ${agreed ? 'checked' : ''}`}
              onClick={() => setAgreed(!agreed)}
            >
              {agreed && <Text className="agreement-check-mark">&#10003;</Text>}
            </View>
            <Text className="agreement-text">
              登录即同意
              <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/user-agreement')}>《用户协议》</Text>
              和
              <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/privacy-policy')}>《隐私政策》</Text>
            </Text>
          </View>
        </>
      ) : (
        <View className="login-bind-section">
          {/* 真机：微信手机号授权 */}
          {!SHOW_DEV_LOGIN && (
            <Button
              className="login-btn-bind"
              openType="getPhoneNumber"
              onGetPhoneNumber={handleGetPhone}
              loading={loading}
              disabled={loading}
            >
              授权手机号完成绑定
            </Button>
          )}
          {/* DevTools：跳过微信 SDK 直接调后端（后端 wechat_dev_mode 会用 mock 手机号） */}
          {SHOW_DEV_LOGIN && (
            <Button
              className="login-btn-bind"
              onClick={handleDevBindPhone}
              loading={loading}
              disabled={loading}
            >
              授权手机号完成绑定（开发模式）
            </Button>
          )}
          {/* 协议 */}
          <View className="agreement-row" style={{ marginTop: '16px' }}>
            <View
              className={`agreement-check ${agreed ? 'checked' : ''}`}
              onClick={() => setAgreed(!agreed)}
            >
              {agreed && <Text className="agreement-check-mark">&#10003;</Text>}
            </View>
            <Text className="agreement-text">
              登录即同意
              <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/user-agreement')}>《用户协议》</Text>
              和
              <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/privacy-policy')}>《隐私政策》</Text>
            </Text>
          </View>
        </View>
      )}

      <View style={{ flex: 1 }} />

      {/* 开发模式快速登录 — 仅 dev 构建 + DevTools 中显示 */}
      {SHOW_DEV_LOGIN && (
        <View className="login-dev-btn" onClick={handleDevQuickLogin}>
          <Text className="login-dev-btn-text">开发模式快速登录 ›</Text>
        </View>
      )}
    </View>
  );
}