// password-modal.jsx — Modal para que el admin cambie su contraseña.

function PwInput({ id, label, value, onChange, placeholder }) {
  const [visible, setVisible] = React.useState(false);
  return (
    <div className="field" style={{ marginBottom: 12 }}>
      <label className="field-label" htmlFor={id}>{label}</label>
      <div style={{ position: "relative" }}>
        <input
          id={id}
          className="input"
          type={visible ? "text" : "password"}
          autoComplete="new-password"
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          style={{ paddingRight: 42 }}
          required
        />
        <button
          type="button"
          onClick={() => setVisible(v => !v)}
          aria-label={visible ? "Ocultar contraseña" : "Mostrar contraseña"}
          title={visible ? "Ocultar contraseña" : "Mostrar contraseña"}
          style={{
            position: "absolute",
            top: "50%", right: 6,
            transform: "translateY(-50%)",
            width: 32, height: 32,
            display: "flex", alignItems: "center", justifyContent: "center",
            background: "transparent",
            border: "none",
            borderRadius: "var(--radius-xs)",
            color: "var(--ink-2)",
            cursor: "pointer",
            padding: 0,
          }}
        >
          <Icon name={visible ? "eyeOff" : "eye"} style={{ width: 18, height: 18 }} />
        </button>
      </div>
    </div>
  );
}

function PasswordModal({ onClose, onSuccess, onError }) {
  const [current, setCurrent] = React.useState("");
  const [next, setNext]       = React.useState("");
  const [confirm, setConfirm] = React.useState("");
  const [saving, setSaving]   = React.useState(false);
  const [error, setError]     = React.useState(null);

  React.useEffect(() => {
    const h = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [onClose]);

  const onBackClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  const submit = async (e) => {
    e.preventDefault();
    setError(null);

    if (next.length < 8) {
      setError("La nueva contraseña debe tener al menos 8 caracteres.");
      return;
    }
    if (next !== confirm) {
      setError("La confirmación no coincide con la nueva contraseña.");
      return;
    }
    if (current === next) {
      setError("La nueva contraseña debe ser distinta a la actual.");
      return;
    }

    setSaving(true);
    try {
      await api.changePassword(current, next);
      onSuccess && onSuccess("Contraseña actualizada correctamente");
      onClose();
    } catch (err) {
      setError((err && err.message) || "No se pudo cambiar la contraseña");
      onError && onError(err);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="modal-back" onMouseDown={onBackClick}>
      <div
        className="modal"
        onMouseDown={e => e.stopPropagation()}
        style={{ maxWidth: 440 }}
      >
        <div className="modal-h">
          <Icon name="lock" style={{ width: 18, height: 18 }} />
          <h2 style={{ margin: 0 }}>Cambiar contraseña</h2>
          <button className="modal-x" onClick={onClose} aria-label="Cerrar">
            <Icon name="x" />
          </button>
        </div>

        <form className="modal-body" onSubmit={submit} autoComplete="off">
          <PwInput
            id="pw-current"
            label="Contraseña actual"
            value={current}
            onChange={e => setCurrent(e.target.value)}
          />
          <PwInput
            id="pw-new"
            label="Nueva contraseña"
            value={next}
            onChange={e => setNext(e.target.value)}
            placeholder="Mínimo 8 caracteres"
          />
          <PwInput
            id="pw-confirm"
            label="Confirmar nueva contraseña"
            value={confirm}
            onChange={e => setConfirm(e.target.value)}
          />

          {error && (
            <div
              style={{
                marginTop: 10,
                padding: "10px 12px",
                background: "var(--p-high-soft, rgba(225,29,72,.12))",
                border: "1px solid color-mix(in oklab, var(--p-high, #e11d48) 30%, transparent)",
                borderRadius: "var(--radius-sm)",
                color: "var(--p-high, #e11d48)",
                fontSize: 13,
                fontWeight: 600,
              }}
            >
              {error}
            </div>
          )}

          <div className="modal-foot" style={{ paddingLeft: 0, paddingRight: 0, marginTop: 16 }}>
            <div className="left" />
            <div className="right">
              <button
                type="button"
                className="btn btn-sm"
                onClick={onClose}
                disabled={saving}
              >
                Cancelar
              </button>
              <button
                type="submit"
                className="btn btn-sm btn-primary"
                disabled={saving}
              >
                <Icon name="check" style={{ width: 13, height: 13 }} />
                {saving ? "Guardando…" : "Guardar"}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}

window.PasswordModal = PasswordModal;