import React, { useState } from 'react';
import { t } from '@/i18n';
import Taro from '@tarojs/taro';
import { authStore } from '../../store/auth';
import { sendSmsCode, type SmsCodeType } from '../../services/auth';
import logoIcon from '@/assets/images/logo_icon.png';
// Taro mini-program component

/**
 * E3. 登录/注册页
 *
 * 微信小程序：一键微信登录
 * H5：手机号+验证码
 */

const LoginPage: React.FC = () => {
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [codeSending, setCodeSending] = useState(false);
  const [codeCountdown, setCodeCountdown] = useState(0);
  const [logging, setLogging] = useState(false);

  const handleSendCode = () => {
    if (!phone || phone.length < 11 || codeSending || codeCountdown > 0) return;
    setCodeSending(true);
    sendSmsCode(phone, 'LOGIN')
      .then(() => {
        Taro.showToast({ title: t('login_code_sent'), icon: 'success' });
        setCodeCountdown(60);
        const timer = setInterval(() => {
          setCodeCountdown((prev) => {
            if (prev <= 1) {
              clearInterval(timer);
              return 0;
            }
            return prev - 1;
          });
        }, 1000);
      })
      .catch(() => {})
      .finally(() => setCodeSending(false));
  };

  const handlePhoneLogin = () => {
    if (!phone || !code || logging) return;
    setLogging(true);
    authStore.loginByPhone(phone, code)
      .then(() => {
        Taro.reLaunch({ url: '/pages/home/index' });
      })
      .catch(() => {})
      .finally(() => setLogging(false));
  };

  const handleWechatLogin = () => {
    setLogging(true);
    authStore.loginByWechat()
      .then(() => {
        Taro.reLaunch({ url: '/pages/home/index' });
      })
      .catch(() => {})
      .finally(() => setLogging(false));
  };

  return (
    <view className="login-page">
      {/* Logo */}
      <view className="logo-section">
        <image className="logo-img" src={logoIcon} mode="aspectFit" />
        <text className="app-name">GENEX</text>
        <text className="app-slogan">{t('app_slogan')}</text>
      </view>

      {/* WeChat Login (小程序) */}
      <view className="login-actions">
        <view className="wechat-btn" onClick={handleWechatLogin}>
          <text className="wechat-icon">💬</text>
          <text className="wechat-text">{logging ? t('loading') : t('login_wechat')}</text>
        </view>

        <view className="divider">
          <view className="divider-line" />
          <text className="divider-text">{t('login_or')}</text>
          <view className="divider-line" />
        </view>

        {/* Phone Login (H5) */}
        <view className="phone-section">
          <view className="input-wrap">
            <text className="input-icon">📱</text>
            <input
              className="input-field"
              placeholder={t('login_phone')}
              type="number"
              value={phone}
              onInput={(e: any) => setPhone(e.detail.value)}
              maxlength={11}
            />
          </view>
          <view className="input-wrap code-wrap">
            <view className="code-input">
              <text className="input-icon">🔒</text>
              <input
                className="input-field"
                placeholder={t('login_code')}
                type="number"
                value={code}
                onInput={(e: any) => setCode(e.detail.value)}
                maxlength={6}
              />
            </view>
            <view className="code-btn" onClick={handleSendCode}>
              <text className="code-btn-text">
                {codeCountdown > 0 ? `${codeCountdown}s` : (codeSending ? '...' : t('login_send_code'))}
              </text>
            </view>
          </view>
          <view className="login-btn" onClick={handlePhoneLogin}>
            <text className="login-btn-text">{logging ? t('loading') : t('login_btn')}</text>
          </view>
        </view>

        {/* Terms */}
        <view className="terms">
          <text className="terms-text">{t('login_agree')}</text>
          <text className="terms-link">{t('login_user_agreement')}</text>
          <text className="terms-text">{t('login_and')}</text>
          <text className="terms-link">{t('login_privacy_policy')}</text>
        </view>
      </view>
    </view>
  );
};

export default LoginPage;

/*
CSS:

.login-page {
  min-height: 100vh; background: white;
  display: flex; flex-direction: column;
  padding: 0 64rpx;
}

.logo-section {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 160rpx; padding-bottom: 80rpx;
}
.logo-img {
  width: 120rpx; height: 120rpx;
}
.app-name { font-size: 40rpx; font-weight: 700; color: #141723; margin-top: 24rpx; }
.app-slogan { font-size: 26rpx; color: #A0A8BE; margin-top: 8rpx; }

.login-actions { flex: 1; }

.wechat-btn {
  display: flex; align-items: center; justify-content: center;
  height: 96rpx; background: #07C160; border-radius: 999rpx;
}
.wechat-icon { font-size: 36rpx; margin-right: 12rpx; }
.wechat-text { color: white; font-size: 30rpx; font-weight: 600; }

.divider {
  display: flex; align-items: center; margin: 48rpx 0;
}
.divider-line { flex: 1; height: 1rpx; background: #E4E7F0; }
.divider-text { margin: 0 24rpx; font-size: 24rpx; color: #A0A8BE; }

.input-wrap {
  display: flex; align-items: center;
  height: 96rpx; background: #F8F9FC;
  border-radius: 16rpx; padding: 0 24rpx;
  margin-bottom: 20rpx; border: 1rpx solid #E4E7F0;
}
.input-icon { font-size: 32rpx; margin-right: 16rpx; }
.input-field { flex: 1; font-size: 28rpx; background: transparent; }

.code-wrap { padding: 0; }
.code-input {
  flex: 1; display: flex; align-items: center;
  padding: 0 24rpx;
}
.code-btn {
  padding: 0 28rpx; height: 96rpx;
  display: flex; align-items: center;
  border-left: 1rpx solid #E4E7F0;
}
.code-btn-text { font-size: 24rpx; color: #6C5CE7; font-weight: 500; }

.login-btn {
  height: 96rpx; background: #6C5CE7; border-radius: 999rpx;
  display: flex; align-items: center; justify-content: center;
  margin-top: 16rpx;
}
.login-btn-text { color: white; font-size: 30rpx; font-weight: 600; }

.terms {
  display: flex; justify-content: center; align-items: center;
  padding: 48rpx 0; flex-wrap: wrap;
}
.terms-text { font-size: 22rpx; color: #A0A8BE; }
.terms-link { font-size: 22rpx; color: #6C5CE7; }
*/
