import { useState } from 'react';
import api from '../services/api';
import PwaBottomSheet from './PwaBottomSheet';

export default function PwaChangePasswordSheet({ open, onClose, onSuccess }) {
  const [form, setForm] = useState({ current_password: '', new_password: '', new_password_confirmation: '' });
  const [error, setError] = useState('');
  const [saving, setSaving] = useState(false);

  const submit = async (event) => {
    event.preventDefault();
    setError('');
    if (!form.current_password || !form.new_password || !form.new_password_confirmation) {
      setError('همه فیلدها الزامی است.');
      return;
    }
    if (form.new_password !== form.new_password_confirmation) {
      setError('رمز جدید و تکرار آن یکسان نیست.');
      return;
    }
    if (form.new_password.length < 8) {
      setError('رمز جدید باید حداقل ۸ کاراکتر باشد.');
      return;
    }
    setSaving(true);
    try {
      await api.put('/user/password', form);
      setForm({ current_password: '', new_password: '', new_password_confirmation: '' });
      onSuccess?.();
      onClose();
    } catch (err) {
      setError(err.response?.data?.message || 'تغییر رمز عبور انجام نشد.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <PwaBottomSheet
      open={open}
      title="تغییر رمز عبور"
      onClose={onClose}
      footer={(
        <>
          <button type="button" className="pwa-sheet-cancel" onClick={onClose} disabled={saving}>انصراف</button>
          <button type="submit" form="pwa-change-password-form" className="pwa-sheet-submit" disabled={saving}>{saving ? 'در حال تغییر...' : 'ثبت رمز جدید'}</button>
        </>
      )}
    >
      <form id="pwa-change-password-form" className="pwa-task-form" onSubmit={submit}>
        <label className="pwa-field"><span>رمز فعلی</span><input type="password" value={form.current_password} onChange={(e) => setForm({ ...form, current_password: e.target.value })} /></label>
        <label className="pwa-field"><span>رمز جدید</span><input type="password" value={form.new_password} onChange={(e) => setForm({ ...form, new_password: e.target.value })} /></label>
        <label className="pwa-field"><span>تکرار رمز جدید</span><input type="password" value={form.new_password_confirmation} onChange={(e) => setForm({ ...form, new_password_confirmation: e.target.value })} /></label>
        {error && <div className="pwa-form-error">{error}</div>}
      </form>
    </PwaBottomSheet>
  );
}
