FRASA-CAS/apps/dashboards/src/components/CambiarPasswordModal.tsx

import { useState, type FormEvent } from 'react'
import { validarConfirmacion, validarPasswordNueva } from '../lib/password'
import { cambiarPassword } from '../services/auth'

const CLASE_INPUT =
  'w-full border border-neutral-300 px-4 py-3 text-sm focus:border-accent focus:outline-none'
const CLASE_LABEL = 'mb-2 block text-xs font-bold uppercase tracking-widest text-neutral-500'

/**
 * Modal "Cambiar contraseña": actual + nueva + confirmar. Valida en cliente
 * con la misma regla del API y muestra el mensaje del API si la actual no es
 * correcta. Al éxito la sesión sigue intacta (el JWT no cambia).
 */
export default function CambiarPasswordModal({ onCerrar }: { onCerrar: () => void }) {
  const [actual, setActual] = useState('')
  const [nueva, setNueva] = useState('')
  const [confirmar, setConfirmar] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [exito, setExito] = useState(false)
  const [cargando, setCargando] = useState(false)

  async function enviar(e: FormEvent) {
    e.preventDefault()
    const errorCliente = validarPasswordNueva(nueva) ?? validarConfirmacion(nueva, confirmar)
    if (errorCliente) {
      setError(errorCliente)
      return
    }
    setError(null)
    setCargando(true)
    try {
      await cambiarPassword(actual, nueva)
      setExito(true)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'No se pudo cambiar la contraseña')
    } finally {
      setCargando(false)
    }
  }

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4"
      role="dialog"
      aria-modal="true"
      aria-label="Cambiar contraseña"
    >
      <div className="w-full max-w-sm border border-neutral-200 bg-white p-6">
        <h2 className="mb-6 text-xs font-bold uppercase tracking-widest text-neutral-500">
          Cambiar contraseña
        </h2>
        {exito ? (
          <>
            <p className="border border-accent px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
              Contraseña actualizada
            </p>
            <button
              type="button"
              onClick={onCerrar}
              className="mt-6 w-full bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover"
            >
              Cerrar
            </button>
          </>
        ) : (
          <form onSubmit={enviar} className="space-y-6">
            <div>
              <label htmlFor="password-actual" className={CLASE_LABEL}>
                Contraseña actual
              </label>
              <input
                id="password-actual"
                type="password"
                value={actual}
                onChange={(e) => setActual(e.target.value)}
                autoComplete="current-password"
                autoFocus
                required
                className={CLASE_INPUT}
              />
            </div>
            <div>
              <label htmlFor="password-nueva" className={CLASE_LABEL}>
                Nueva contraseña
              </label>
              <input
                id="password-nueva"
                type="password"
                value={nueva}
                onChange={(e) => setNueva(e.target.value)}
                autoComplete="new-password"
                required
                className={CLASE_INPUT}
              />
              <p className="mt-2 text-xs text-neutral-400">Mínimo 8 caracteres y un número</p>
            </div>
            <div>
              <label htmlFor="password-confirmar" className={CLASE_LABEL}>
                Confirmar nueva contraseña
              </label>
              <input
                id="password-confirmar"
                type="password"
                value={confirmar}
                onChange={(e) => setConfirmar(e.target.value)}
                autoComplete="new-password"
                required
                className={CLASE_INPUT}
              />
            </div>
            {error && (
              <p
                role="alert"
                className="border border-red-700 px-4 py-3 text-xs font-bold uppercase tracking-widest text-red-700"
              >
                {error}
              </p>
            )}
            <div className="flex gap-3">
              <button
                type="submit"
                disabled={cargando}
                className="flex-1 bg-accent px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-accent-hover disabled:opacity-50"
              >
                {cargando ? 'Guardando…' : 'Guardar'}
              </button>
              <button
                type="button"
                onClick={onCerrar}
                className="border border-neutral-300 px-5 py-3 text-xs font-bold uppercase tracking-widest text-neutral-500 transition-colors duration-150 hover:border-neutral-500"
              >
                Cancelar
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  )
}