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

const CLASE_INPUT =
  'w-full rounded-lg border border-[#D1D5DB] bg-white px-3 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20'
const CLASE_LABEL = 'mb-2 block text-xs font-medium text-[#4B5563] dark:text-[#CBD5E1]'

/**
 * 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 rounded-2xl border border-[#E5E7EB] bg-white p-6 dark:border-[#1E293B] dark:bg-[#1E293B] shadow-xl">
        <h2 className="mb-6 text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">
          Cambiar contraseña
        </h2>
        {exito ? (
          <>
            <p className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
              Contraseña actualizada
            </p>
            <button
              type="button"
              onClick={onCerrar}
              className="mt-6 w-full rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out 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="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"
              >
                {error}
              </p>
            )}
            <div className="flex gap-3">
              <button
                type="submit"
                disabled={cargando}
                className="flex-1 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-50"
              >
                {cargando ? 'Guardando…' : 'Guardar'}
              </button>
              <button
                type="button"
                onClick={onCerrar}
                className="rounded-lg border border-[#D1D5DB] bg-white px-5 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] transition-all duration-100 ease-out hover:bg-[#F9FAFB]"
              >
                Cancelar
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  )
}