import React, { useState } from 'react';

const ChangePassword = ({ token }) => {
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [message, setMessage] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setMessage('');
    try {
      const res = await fetch('/api/player/change-password', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({ oldPassword, newPassword })
      });
      const data = await res.json();
      if (res.ok) {
        setMessage('Password changed successfully!');
        setOldPassword('');
        setNewPassword('');
      } else {
        setMessage(data.error || 'Failed to change password');
      }
    } catch {
      setMessage('Failed to change password');
    }
    setLoading(false);
  };

  if (!token) return <div>Please log in.</div>;

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: '2rem auto', textAlign: 'center' }}>
      <div>
        <input
          type="password"
          placeholder="Old Password"
          value={oldPassword}
          onChange={e => setOldPassword(e.target.value)}
          style={{ padding: '0.5rem', width: '80%', marginBottom: 8 }}
          required
        />
      </div>
      <div>
        <input
          type="password"
          placeholder="New Password"
          value={newPassword}
          onChange={e => setNewPassword(e.target.value)}
          style={{ padding: '0.5rem', width: '80%', marginBottom: 8 }}
          required
        />
      </div>
      <button type="submit" disabled={loading}>{loading ? 'Changing...' : 'Change Password'}</button>
      <div style={{ marginTop: 8, color: '#2563eb' }}>{message}</div>
    </form>
  );
};

export default ChangePassword;