import { useState, useCallback } from 'react';
import { useAuthStore } from '../store/auth';
import { authApi } from '../lib/api';
import logoImg from '../assets/logo_32.png';
import styles from './ForceChangePasswordModal.module.css';

interface Props {
  onSuccess: () => void;
}

export function ForceChangePasswordModal({ onSuccess }: Props) {
  const clearMustChangePassword = useAuthStore((s) => s.clearMustChangePassword);
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = useCallback(async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    if (!oldPassword) { setError('请输入当前密码'); return; }
    if (newPassword.length < 8) { setError('新密码至少8位'); return; }
    if (newPassword !== confirmPassword) { setError('两次输入的新密码不一致'); return; }
    if (oldPassword === newPassword) { setError('新密码不能与当前密码相同'); return; }

    setLoading(true);
    try {
      await authApi.changePassword(oldPassword, newPassword);
      clearMustChangePassword();
      onSuccess();
    } catch (err: any) {
      const msg = err.response?.data?.message || err.response?.data?.error || '密码修改失败，请重试';
      setError(msg);
    } finally {
      setLoading(false);
    }
  }, [oldPassword, newPassword, confirmPassword, clearMustChangePassword, onSuccess]);

  return (
    <div className={styles.overlay}>
      <div className={styles.panel}>
        <div className={styles.header}>
          <img src={logoImg} alt="" className={styles.headerLogo} />
          <span className={styles.headerTitle}>Air Drama</span>
        </div>

        <p className={styles.notice}>
          首次登录请修改密码后继续使用
        </p>

        <form onSubmit={handleSubmit} className={styles.form}>
          <div className={styles.field}>
            <label className={styles.label}>当前密码</label>
            <input
              type="password"
              className={styles.input}
              value={oldPassword}
              onChange={(e) => setOldPassword(e.target.value)}
              placeholder="请输入当前密码"
              autoFocus
            />
          </div>

          <div className={styles.field}>
            <label className={styles.label}>新密码</label>
            <input
              type="password"
              className={styles.input}
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              placeholder="至少8位"
            />
          </div>

          <div className={styles.field}>
            <label className={styles.label}>确认新密码</label>
            <input
              type="password"
              className={styles.input}
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              placeholder="再次输入新密码"
            />
          </div>

          {error && <div className={styles.error}>{error}</div>}

          <button type="submit" className={styles.submitBtn} disabled={loading}>
            {loading ? '修改中...' : '修改密码'}
          </button>
        </form>
      </div>
    </div>
  );
}