'use client';

import { useState } from 'react';

export default function ChangePasswordModal({ onClose }: { onClose: () => void }) {
  const [current, setCurrent] = useState('');
  const [newPass, setNewPass] = useState('');
  const [confirm, setConfirm] = useState('');
  const [showCurrent, setShowCurrent] = useState(false);
  const [showNew, setShowNew] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState('');

  const handleSave = () => {
    if (newPass.length < 8) {
      setError('كلمة المرور يجب أن تكون 8 أحرف على الأقل');
      return;
    }
    if (newPass !== confirm) {
      setError('كلمة المرور وتأكيدها غير متطابقتين');
      return;
    }
    setError('');
    setSaved(true);
    setTimeout(() => {
      setSaved(false);
      onClose();
    }, 1200);
  };

  const strength = newPass.length === 0 ? 0 : newPass.length < 6 ? 1 : newPass.length < 10 ? 2 : 3;
  const strengthLabel = ['', 'ضعيفة', 'متوسطة', 'قوية'];
  const strengthColor = ['', '#EF4444', '#F59E0B', '#059669'];

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center" style={{ background: 'rgba(0,0,0,0.5)' }} onClick={onClose}>
      <div
        className="w-full rounded-t-3xl p-6 pb-10"
        style={{ maxWidth: '390px', background: 'white' }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="w-10 h-1 rounded-full mx-auto mb-5" style={{ background: '#E2E8F0' }}></div>

        <div className="flex items-center justify-between mb-6">
          <h2 className="text-lg font-bold text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>تغيير كلمة المرور</h2>
          <button onClick={onClose} className="w-8 h-8 rounded-full flex items-center justify-center cursor-pointer" style={{ background: '#F1F5F9' }}>
            <i className="ri-close-line text-slate-500 text-lg"></i>
          </button>
        </div>

        <div className="space-y-4 mb-4">
          <PasswordField
            label="كلمة المرور الحالية"
            value={current}
            onChange={setCurrent}
            show={showCurrent}
            onToggle={() => setShowCurrent(!showCurrent)}
          />
          <PasswordField
            label="كلمة المرور الجديدة"
            value={newPass}
            onChange={setNewPass}
            show={showNew}
            onToggle={() => setShowNew(!showNew)}
          />

          {newPass.length > 0 && (
            <div className="px-1">
              <div className="flex gap-1.5 mb-1">
                {[1, 2, 3].map((i) => (
                  <div
                    key={i}
                    className="flex-1 h-1.5 rounded-full transition-all"
                    style={{ background: i <= strength ? strengthColor[strength] : '#E2E8F0' }}
                  ></div>
                ))}
              </div>
              <p className="text-xs text-right" style={{ color: strengthColor[strength], fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                قوة كلمة المرور: {strengthLabel[strength]}
              </p>
            </div>
          )}

          <PasswordField
            label="تأكيد كلمة المرور الجديدة"
            value={confirm}
            onChange={setConfirm}
            show={showConfirm}
            onToggle={() => setShowConfirm(!showConfirm)}
          />
        </div>

        {error && (
          <div className="flex items-center gap-2 p-3 rounded-xl mb-4" style={{ background: '#FEF2F2' }}>
            <i className="ri-error-warning-fill text-red-500"></i>
            <p className="text-xs text-red-600 text-right" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{error}</p>
          </div>
        )}

        <button
          onClick={handleSave}
          className="w-full h-12 rounded-xl font-bold text-base cursor-pointer whitespace-nowrap flex items-center justify-center gap-2 transition-all"
          style={{
            background: saved ? '#059669' : '#172554',
            color: 'white',
            fontFamily: '"IBM Plex Sans Arabic", sans-serif',
          }}
        >
          {saved ? (
            <><i className="ri-check-line text-lg"></i><span>تم التغيير!</span></>
          ) : (
            <><i className="ri-lock-password-fill text-lg"></i><span>تغيير كلمة المرور</span></>
          )}
        </button>
      </div>
    </div>
  );
}

function PasswordField({ label, value, onChange, show, onToggle }: {
  label: string; value: string; onChange: (v: string) => void; show: boolean; onToggle: () => void;
}) {
  return (
    <div>
      <label className="block text-xs font-semibold text-slate-500 mb-1.5 text-right" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{label}</label>
      <div className="flex items-center gap-2 px-4 h-12 rounded-xl border" style={{ background: '#F8FAFF', borderColor: '#E0E7FF' }}>
        <button onClick={onToggle} className="cursor-pointer flex-shrink-0">
          <i className={`${show ? 'ri-eye-off-fill' : 'ri-eye-fill'} text-slate-400 text-lg`}></i>
        </button>
        <input
          type={show ? 'text' : 'password'}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          className="flex-1 bg-transparent text-sm text-right outline-none text-slate-800"
          style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}
          dir="ltr"
        />
        <i className="ri-lock-fill text-slate-400 flex-shrink-0"></i>
      </div>
    </div>
  );
}